2024-11-10 16:43:55 -05:00
<!DOCTYPE html>
< html lang = "en" >
2024-11-11 22:10:47 -05:00
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< meta name = "color-scheme" content = "light dark" / >
< title > Preview • Pico CSS< / title >
< meta name = "description" content = "A pure HTML example, without dependencies." / >
2024-12-03 13:40:34 -05:00
<!-- Backwards compatability -->
< link rel = "icon" sizes = "16x16 24x24 32x32 64x64" href = "favicon.ico" >
<!-- All other browsers -->
< link rel = "icon" type = "image/png" sizes = "32x32" href = "favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "favicon-16x16.png" >
<!-- Google Search and Android Chrome -->
< link rel = "icon" type = "image/png" sizes = "48x48" href = "favicon-48x48.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "favicon-192x192.png" >
<!-- iPhone -->
< link rel = "apple-touch-icon" type = "image/png" sizes = "180x180" href = "favicon-180x180.png" >
<!-- iPad Retina -->
< link rel = "apple-touch-icon" type = "image/png" sizes = "167x167" href = "favicon-167x167.png" >
<!-- Other iPads -->
< link rel = "apple-touch-icon" type = "image/png" sizes = "152x152" href = "favicon-152x152.png" >
<!-- Web application manifest -->
< link rel = "manifest" href = "manifest.json" >
2024-11-11 22:10:47 -05:00
<!-- Pico.css -->
2024-11-30 18:00:11 -05:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.1/css/pico.min.css" / >
<!-- <link rel="stylesheet" href="/css/pico.min.css" /> -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.1/css/pico.colors.min.css" / >
< style >
:root {
--pico-logo-wordmark: #fff;
--pico-logo-small-sparkles: #ff9500;
--pico-logo-big-sparkle: #ffbf00;
}
< / style >
2024-11-11 22:10:47 -05:00
< / head >
< body >
2024-11-12 00:35:16 -05:00
< div class = "container-fluid" >
< div class = "row-fluid" >
< div class = "col-12 col-md-3 col-lg-2" >
<!-- Header -->
< header >
< hgroup >
2024-11-30 18:00:11 -05:00
< h1 >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:svg = "http://www.w3.org/2000/svg" class = "pico-logo" viewBox = "0 0 370 164" >
< path fill = "var(--pico-logo-wordmark)" d = "m0,164l0,-101.28l21.18,0l1.29,13.31l0,87.97l-22.47,0zm42.93,-27.2c-5.95,0 -10.95,-1.49 -14.98,-4.49c-4.04,-3.08 -7.06,-7.47 -9.08,-13.16c-2.01,-5.69 -3.02,-12.44 -3.02,-20.26c0,-7.91 1.01,-14.66 3.02,-20.25c2.02,-5.69 5.04,-10.03 9.08,-13.02c4.03,-3.09 9.03,-4.63 14.98,-4.63c6.72,0 12.53,1.54 17.43,4.63c4.9,2.99 8.64,7.33 11.24,13.02c2.59,5.59 3.89,12.34 3.89,20.25c0,7.82 -1.3,14.57 -3.89,20.26c-2.6,5.69 -6.34,10.08 -11.24,13.16c-4.9,3 -10.71,4.49 -17.43,4.49zm-5.76,-20.83c2.88,0 5.42,-0.73 7.63,-2.17s3.99,-3.43 5.33,-5.94c1.35,-2.6 2.02,-5.59 2.02,-8.97c0,-3.37 -0.62,-6.31 -1.87,-8.82c-1.25,-2.61 -3.03,-4.63 -5.33,-6.08c-2.21,-1.45 -4.76,-2.17 -7.64,-2.17c-2.88,0 -5.47,0.72 -7.78,2.17c-2.21,1.45 -3.94,3.47 -5.18,6.08c-1.25,2.6 -1.88,5.54 -1.88,8.82c0,3.38 0.63,6.37 1.88,8.97c1.24,2.51 2.97,4.49 5.18,5.94c2.21,1.44 4.76,2.17 7.64,2.17zm50.63,19.09l0,-72.34l22.47,0l0,72.34l-22.47,0zm11.24,-81.6c-3.36,0 -6.34,-1.25 -8.93,-3.76c-2.5,-2.6 -3.75,-5.59 -3.75,-8.97c0,-3.57 1.25,-6.56 3.75,-8.97c2.59,-2.51 5.57,-3.76 8.93,-3.76c3.45,0 6.43,1.25 8.93,3.76c2.5,2.41 3.74,5.4 3.74,8.97c0,3.38 -1.24,6.37 -3.74,8.97c-2.5,2.51 -5.48,3.76 -8.93,3.76zm63.15,83.34c-7.69,0 -14.55,-1.59 -20.6,-4.77c-5.96,-3.28 -10.62,-7.77 -13.98,-13.46c-3.36,-5.79 -5.04,-12.35 -5.04,-19.68c0,-7.42 1.68,-13.98 5.04,-19.67c3.36,-5.69 7.97,-10.13 13.83,-13.31c5.96,-3.28 12.78,-4.92 20.46,-4.92c7.39,0 14.17,1.88 20.31,5.64c6.15,3.76 10.57,9.21 13.26,16.35l-21.33,7.23c-1.05,-2.31 -2.83,-4.19 -5.33,-5.64c-2.4,-1.54 -5.09,-2.31 -8.06,-2.31c-2.98,0 -5.62,0.72 -7.93,2.17c-2.2,1.35 -3.98,3.28 -5.33,5.78c-1.24,2.51 -1.87,5.4 -1.87,8.68s0.63,6.18 1.87,8.68c1.35,2.42 3.17,4.35 5.48,5.79c2.4,1.45 5.09,2.17 8.07,2.17c2.97,0 5.66,-0.77 8.06,-2.31s4.18,-3.57 5.33,-6.08l21.32,7.23c-2.78,7.24 -7.25,12.79 -13.39,16.64c-6.05,3.86 -12.78,5.79 -20.17,5.79zm78.63,0c-7.58,0 -14.31,-1.59 -20.16,-4.77c-5.77,-3.28 -10.33,-7.77 -13.69,-13.46c-3.27,-5.69 -4.9,-12.25 -4.9,-19.68c0,-7.42 1.63,-13.98 4.9,-19.67c3.26,-5.69 7.78,-10.13 13.54,-13.31c5.86,-3.28 12.49,-4.92 19.88,-4.92c7.59,0 14.26,1.64 20.03,4.92c5.85,3.18 10.42,7.62 13.68,13.31c3.27,5.69 4.9,12.25 4.9,19.67c0,7.43 -1.63,13.99 -4.9,19.68c-3.26,5.69 -7.78,10.18 -13.54,13.46c-5.67,3.18 -12.25,4.77 -19.74,4.77zm-0.14,-21.41c2.98,0 5.52,-0.68 7.63,-2.03c2.21,-1.44 3.94,-3.37 5.19,-5.79c1.25,-2.5 1.87,-5.4 1.87,-8.68c0,-3.28 -0.67,-6.12 -2.01,-8.53c-1.25,-2.51 -2.98,-4.44 -5.19,-5.79c-2.21,-1.45 -4.75,-2.17 -7.63,-2.17c-2.89,0 -5.43,0.72 -7.64,2.17c-2.21,1.35 -3.94,3.28 -5.19,5.79c-1.24,2.41 -1.87,5.25 -1.87,8.53c0,3.19 0.63,6.03 1.87,8.54c1.25,2.51 2.98,4.49 5.19,5.93c2.31,1.35 4.9,2.03 7.78,2.03z" > < / path >
< path d = "m337.67,104.6a2,2 0 0 0 -1.15,1.15l-7.81,20.32c-0.66,1.71 -3.08,1.71 -3.74,0l-7.81,-20.32a2,2 0 0 0 -1.15,-1.15l-20.32,-7.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l20.32,-7.81a2,2 0 0 0 1.15,-1.15l7.81,-20.32c0.66,-1.71 3.08,-1.71 3.74,0l7.81,20.32c0.2,0.53 0.62,0.95 1.15,1.15l20.32,7.81c1.71,0.66 1.71,3.08 0,3.74l-20.32,7.81z" fill = "var(--pico-logo-big-sparkle)" > < / path >
< path fill = "var(--pico-logo-small-sparkles)" d = "m358.41,59.99c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" > < / path >
< path fill = "var(--pico-logo-small-sparkles)" d = "m302.54,63.87a2,2 0 0 0 -1.15,1.15l-2.81,7.32c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81z" > < / path >
< path d = "m317.46,37.88c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" fill = "var(--pico-logo-big-sparkle)" > < / path >
< / svg >
< / h1 >
2024-11-12 00:35:16 -05:00
< p > A Pico CSS + example with addition to the standard Pico CSS library.< / p >
< p > Demo page from < a href = "https://picocss.com/docs/modal#utilities" > picocss.com model docs< / a > < / p >
< / hgroup >
< details class = "dropdown" >
< summary role = "button" class = "secondary" > Theme< / summary >
< ul >
< li > < a href = "#" data-theme-switcher = "auto" > Auto< / a > < / li >
< li > < a href = "#" data-theme-switcher = "light" > Light< / a > < / li >
< li > < a href = "#" data-theme-switcher = "dark" > Dark< / a > < / li >
< / ul >
< / details >
< aside >
< nav >
< ul >
2024-11-30 18:00:11 -05:00
< li > < a href = "#tooltip" > Tooltip< / a > < / li >
2024-11-13 03:42:58 -05:00
< li > < a href = "#validation" > Validation< / a > < / li >
2024-11-12 00:35:16 -05:00
< li > < a href = "#group" > Group< / a > < / li >
< li > < a href = "#rows" > Row< / a > < / li >
< li > < a href = "#row-offsets" > Row Offset< / a > < / li >
< li > < a href = "#row-alignments" > Row Alignments< / a > < / li >
< li > < a href = "#row-breakpoints" > Row Breakpoints< / a > < / li >
< li > < a href = "#modal" > Modals< / a > < / li >
< li > < a href = "#notifications" > Notifications< / a > < / li >
2024-11-12 04:59:34 -05:00
< li > < a href = "#accordions" > Accorddions< / a > < / li >
< li > < a href = "#timeline" > Timeline< / a > < / li >
2024-11-12 00:35:16 -05:00
< / ul >
< / nav >
< / aside >
< / header >
<!-- /Header -->
2024-11-11 22:10:47 -05:00
< / div >
2024-11-12 00:35:16 -05:00
< main class = "col-12 col-md-9 col-lg-10" >
2024-11-27 00:38:59 -05:00
< article >
< header > < h2 > Yohns PicoCSS Fork< / h2 > < / header >
< p > I've merged some open pull requests from the < a href = "https://github.com/picocss/pico" > original Pico< / a > repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted to make the building process of websites easier (< code > :user-valid< / code > "validation", using < code > < label> < / code > within groups, < code > .row< / code > & < code > .row-fluid< / code > and the < code > .col-*< / code > classes like Bootstrap, < code > .align-*< / code > and more.) The demo docs here is the main enhanced that have been added to the < a href = "https://picocss.com/" > Pico CSS 2.0.6< / a > branch, for more docs, refer to the original < a href = "https://picocss.com/docs" > Pico CSS docs< / a > .< / p >
2024-12-03 13:40:34 -05:00
< hr >
< p > < code > (OPTIONAL)< / code > Some of the demos on this page do require < a href = "https://github.com/Yohn/PicoCSS/tree/main/docs/js" > Vanilla JavaScript Files< / a > to work the same as the preview here. I may get a build script going to compile the javascript plugins / components later. Let me know if this feature would help you.< / p >
2024-11-27 00:38:59 -05:00
< footer > If this fork has helped you, please < a href = "https://github.com/Yohn/PicoCSS" > Like< / a > this fork!< / footer >
< / article >
2024-11-30 18:00:11 -05:00
<!-- Tooltip -->
< article id = "tooltip" >
< header > < h2 > Tooltip< / h2 > < / header >
< p > For multi-line tooltips, you can now add < code > & #xa;< / code > where the line break should go within your tooltip area.< / core > < / p >
< label for = "test-tooltip" data-tooltip = "this is 
 a test" >
< input type = "text" id = "test-tooltip" placeholder = "Testing" >
< / label >
< p > I also wanted to remove the dotted line on input fileds when they are contained within the tooltip element, so that is why this example has the input field with the tooltip on the < code > < label> < / code > wrapper.< / p >
< code > data-tooltip="this is & #xa; a test"< / code >
< / article >
<!-- /Tooltip -->
2024-11-13 03:42:58 -05:00
<!-- Validation -->
< form action = "javascript:void(0);" >
2024-11-30 18:00:11 -05:00
< article id = "validation" >
2024-11-13 03:42:58 -05:00
< header > < h2 > Validation< / h2 > < / header >
< p >
Form :user-valid and :user-invalid
< / p >
< input placeholder = "name" type = "text" name = "test" minlength = "4" maxlength = "30" pattern = "[a-z]{4,30}" required >
< small data-valid = "this is good!" data-invalid = "Min of 4 characters, max of 39, only a-z no caps." > < / small >
< input placeholder = "Url" type = "url" name = "test" required >
< small data-valid = "this is good!" data-invalid = "Must be a url." > < / small >
< input placeholder = "Email" type = "email" name = "test" required >
< small data-valid = "this is good!" data-invalid = "Must be a valid email." > < / small >
< select name = "favorite-cuisine" required >
< option selected disabled value = "" > Select your favorite cuisine...< / option >
< option > Italian< / option >
< option > Japanese< / option >
< option > Indian< / option >
< option > Thai< / option >
< option > French< / option >
< / select >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "date" name = "date" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "datetime-local" name = "datetime-local" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "month" name = "month" min = "2018-03" max = "2024-12" placeholder = "2024-12" step = "1" pattern = "[0-9]{4}-[0-9]{2}" required >
< small data-valid = "this is good!" data-invalid = "Format: YYYY-MM" > < / small >
< input type = "time" name = "time" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< header > Check JS for FileValidator class< / header >
< input type = "file" data-max-size = "1048576" accept = ".jpg,.svg,.png,.gif,.webp" id = "checkFile" multiple / >
< small data-invalid = "Only .jpg,.svg,.png,.gif,.webp image types allowed" data-valid = "Good!" > < / small >
< textarea minlength = "5" placeholder = "its always valid?" required > < / textarea >
< small data-valid = "this is good!" data-invalid = "Min of 5 characters!" > < / small >
< br >
< label > < input type = "checkbox" name = "english" required / > English < / label >
< footer >
< input type = "submit" value = "submit" class = "btn btn-primary" >
< / footer >
< / article >
< / form >
<!-- /Validation -->
2024-11-12 00:35:16 -05:00
<!-- Group -->
< article id = "group" >
< header > < h2 > Group< / h2 > < / header >
2024-11-12 04:59:34 -05:00
< form action = "javascript:void(0);" >
< fieldset role = "group" >
< label for = "email" > Email:< / label >
< input name = "email" type = "email" placeholder = "Enter your email" autocomplete = "email" / >
< input type = "submit" value = "Subscribe" / >
< / fieldset >
< / form >
< form action = "javascript:void(0);" >
< fieldset role = "group" >
< label for = "ex-browser" > Browser:< / label >
< select id = "ex-browser" name = "ex-browser" >
< option value = "Firefox" > Firefox< / option >
< option value = "Chrome" > Chrome< / option >
< option value = "Opera" > Opera< / option >
< option value = "Safari" > Safari< / option >
< / select >
< input type = "submit" value = "Save" / >
< / fieldset >
< / form >
2024-11-12 00:35:16 -05:00
< / article >
<!-- ./ Group -->
< hr >
<!-- rows -->
< article id = "rows" >
< header > < h2 > Rows< / h2 > < / header >
< p >
Similar to < a href = "https://getbootstrap.com/docs/5.3/layout/columns/" target = "_blank" > Bootstrap 5.3.3< / a > , with the responsive < code > .col-*COL#*< / code > , < code > .col-*BREAKPOINT*-*COL#*< / code > , < code > .offset-*COL#*< / code > , < code > .offset-*BREAKPOINT*-*COL#*< / code > .
< / p >
< p >
< code > .row< / code > has a max width set to the viewport of your < code > xl< / code > viewport (1300px by default)< / p >
< code > .row-fluid< / code > max width is 100%.
< / p >
< div class = "row-fluid" >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-6" > < article class = "pico-background-lime-750" > col-6< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-3 offset-1" > < article class = "pico-background-lime-750" > col-3 offset-1< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-8" > < article class = "pico-background-lime-750" > col-8< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-5" > < article class = "pico-background-lime-750" > col-5< / article > < / div >
< div class = "col-7" > < article class = "pico-background-lime-750" > col-7< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-9" > < article class = "pico-background-lime-750" > col-9< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< / article >
<!-- /rows -->
< hr >
<!-- offset -->
< article id = "row-offsets" >
< header > < h2 > Columns with offsets defined by breakpoints< / h2 > < / header >
< p > When defining multiple < code > .col-*-*< / code > on the same element, the order your put the classes on the element matter.< / p >
2024-11-11 22:10:47 -05:00
2024-11-12 00:35:16 -05:00
< div class = "row-fluid" >
< div class = "col-2 col-md-4" > < article class = "pico-background-lime-750" > col-2, col-md-4< / article > < / div >
< div class = "col-4 offset-8 col-md-6 offset-md-6" > < article class = "pico-background-lime-750" > col-4, offset-8, col-md-6, offset-md-6< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-5 offset-1 col-md-11" > < article class = "pico-background-lime-550" > col-5, offset-1, col-md-11< / article > < / div >
< div class = "col-2 col-md-6" > < article class = "pico-background-lime-550" > col-2, col-md-6< / article > < / div >
< div class = "col-3 offset-9 col-md-6 offset-md-6" > < article class = "pico-background-lime-550" > col-3, offset-9, col-md-6, offset-md-6< / article > < / div >
< / div >
< div class = "row-fluid align-center" >
< div class = "col-3 col-md-12 col-lg-6" > < article class = "pico-background-lime-850" > col-3 col-md-12 col-lg-6< / article > < / div >
< div class = "col-3 col-md-12 col-lg-6" > < article class = "pico-background-lime-850" > col-3 col-md-12 col-lg-6< / article > < / div >
< div class = "col-4 col-md-6 col-lg-3" > < article class = "pico-background-lime-850" > col-4 col-md-6 col-lg-3< / article > < / div >
< div class = "col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10" > < article class = "pico-background-lime-850" > col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10< / article > < / div >
< / div >
< / article >
<!-- /row - offsets -->
< hr >
<!-- row - alignments -->
< article id = "row-alignments" >
< header > < h2 > Alignment< / h2 > < / header >
< p >
You can add < code > .align-start< / code > (default), < code > .align-center< / code > or < code > .align-end< / code > to your < code > .row< / code > or < code > .row-fluid< / code > element to align the containing elements to the top, middle, or bottom.< / p >
< div class = "row-fluid align-center" id = "row-align-example" >
< div class = "col-4" > < article class = "pico-background-lime-850" > col-4< / article > < / div >
< div class = "col-4" >
< article class = "pico-background-lime-850" >
< input type = "button" class = "change-row-align" data-align = "start" value = ".align-start" >
< input type = "button" class = "change-row-align" data-align = "center" value = ".align-center" >
< input type = "button" class = "change-row-align" data-align = "end" value = ".align-end" >
< / article >
< / div >
< div class = "col-4" > < article class = "pico-background-lime-850" > col-4< / article > < / div >
< / div >
< / article >
<!-- /row - alignments -->
< hr >
<!-- row - breakpoints -->
< article id = "row-breakpoints" >
< header > < h2 > < code > -md- < / code > Breakpoints< / h2 > < / header >
< div class = "row-fluid" >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< / div >
< / article >
<!-- ./ row - breakpoints -->
< hr >
<!-- Modal -->
< article id = "modal" >
< header > < h2 > Modal< / h2 > < / header >
< button class = "contrast" data-target = "modal-example" onclick = "toggleModal(event)" >
Launch demo modal
< / button >
< / article >
<!-- ./ Modal -->
< hr >
<!-- notifications -->
< article id = "notifications" >
< header > < h2 > Notificaton< / h2 > < / header >
< button onclick = "showNotification('Accessible short notice.')" >
Short Notificaton
< / button >
< button onclick = "showNotification({ html: `
< section >
< h2 > Many news!< / h2 >
< p > This is fantastic!< / p >
< button onclick = 'closeNotification()' > OK< / button >
< / section >
`, delay: 60 * 1000 })">
Big Notificaton
< / button >
<!-- accessible dialog based notification element -->
< dialog role = "alert" data-backdrop = "false" > < / dialog >
< / article >
<!-- /notifications -->
< hr >
<!-- Accordions -->
< article id = "accordions" >
< header > < h2 > Accordions< / h2 > < / header >
< details name = "example-accordion" >
< summary > Accordion 1< / summary >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam,
tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae
tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar
mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
amet, congue turpis.
< / p >
< / details >
< details name = "example-accordion" open >
< summary > Accordion 2< / summary >
< ul >
< li > Vestibulum id elit quis massa interdum sodales.< / li >
< li > Nunc quis eros vel odio pretium tincidunt nec quis neque.< / li >
< li > Quisque sed eros non eros ornare elementum.< / li >
< li > Cras sed libero aliquet, porta dolor quis, dapibus ipsum.< / li >
< / ul >
< / details >
< / article >
<!-- ./ Accordions -->
2024-11-12 04:59:34 -05:00
< hr >
< article id = "timeline" style = "background-color: transparent;" >
< header >
< h2 > Timeline< / h2 >
< br >
< details >
< summary > View Custom CSS< / summary >
< div style = "background-color: var(--pico-muted-border-color); padding: .5rem;" >
--pico-timeline-line-color: var(--pico-primary-background);< br >
--pico-timeline-dot-background-color: var(--pico-primary-inverse);< br >
--pico-timeline-dot-border-color: var(--pico-primary-background);< br >
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
< / div >
< / details >
< / header >
< div class = "timeline" >
< section class = "point left" >
< article >
< header > < h3 > 2017< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point right" >
< article >
< header > < h3 > 2016< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point left" >
< article >
< header > < h3 > 2015< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point right" >
< article >
< header > < h3 > 2012< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< / div >
< / article >
2024-11-12 00:35:16 -05:00
< / main >
< / div >
< / div >
2024-11-11 22:10:47 -05:00
<!-- Footer -->
< footer class = "container" >
< small >
Built with < a href = "https://picocss.com" > Pico< / a > •
2024-11-12 04:59:34 -05:00
< a href = "https://github.com/Yohn/PicoCSS" >
2024-11-11 22:10:47 -05:00
Source code
< / a >
< / small >
< / footer >
<!-- ./ Footer -->
<!-- Modal example -->
< dialog id = "modal-example" >
< article >
< header >
2024-11-12 00:35:16 -05:00
< button aria-label = "Close" rel = "prev" data-target = "modal-example" onclick = "toggleModal(event)" > < / button >
2024-11-11 22:10:47 -05:00
< h3 > Confirm your action!< / h3 >
< / header >
< p >
Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
pellentesque. Nullam finibus risus non semper euismod.
< / p >
< footer >
< button role = "button" class = "secondary" data-target = "modal-example" onclick = "toggleModal(event)" > Cancel< / button >
< button autofocus data-target = "modal-example" onclick = "toggleModal(event)" >
Confirm
< / button >
< / footer >
< / article >
< / dialog >
<!-- ./ Modal example -->
<!-- Minimal theme switcher -->
2024-11-27 00:38:59 -05:00
< script src = "js/MinimalThemeSwitcher.js" > < / script >
2024-11-11 22:10:47 -05:00
<!-- Modal -->
2024-11-27 00:38:59 -05:00
< script src = "js/Modal.js" > < / script >
2024-11-12 00:35:16 -05:00
<!-- alert notifications -->
2024-11-27 00:38:59 -05:00
< script src = "js/Notifications.js" > < / script >
2024-11-13 03:42:58 -05:00
< script src = "js/FileValidator.js" > < / script >
2024-11-27 00:38:59 -05:00
< script src = "js/Accordion.js" > < / script >
2024-11-11 22:10:47 -05:00
< script >
document.addEventListener("DOMContentLoaded", () => {
2024-11-27 00:38:59 -05:00
const checkFile = document.getElementById("checkFile");
new FileValidator(checkFile);
2024-11-13 03:42:58 -05:00
2024-11-11 22:10:47 -05:00
const alignButtons = document.querySelectorAll(".change-row-align");
2024-11-12 00:35:16 -05:00
const alignRow = document.getElementById("row-align-example");
2024-11-11 22:10:47 -05:00
alignButtons.forEach((button) => {
button.addEventListener("click", () => {
let dir = button.getAttribute('data-align');
2024-11-12 00:35:16 -05:00
console.log(dir)
2024-11-11 22:10:47 -05:00
if(dir == 'start'){
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-center', 'align-end');
alignRow.classList.add('align-start');
2024-11-11 22:10:47 -05:00
} else if(dir == 'center'){
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-start', 'align-end');
alignRow.classList.add('align-center');
2024-11-11 22:10:47 -05:00
} else {
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-start', 'align-center');
alignRow.classList.add('align-end');
2024-11-11 22:10:47 -05:00
}
});
});
});
< / script >
< / body >
2024-11-27 00:38:59 -05:00
< / html >
