24
24
< link rel ="manifest " href ="manifest.json ">
25
25
< link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css ">
26
26
<!-- Pico.css -->
27
- < link rel ="stylesheet " href ="pico.min. css " id ="theme-color-ss ">
27
+ < link rel ="stylesheet " href ="pico.css " id ="theme-color-ss ">
28
28
< link rel ="stylesheet " href ="pico.colors.min.css ">
29
29
<!--
30
30
Yohn's Simple CSS Class helpers
216
216
< main class ="col-12 col-md-9 col-lg-10 ">
217
217
< article >
218
218
< header >
219
- < h2 > Yohns PicoCSS Fork v2.2.8 </ h2 >
219
+ < h2 > Yohns PicoCSS Fork v2.2.9 </ h2 >
220
220
</ header >
221
221
< p > I've merged some open pull requests from the < a href ="https://github.com/picocss/pico "> original Pico</ a >
222
222
repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@@ -230,6 +230,10 @@ <h2>Yohns PicoCSS Fork v2.2.8</h2>
230
230
href ="https://github.com/Yohn/PicoCSS/tree/main/docs/js "> Vanilla JavaScript Files</ a > to work the same as
231
231
the preview here. I may get a build script going to compile the javascript plugins / components later. Let
232
232
me know if this feature would help you.</ p >
233
+ < hr >
234
+ < h3 > <details class="hide-arrow"></ h3 >
235
+ < p > With classes enabled, adding the < code > hide-arrow</ code > class to your < code > <details class="hide-arrow"></ code > will hide the arrow on the < code > <summary></ code > tag within the accordion and dropdown components.</ p >
236
+
233
237
< footer > If this fork has helped you, please < a href ="https://github.com/Yohn/PicoCSS "> Like</ a > this fork!
234
238
</ footer >
235
239
</ article >
@@ -531,25 +535,25 @@ <h6>(resize width of screen if you don't see it)</h6>
531
535
</ ul >
532
536
< input type ="checkbox " id ="menu-btn " />
533
537
<!-- role="button" -->
534
- < label for ="menu-btn " style ="font-size: calc(var(--pico-font-size) * 1.3 ); " aria-label ="Menu "
538
+ < label for ="menu-btn " style ="font-size: calc(var(--pico-font-size) * 2 ); " aria-label ="Menu "
535
539
aria-controls ="nav-example "> ≡ </ label >
536
540
< ol id ="nav-example " role ="list ">
537
- < li role ="listitem "> < a href ="# "> Home</ a > </ li >
541
+ < li role ="listitem "> < a href ="javascript:void(0); "> Home</ a > </ li >
538
542
< li role ="listitem ">
539
- < details class ="dropdown ">
540
- < summary class ="secondary "> About</ summary >
543
+ < details class ="dropdown hide-arrow ">
544
+ < summary class ="secondary " role =" button " > About</ summary >
541
545
< ul >
542
- < li > < a class =" load-page " href ="# "> What’s new in v2?</ a > </ li >
543
- < li > < a class =" load-page " href ="# "> Mission</ a > </ li >
544
- < li > < a class =" load-page " href ="# "> Usage scenarios</ a > </ li >
545
- < li > < a class =" load-page " href ="# "> Brand</ a > </ li >
546
- < li > < a class =" load-page " href ="# "> Built With</ a > </ li >
546
+ < li > < a href ="javascript:void(0); "> What’s new in v2?</ a > </ li >
547
+ < li > < a href ="javascript:void(0); "> Mission</ a > </ li >
548
+ < li > < a href ="javascript:void(0); "> Usage scenarios</ a > </ li >
549
+ < li > < a href ="javascript:void(0); "> Brand</ a > </ li >
550
+ < li > < a href ="javascript:void(0); "> Built With</ a > </ li >
547
551
</ ul >
548
552
</ details >
549
553
</ li >
550
- < li role ="listitem "> < a href ="# "> Services</ a > </ li >
551
- < li role ="listitem "> < a href ="# "> Login</ a > </ li >
552
- < li role ="listitem "> < a href ="# "> Sign Up</ a > </ li >
554
+ < li role ="listitem "> < a href ="javascript:void(0); "> Services</ a > </ li >
555
+ < li role ="listitem "> < a href ="javascript:void(0); "> Login</ a > </ li >
556
+ < li role ="listitem "> < a href ="javascript:void(0); "> Sign Up</ a > </ li >
553
557
</ ol >
554
558
</ nav >
555
559
<!-- End Responsive Nav 1 -->
@@ -563,29 +567,59 @@ <h3>Hamburger Menu Under Nav Example</h3>
563
567
< li > < strong > Like Us on GitHub!</ strong > </ li >
564
568
</ ul >
565
569
< input type ="checkbox " id ="menu-btn2 ">
566
- < label for ="menu-btn2 " style ="font-size: calc(var(--pico-font-size) * 1.3 ); " aria-label ="Menu "
570
+ < label for ="menu-btn2 " style ="font-size: calc(var(--pico-font-size) * 2 ); " aria-label ="Menu "
567
571
aria-controls ="nav-example2 "> ≡ </ label >
568
572
< ol id ="nav-example2 " role ="list ">
569
- < li role ="listitem "> < a href ="# "> Home</ a > </ li >
573
+ < li role ="listitem "> < a href ="javascript:void(0); "> Home</ a > </ li >
570
574
< li role ="listitem ">
571
- < details class ="dropdown ">
572
- < summary class =" secondary " > About</ summary >
575
+ < details class ="dropdown hide-arrow ">
576
+ < summary > About 2 </ summary >
573
577
< ul >
574
- < li > < a class =" load-page " href ="# "> What’s new in v2?</ a > </ li >
575
- < li > < a class =" load-page " href ="# "> Mission</ a > </ li >
576
- < li > < a class =" load-page " href ="# "> Usage scenarios</ a > </ li >
577
- < li > < a class =" load-page " href ="# "> Brand</ a > </ li >
578
- < li > < a class =" load-page " href ="# "> Built With</ a > </ li >
578
+ < li > < a href ="javascript:void(0); "> What’s new in v2?</ a > </ li >
579
+ < li > < a href ="javascript:void(0); "> Mission</ a > </ li >
580
+ < li > < a href ="javascript:void(0); "> Usage scenarios</ a > </ li >
581
+ < li > < a href ="javascript:void(0); "> Brand</ a > </ li >
582
+ < li > < a href ="javascript:void(0); "> Built With</ a > </ li >
579
583
</ ul >
580
584
</ details >
581
585
</ li >
582
- < li role ="listitem "> < a href ="# "> Services</ a > </ li >
583
- < li role ="listitem "> < a href ="# "> Login</ a > </ li >
584
- < li role ="listitem "> < a href ="# "> Sign Up</ a > </ li >
586
+ < li role ="listitem "> < a href ="javascript:void(0); "> Services</ a > </ li >
587
+ < li role ="listitem "> < a href ="javascript:void(0); "> Login</ a > </ li >
588
+ < li role ="listitem "> < a href ="javascript:void(0); "> Sign Up</ a > </ li >
585
589
</ ol >
586
590
</ nav >
587
591
<!-- End Responsive Nav 2 -->
588
592
< hr >
593
+ <!-- Start Responsive Nav 3 -->
594
+ < nav class ="container-fluid " role ="navigation " data-position ="end " data-breakpoint ="lg ">
595
+ < input type ="checkbox " id ="hamburger3 ">
596
+ < label for ="hamburger3 " style ="font-size: calc(var(--pico-font-size) * 2); " aria-label ="Menu " aria-controls ="top-nav "> ≡</ label >
597
+ < ul id ="top-nav " role ="list ">
598
+ < li role ="listitem "> < a href ="javascript:void(0); "> Pico CSS</ a > </ li >
599
+ < li role ="listitem "> < a href ="javascript:void(0); "> Example</ a > </ li >
600
+ < li role ="listitem ">
601
+ < details class ="dropdown hide-arrow ">
602
+ < summary > Submenu</ summary >
603
+ < ul >
604
+ < li > < a href ="javascript:void(0); "> Another Link</ a > </ li >
605
+ < li > < a href ="javascript:void(0); "> And Again</ a > </ li >
606
+ </ ul >
607
+ </ details >
608
+ </ li >
609
+ < li role ="listitem "> < a href ="javascript:void(0); "> Final In List</ a > </ li >
610
+ </ ul >
611
+ < ul > </ ul > <!-- put empty <ul> or <ol> element here to move the next <ul> or <ol> to the right -->
612
+ < ul >
613
+ < li >
614
+ < form role ="search " action ="javascript:void(0); " method ="get ">
615
+ < input name ="search " type ="search " value ="" placeholder ="Find this Article ">
616
+ < input type ="hidden " name ="id " value ="12 ">
617
+ < input type ="submit " value ="Find ">
618
+ </ form >
619
+ </ li >
620
+ </ ul >
621
+ </ nav >
622
+ < hr >
589
623
< details >
590
624
< summary > Show the code:</ summary >
591
625
< div >
@@ -1596,7 +1630,7 @@ <h3>Modal with a Form!</h3>
1596
1630
function changeTheme ( newTheme ) {
1597
1631
const linkElement = document . getElementById ( 'theme-color-ss' ) ;
1598
1632
if ( linkElement ) {
1599
- linkElement . setAttribute ( 'href' , 'https://cdn.jsdelivr.net/gh/Yohn/[email protected] .8 /css/pico.' + newTheme + '.min.css' ) ;
1633
+ linkElement . setAttribute ( 'href' , 'https://cdn.jsdelivr.net/gh/Yohn/[email protected] .9 /css/pico.' + newTheme + '.min.css' ) ;
1600
1634
}
1601
1635
}
1602
1636
0 commit comments