Custom Pico built upon W3.CSS responsive website templates. Pico is a stupidly simple, blazing fast, flat file CMS. https://webshoppe.ca/pico/ Fri, 26 Apr 2024 14:23:56 +0000 Fri, 26 Apr 2024 14:23:56 +0000 Pico <h2>a</h2> Fri, 26 Apr 2024 14:23:56 +0000 https://webshoppe.ca/pico/a/a https://webshoppe.ca/pico/a/a <h2>a &gt; a</h2> Fri, 26 Apr 2024 14:23:56 +0000 https://webshoppe.ca/pico/a/a/a https://webshoppe.ca/pico/a/a/a <ul> <li>Item2</li> <li>Item22</li> <li>Item222</li> <li>Item2222</li> </ul> Fri, 26 Apr 2024 14:23:56 +0000 https://webshoppe.ca/pico/a/a/sidebars/0_bar https://webshoppe.ca/pico/a/a/sidebars/0_bar <h2>a.b</h2> Fri, 26 Apr 2024 14:23:56 +0000 https://webshoppe.ca/pico/a/b https://webshoppe.ca/pico/a/b <!-- Begin index.md template--> <main> <div class="w3-display-container"> <div class="w3-container w3-center"> <aside class="w3-container"> <h2>Full Page</h2> <div class="w3-left w3-white w3-display-container w3-border-bottom"> <p>This is <code>full-page.md</code> in the <code>default</code> folder.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </div><!-- .w3-display-container w3-border-top --> </aside></div><!-- .w3-center w3-white w3-display-container w3-border-bottom --> </div><!-- .w3-container w3-center --> <!-- .w3-display-container --> <hr> <div class="w3-row-padding w3-center w3-margin-top"> <div class="w3-third"> <div class="w3-card w3-container" style="min-height:460px"> <h3>Responsive</h3> <br><i class="fas fa-desktop w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Built-in responsiveness</p> <p>Mobile first fluid grid</p> <p>Fits any screen sizes</p> <p>PC Tablet and Mobile</p> </div><!-- .w3-card w3-container --> </div><!-- .w3-third --> <div class="w3-third"> <div class="w3-card w3-container" style="min-height:460px"> <h3>Standard CSS</h3> <br><i class="fab fa-css3 w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Standard CSS only</p> <p>Easy to learn</p> <p>No need for jQuery</p> <p>No JavaScript library</p> </div><!-- .w3-card w3-container --> </div><!-- .w3-third --> <div class="w3-third"> <div class="w3-card w3-container" style="min-height:460px"> <h3>Design</h3> <br><i class="far fa-gem w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Paper like design</p> <p>Bold colors and shadows</p> <p>Equal across platforms</p> <p>Equal across devices</p> </div><!-- .w3-card w3-container --> </div><!-- .w3-third --> </div><!-- .w3-row-padding w3-center w3-margin-top --> <hr> <!-- Begin Color Classes --> <div class="w3-container"> <div class="w3-center"> <h2>Color Classes</h2> </div><!-- .w3-center --> <div class="w3-row"> <div class="w3-col w3-container m2 w3-red"><p>Red</p></div> <div class="w3-col w3-container m2 w3-blue"><p>Blue</p></div> <div class="w3-col w3-container m2 w3-blue-grey"><p>Blue Grey</p></div> <div class="w3-col w3-container m2 w3-teal"><p>Teal</p></div> <div class="w3-col w3-container m2 w3-yellow"><p>Yellow</p></div> <div class="w3-col w3-container m2 w3-orange"><p>Orange</p></div> </div><!-- .w3-row --> </div><!-- .w3-container --> <!-- END Color Classes --> <hr> <!-- Begin Built-In Responsiveness --> <div class="w3-container"> <div class="w3-center"> <h2>Built-In Responsiveness</h2> <p class="w3-large">Resize the page to see the effect!</p> </div><!-- .w3-center --> <br> <div class="w3-row w3-border"> <div class="w3-half w3-container w3-deep-purple w3-border"> <h3>w3-half - 1/2</h3> <p>The w3-half class uses half (50%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-half w3-container w3-blue w3-border --> <div class="w3-half w3-container w3-pink"> <h3>w3-half - 2/2</h3> <p>The w3-half class uses half (50%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-half w3-container --> </div><!-- .w3-row w3-border --> <br> <div class="w3-row w3-border"> <div class="w3-third w3-container w3-green"> <h3>w3-third - 1/3</h3> <p>The w3-third class uses one third (33.33%) of the screen widow.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-third w3-container w3-green --> <div class="w3-third w3-container w3-khaki"> <h3>w3-third - 2/3</h3> <p>The w3-third class uses one third (33.33%) of the screen widow.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-third w3-container --> <div class="w3-third w3-container w3-deep-orange"> <h3>w3-third - 3/3</h3> <p>The w3-third class uses one third (33.33%) of the screen widow.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-third w3-container --> </div><!-- .w3-row w3-border --> <br> <div class="w3-row w3-border"> <div class="w3-quarter w3-container w3-amber"> <h3>w3-quarter - 1/4</h3> <p>The w3-quarter class uses one quarter (25%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-quarter w3-container w3-red --> <div class="w3-quarter w3-container w3-light-blue"> <h3>w3-quarter - 2/4</h3> <p>The w3-quarter class uses one quarter (25%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-quarter w3-container --> <div class="w3-quarter w3-container w3-cyan"> <h3>w3-quarter - 3/4</h3> <p>The w3-quarter class uses one quarter (25%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-quarter w3-container --> <div class="w3-quarter w3-container w3-lime"> <h3>w3-quarter - 4/4</h3> <p>The w3-quarter class uses one quarter (25%) of the screen window.</p> <p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p> </div><!-- .w3-quarter w3-container --> </div><!-- .w3-row w3-border --> </div><!-- .w3-container --> <!-- END Built-In Responsiveness --> <hr> <!-- Begin Containers --> <div class="w3-container w3-center"> <div class="w3-center"> <h2>Containers</h2> <p>Use containers to create headers, sections and footers.</p> </div><!-- .w3-center --> <header class="w3-container w3-blue-grey"> <h2>Header Element</h2> </header> <div class="w3-padding w3-white w3-display-container"> <span onclick="this.parentElement.style.display='none'" class="w3-text-dark w3-button w3-hover-theme w3-display-topright" title="Close this element."><i class="fas fa-minus-circle"></i></span> <h3>About London</h3> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>By the way, you can add a close icon to all containers if you want the ability to hide them. Look to your right!</p> </div><!-- .w3-padding w3-white w3-display-container --> <footer class="w3-container w3-blue-grey"> <h2>Footer Element</h2> <p class="w3-opacity">Footer information goes here</p> </footer> </div><!-- .w3-container --> <!-- END Containers --> <hr> <!-- Begin Color Themes --> <div class="w3-container"> <div class="w3-center"> <h2>Color Themes</h2> <p>The color themes have been designed to work harmoniously with each other.</p> </div><!-- .w3-center --> <hr> <div class="w3-row-padding"> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3-indigo"> <h3>Theme Indigo</h3> </div><!-- .w3-container w3-indigo --> <div class="w3-container"> <h4><span class="w3-text-indigo">Movies 2014 - Indigo</span></h4> </div><!-- .w3-container --> <ul class="w3-ul w3-border-top"> <li> <h5>Frozen - Indigo</h5> <p>The response to the animations was ridiculous</p> </li> <li> <h5>The Fault in Our Stars - Indigo</h5> <p>Touching, gripping and genuinely well made</p> </li> <li> <h5>The Avengers - Indigo</h5> <p>A huge success for Marvel and Disney</p> </li> </ul> <div class="w3-container w3-indigo w3-large"><span class="w3-right">Next</span></div> </div><!-- .w3-card white --> </div><!-- .w3-half --> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3-theme"> <h3>Theme</h3> </div><!-- .w3-container w3-theme --> <div class="w3-container"> <h4><span class="w3-text-theme">Movies 2014</span></h4> </div><!-- .w3-container --> <ul class="w3-ul w3-border-top"> <li> <h5>Frozen</h5> <p>The response to the animations was ridiculous</p> </li> <li> <h5>The Fault in Our Stars</h5> <p>Touching, gripping and genuinely well made</p> </li> <li> <h5>The Avengers</h5> <p>A huge success for Marvel and Disney</p> </li> </ul> <div class="w3-container w3-theme w3-large"><span class="w3-right">Next</span></div> </div><!-- .w3-card white --> </div><!-- .w3-half --> </div><!-- .w3-row-padding --> <hr> <div class="w3-row-padding"> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3-red"> <h3>Theme Red</h3> </div><!-- .w3-container w3-red --> <div class="w3-container"> <h4><span class="w3-text-red">Movies 2014 - Red</span></h4> </div><!-- .w3-container --> <ul class="w3-ul w3-border-top"> <li> <h5>Frozen - Red</h5> <p>The response to the animations was ridiculous</p> </li> <li> <h5>The Fault in Our Stars - Red</h5> <p>Touching, gripping and genuinely well made</p> </li> <li> <h5>The Avengers - Red</h5> <p>A huge success for Marvel and Disney</p> </li> </ul> <div class="w3-container w3-red w3-large"><span class="w3-right">Next</span></div> </div><!-- .w3-card white --> </div><!-- .w3-half --> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3-teal"> <h3>Theme</h3> </div><!-- .w3-container w3-teal --> <div class="w3-container"> <h4><span class="w3-text-teal">Movies 2014 - Teal</span></h4> </div><!-- .w3-container --> <ul class="w3-ul w3-border-top"> <li> <h5>Frozen - Teal</h5> <p>The response to the animations was ridiculous</p> </li> <li> <h5>The Fault in Our Stars - Teal</h5> <p>Touching, gripping and genuinely well made</p> </li> <li> <h5>The Avengers - Teal</h5> <p>A huge success for Marvel and Disney</p> </li> </ul> <div class="w3-container w3-teal w3-large"><span class="w3-right">Next</span></div> </div><!-- .w3-card white --> </div><!-- .w3-half --> </div><!-- .w3-row-padding --> </div><!-- .w3-container --> <!-- END Color Themes --> <hr> <!-- Begin Paper-like Cards with Shadows --> <div class="w3-container"> <div class="w3-container w3-center"> <h2>Paper-like Cards with Shadows</h2> </div><!-- .w3-container w3-center --> <div class="w3-row-padding"> <div class="w3-third"> <div class="w3-card"> <img src="https://webshoppe.ca/pico/assets/w3images/car.jpg" alt="Image of a Car." style="width:100%"> <div class="w3-container"> <p>w3-card</p> </div><!-- .w3-container --> </div><!-- .w3-card --> </div><!-- .w3-third --> <div class="w3-third"> <div class="w3-card-4"> <img src="https://webshoppe.ca/pico/assets/w3images/car.jpg" alt="Image of a Car." style="width:100%"> <div class="w3-container"> <p>w3-card-4</p> </div><!-- .w3-container --> </div><!-- .w3-card-4 --> </div><!-- .w3-third --> <div class="w3-third"> <div class="w3-card-4"> <img src="https://webshoppe.ca/pico/assets/w3images/car.jpg" alt="Image of a Car." style="width:100%"> <div class="w3-container"> <p>w3-card-4</p> </div><!-- .w3-container --> </div><!-- .w3-card-4 --> </div><!-- .w3-third --> </div><!-- .w3-row-padding --> </div><!-- .w3-container --> <!-- END Paper-like Cards with Shadows --> <hr> <!-- Begin Tables --> <div class="w3-container"> <div class="w3-center"> <h2>Tables</h2> <p class="w3-large">Don't worry. W3.CSS takes care of your tables.</p> </div><!-- .w3-center --> <div class="w3-responsive w3-card-4"> <table class="w3-table w3-striped w3-bordered" title="Sample table."> <thead title="Table of individuals and sorted by points."> <tr class="w3-theme" title="First Name "> <th title="First Name, Last Name, Points:">First Name</th> <th title="Last Name:">Last Name</th> <th title="Points:">Points</th> </tr> </thead> <tbody> <tr title="Jill Smith : 50"> <td title="First Name: Jill">Jill</td> <td title="Last Name: Smith">Smith</td> <td title="Points: 50">50</td> </tr> <tr class="w3-white" title="Adam Johnson : 67"> <td title="First Name: Adam">Adam</td> <td title="Last Name: Johnson">Johnson</td> <td title="Points: 67">67</td> </tr> <tr title="Eve Jackson: 94"> <td title="First Name: Eve">Eve</td> <td title="Last Name: Jackson">Jackson</td> <td title="Points : 94">94</td> </tr> </tbody> </table> </div><!-- .w3-responsive w3-card-4 --> </div><!-- .w3-container --> <!-- END Tables --> <hr> <!-- Begin Forms and Lists --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Forms and Lists</h2> </div><!-- .w3-center --> <div class="w3-row-padding"> <div class="w3-half"> <form class="w3-container w3-card-4"> <h3>Input Form</h3> <div class="w3-section"> <input title="Enter Name" class="w3-input" type="text" required> <label title="Name">Name</label> </div><!-- .w3-section --> <div class="w3-section"> <input title="Enter Email Address" class="w3-input" type="text" required> <label title="Email Address">Email</label> </div><!-- .w3-section --> <div class="w3-section"> <input title="Enter Subject Text" class="w3-input" type="text" required> <label title="Subject">Subject</label> </div><!-- .w3-section --> <div class="w3-row"> <div class="w3-half"> <input id="milk" title="Select Milk" class="w3-check" type="checkbox" checked> <label title="Milk (Selected)">Milk</label> <br> <input id="sugar" title="Select Sugar" class="w3-check" type="checkbox"> <label title="Sugar">Sugar</label> <br> <input id="lemon" title="(Disabled) Lemon" class="w3-check" type="checkbox" disabled> <label title="Lemon (Disabled)">Lemon (Disabled)</label> <br><br> </div><!-- .w3-half --> <div class="w3-half"> <input id="male" title="Select Male" class="w3-radio" type="radio" name="gender" value="male" checked> <label title="Male (Selected)">Male</label> <br> <input id="female" title="Select Female" class="w3-radio" type="radio" name="gender" value="female"> <label title="Female">Female</label> <br> <input id="unknown" title="(Disabled) Don’t know" class="w3-radio" type="radio" name="gender" value="" disabled> <label title="Don’t know (Disabled)">Don’t know (Disabled)</label> </div><!-- .w3-half --> </div><!-- .w3-row --> </form> </div><!-- .w3-half --> <div class="w3-half"> <div class="w3-card-4 w3-container"> <h3>Lists</h3> <ul class="w3-ul w3-margin-bottom"> <li>Jill</li> <li>Eve</li> <li>Adam</li> </ul> <br> <ul class="w3-ul w3-border w3-hoverable"> <li class="w3-theme" title="Jill">Jill</li> <li title="Eve">Eve</li> <li title="Adam">Adam</li> <li title="Steve">Steve</li> </ul> <br> </div><!-- .w3-card-4 w3-container --> </div><!-- .w3-half --> </div><!-- .w3-row-padding --> </div><!-- .w3-container --> <!-- END Forms and Lists --> <hr> <!-- Begin Progress Bars --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Progress Bars</h2> </div><!-- .w3-center --> <div class="w3-container"> <div class="w3-light-gray"> <div id="myBar" class="w3-center w3-padding w3-theme" style="width:5%">5%</div> </div><!-- .w3-light-gray --> <br> <button class="w3-btn w3-theme" onclick="move()" title="Click Me">Click Me</button> </div><!-- .w3-container --> </div><!-- .w3-container --> <!-- END Progress Bars --> <hr> <!-- Begin Slideshows --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Slideshows</h2> </div><!-- .w3-center --> <div class="w3-content" style="max-width:800px;position:relative"> <img class="mySlides w3-animate-opacity" src="https://webshoppe.ca/pico/assets/w3images/snow.jpg" alt="Image of Snow." style="width:100%"> <img class="mySlides w3-animate-opacity" src="https://webshoppe.ca/pico/assets/w3images/lights.jpg" alt="Image of Lights." style="width:100%"> <img class="mySlides w3-animate-opacity" src="https://webshoppe.ca/pico/assets/w3images/mountains.jpg" alt="Image of Mountains." style="width:100%"> <img class="mySlides w3-animate-opacity" src="https://webshoppe.ca/pico/assets/w3images/forest.jpg" alt="Image of a Forest." style="width:100%"> <a class="w3-button w3-hover-dark-grey" style="position:absolute;top:45%;left:0;" onclick="plusDivs(-1)" title="Go to: Previous Slide">❮</a> <a class="w3-button w3-hover-dark-grey" style="position:absolute;top:45%;right:0;" onclick="plusDivs(+1)" title="Go to: Next Slide">❯</a> </div><!-- .w3-content --> </div><!-- .w3-container --> <!-- END Progress Bars --> <hr> <!-- Begin Navigation --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Navigation</h2> </div><!-- .w3-center --> <div class="w3-container"> <div class="w3-bar w3-theme"> <a href="#" class="w3-bar-item w3-button w3-padding-16" title="Go to: Home">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-16" title="Go to: Link 1">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button w3-padding-16" title="Dropdown Menu"> Dropdown <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-card-4 w3-bar-block"> <a href="javascript:void(0)" class="w3-bar-item w3-button" title="Open javascript: Link 1">Link 1</a> <a href="javascript:void(0)" class="w3-bar-item w3-button" title="Open javascript: Link 2">Link 2</a> <a href="javascript:void(0)" class="w3-bar-item w3-button" title="Open javascript: Link 3">Link 3</a> </div><!-- .w3-dropdown-content w3-card-4 w3-bar-block --> </div><!-- .w3-dropdown-hover --> </div><!-- .w3-bar w3-theme --> </div><!-- .w3-container --> </div><!-- .w3-container --> <!-- END Navigation --> <hr> <!-- Begin Accordions --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Accordions</h2> </div><!-- .w3-center --> <button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-theme w3-button w3-block w3-left-align" title="Open Section 3">Open Section 1</button> <div id="Demo1" class="w3-hide"> <div class="w3-container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div><!-- .w3-container --> </div><!-- .w3-hide --> <button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-theme w3-button w3-block w3-left-align" title="Open Section 3">Open Section 2</button> <div id="Demo2" class="w3-hide"> <a href="#" class="w3-button w3-block w3-left-align" title="Go to: Link 1">Link 1</a> <a href="#" class="w3-button w3-block w3-left-align" title="Go to: Link 2">Link 2</a> <a href="#" class="w3-button w3-block w3-left-align" title="Go to: Link 3">Link 3</a> </div><!-- .w3-hide --> <button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-theme w3-button w3-block w3-left-align" title="Open Section 3">Open Section 3</button> <div id="Demo3" class="w3-hide w3-black"> <div class="w3-container"> <p>Accordion with Images:</p> <img src="https://webshoppe.ca/pico/assets/w3images/img_snowtops.jpg" alt="Image of Snowtops." style="width:30%;" class="w3-animate-zoom"> <p>French Alps</p> </div><!-- .w3-container --> </div><!-- .w3-hide w3-black --> </div><!-- .w3-container --> <!-- END Accordions --> <hr> <!-- Begin Tabs --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Tabs</h2> </div><!-- .w3-center --> <div class="w3-border"> <div class="w3-bar w3-theme"> <button class="w3-bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'London')" title="Expand London Section">London</button> <button class="w3-bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'Paris')" title="Expand Paris Section">Paris</button> <button class="w3-bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'Tokyo')" title="Expand Tokyo Section">Tokyo</button> </div><!-- .w3-bar w3-theme --> <div id="London" class="w3-container city w3-animate-opacity"> <h3>London</h3> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div><!-- .w3-container city w3-animate-opacity --> <div id="Paris" class="w3-container city w3-animate-opacity"> <h3>Paris</h3> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div><!-- .w3-container city w3-animate-opacity --> <div id="Tokyo" class="w3-container city w3-animate-opacity"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div><!-- .w3-container city w3-animate-opacity --> </div><!-- .w3-border --> </div><!-- .w3-container --> <!-- END Tabs --> <hr> <!-- Begin Buttons --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Buttons</h2> </div><!-- .w3-center --> <div class="w3-center"> <br> <a class="w3-button w3-theme" title="Just a Button">Button</a> <a class="w3-button w3-theme" title="Just another Button">Button</a> <a class="w3-button w3-theme-d3 w3-disabled" title="Just a Disabled Button">Button</a> <br><br> <a class="w3-button w3-circle w3-large w3-black" title="Font Awesome Icon Button: fa-plus"><i class="fa fa-plus"></i></a> <a class="w3-button w3-circle w3-large w3-theme" title="Font Awesome Icon Button: fa-plus"><i class="fa fa-plus"></i></a> <a class="w3-button w3-circle w3-large w3-card-4" title="Font Awesome Icon Button: fa-plus"><i class="fa fa-plus"></i></a> </div><!-- .w3-center --> <br> <div class="w3-center"> <div class="w3-dropdown-hover"> <button class="w3-button w3-theme" title="Dropdown Menu">Dropdown <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button" title="Go to: Link 1">Link 1</a> <a href="#" class="w3-bar-item w3-button" title="Go to: Link 2">Link 2</a> <a href="#" class="w3-bar-item w3-button" title="Go to: Link 3">Link 3</a> </div><!-- .w3-dropdown-content w3-bar-block w3-border --> </div><!-- .w3-dropdown-hover --> </div><!-- .w3-center --> </div><!-- .w3-container --> <!-- END Buttons --> <hr> <!-- Begin Pagination --> <div class="w3-container"> <div class="w3-center"> <h2 class="w3-center">Pagination</h2> </div><!-- .w3-center --> <br> <div class="w3-center"> <div class="w3-center w3-padding-32"> <div class="w3-bar"> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Previous Page">«</a> <a href="#" class="w3-bar-item w3-button w3-theme w3-hover-theme" title="Currently Viewing Page 1">1</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Page 2">2</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Page 3">3</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Page 4">4</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Page 5">5</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme" title="Go to: Next Page">»</a> </div><!-- .w3-bar --> </div><!-- .w3-center w3-padding-32 --> </div><!-- .w3-center --> <br> </div><!-- .w3-container --> <!-- END Pagination --> <hr> <hr> <br> <hr> <!-- .w3-display-container --> <br> <!-- Pico Table Of Contents Plugin --> <hr> <div class="w3-container"> <div class="w3-center"> <h2>Pico Table Of Contents Plugin</h2> </div><!-- .w3-center --> <div class="w3-container"> <toc max-level="5"></toc> </div><!-- .w3-container --> <br> <!-- END Pico Table Of Contents Plugin --> </div></main> <div class="w3-center">END <code>index.md</code></div> <!-- END index.md template--> Thu, 22 Aug 2019 00:00:00 +0000 https://webshoppe.ca/pico/full-page https://webshoppe.ca/pico/full-page <h2>This is a Sub Page Index</h2> <p>This is <code>index.md</code> in the <code>pico</code> folder that contains the original <code>content</code> from the default Pico <code>index.md</code>. The <a href="https://webshoppe.ca/pico/pico/page" title="">Sub Page</a> is <code>page.md</code> and is located in the <code>pico</code> folder.</p> <hr /> <h2>Welcome to Pico</h2> <p>Congratulations, you have successfully installed <a href="http://picocms.org/">Pico</a> 2.0.4. Default Pico Index. <!-- replaced by the above Description header --></p> <h2>Creating Content</h2> <p>Pico is a flat file CMS. This means there is no administration backend or database to deal with. You simply create <code>.md</code> files in the <code>content</code> folder and those files become your pages. For example, this file is called <code>index.md</code> and is shown as the main landing page.</p> <p>When you install Pico, it comes with some sample contents that will display until you add your own content. Simply add some <code>.md</code> files to your <code>content</code> folder in Pico's root directory. No configuration is required, Pico will automatically use the <code>content</code> folder as soon as you create your own <code>index.md</code>. Just check out <a href="https://github.com/picocms/Pico/tree/master/content-sample">Pico's sample contents</a> for an example!</p> <p>If you create a folder within the content directory (e.g. <code>content/sub</code>) and put an <code>index.md</code> inside it, you can access that folder at the URL <code>https://webshoppe.ca/pico/sub</code>. If you want another page within the sub folder, simply create a text file with the corresponding name and you will be able to access it (e.g. <code>content/sub/page.md</code> is accessible from the URL <code>https://webshoppe.ca/pico/sub/page</code>). Below we've shown some examples of locations and their corresponding URLs:</p> <table style="width: 100%; max-width: 40em;"> <thead> <tr> <th style="width: 50%;">Physical Location</th> <th style="width: 50%;">URL</th> </tr> </thead> <tbody> <tr> <td>content/index.md</td> <td><a href="https://webshoppe.ca/pico">/</a></td> </tr> <tr> <td>content/sub.md</td> <td><del>?sub</del> (not accessible, see below)</td> </tr> <tr> <td>content/sub/index.md</td> <td><a href="https://webshoppe.ca/pico/sub">?sub</a> (same as above)</td> </tr> <tr> <td>content/sub/page.md</td> <td><a href="https://webshoppe.ca/pico/sub/page">?sub/page</a></td> </tr> <tr> <td>content/a/very/long/url.md</td> <td> <a href="https://webshoppe.ca/pico/a/very/long/url">?a/very/long/url</a> (doesn't exist) </td> </tr> </tbody> </table> <p>If a file cannot be found, the file <code>content/404.md</code> will be shown. You can add <code>404.md</code> files to any directory. So, for example, if you wanted to use a special error page for your blog, you could simply create <code>content/blog/404.md</code>.</p> <p>Pico strictly separates contents of your website (the Markdown files in your <code>content</code> directory) and how these contents should be displayed (the Twig templates in your <code>themes</code> directory). However, not every file in your <code>content</code> directory might actually be a distinct page. For example, some themes (including Pico's default theme) use some special &quot;hidden&quot; file to manage meta data (like <code>_meta.md</code> in Pico's sample contents). Some other themes use a <code>_footer.md</code> to represent the contents of the website's footer. The common point is the <code>_</code>: all files and directories prefixed by a <code>_</code> in your <code>content</code> directory are hidden. These pages can't be accessed from a web browser, Pico will show a 404 error page instead.</p> <p>As a common practice, we recommend you to separate your contents and assets (like images, downloads, etc.). We even deny access to your <code>content</code> directory by default. If you want to use some assets (e.g. a image) in one of your content files, you should create an <code>assets</code> folder in Pico's root directory and upload your assets there. You can then access them in your Markdown using <code>&#37;base_url&#37;/assets/</code> for example: <code></code></p> <h3>Text File Markup</h3> <p>Text files are marked up using <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> and <a href="https://michelf.ca/projects/php-markdown/extra/">Markdown Extra</a>. They can also contain regular HTML.</p> <p>At the top of text files you can place a block comment and specify certain meta attributes of the page using <a href="https://en.wikipedia.org/wiki/YAML">YAML</a> (the &quot;YAML header&quot;). For example:</p> <pre><code>--- Title: Welcome Description: This description will go in the meta description tag Author: Joe Bloggs Date: 2001-04-25 Robots: noindex,nofollow Template: index ---</code></pre> <p>These values will be contained in the <code>{{ meta }}</code> variable in themes (see below). Meta headers sometimes have a special meaning: For instance, Pico not only passes through the <code>Date</code> meta header, but rather evaluates it to really &quot;understand&quot; when this page was created. This comes into play when you want to sort your pages not just alphabetically, but by date. Another example is the <code>Template</code> meta header: It controls what Twig template Pico uses to display this page (e.g. if you add <code>Template: blog</code>, Pico uses <code>blog.twig</code>).</p> <p>In an attempt to separate contents and styling, we recommend you to not use inline CSS in your Markdown files. You should rather add appropriate CSS classes to your theme. For example, you might want to add some CSS classes to your theme to rule how much of the available space a image should use (e.g. <code>img.small { width: 80%; }</code>). You can then use these CSS classes in your Markdown files, for example: <code> {.small}</code></p> <p>There are also certain variables that you can use in your text files:</p> <ul> <li><code>&#37;site_title&#37;</code> - The title of your Pico site</li> <li><code>&#37;base_url&#37;</code> - The URL to your Pico site; internal links can be specified using <code>&#37;base_url&#37;?sub/page</code></li> <li><code>&#37;theme_url&#37;</code> - The URL to the currently used theme</li> <li><code>&#37;version&#37;</code> - Pico's current version string (e.g. <code>2.0.0</code>)</li> <li><code>&#37;meta.&#42;&#37;</code> - Access any meta variable of the current page, e.g. <code>&#37;meta.author&#37;</code> is replaced with <code>Joe Bloggs</code></li> </ul> <h3>Blogging</h3> <p>Pico is not blogging software - but makes it very easy for you to use it as a blog. You can find many plugins out there implementing typical blogging features like authentication, tagging, pagination and social plugins. See the below Plugins section for details.</p> <p>If you want to use Pico as a blogging software, you probably want to do something like the following:</p> <ol> <li>Put all your blog articles in a separate <code>blog</code> folder in your <code>content</code> directory. All these articles should have a <code>Date</code> meta header.</li> <li>Create a <code>blog.md</code> or <code>blog/index.md</code> in your <code>content</code> directory. Add <code>Template: blog-index</code> to the YAML header of this page. It will later show a list of all your blog articles (see step 3).</li> <li>Create the new Twig template <code>blog-index.twig</code> (the file name must match the <code>Template</code> meta header from Step 2) in your theme directory. This template probably isn't very different from your default <code>index.twig</code> (i.e. copy <code>index.twig</code>), it will create a list of all your blog articles. Add the following Twig snippet to <code>blog-index.twig</code> near <code>{{ content }}</code>: <pre><code>{% for page in pages|sort_by("time")|reverse %} {% if page.id starts with "blog/" and not page.hidden %} &lt;div class="post"&gt; &lt;h3&gt;&lt;a href="{{ page.url }}"&gt;{{ page.title }}&lt;/a&gt;&lt;/h3&gt; &lt;p class="date"&gt;{{ page.date_formatted }}&lt;/p&gt; &lt;p class="excerpt"&gt;{{ page.description }}&lt;/p&gt; &lt;/div&gt; {% endif %} {% endfor %}</code></pre></li> </ol> <h2>Customization</h2> <p>Pico is highly customizable in two different ways: On the one hand you can change Pico's appearance by using themes, on the other hand you can add new functionality by using plugins. Doing the former includes changing Pico's HTML, CSS and JavaScript, the latter mostly consists of PHP programming.</p> <p>This is all Greek to you? Don't worry, you don't have to spend time on these techie talk - it's very easy to use one of the great themes or plugins others developed and released to the public. Please refer to the next sections for details.</p> <h3>Themes</h3> <p>You can create themes for your Pico installation in the <code>themes</code> folder. Check out the default theme for an example. Pico uses <a href="http://twig.sensiolabs.org/documentation">Twig</a> for template rendering. You can select your theme by setting the <code>theme</code> option in <code>config/config.yml</code> to the name of your theme folder.</p> <p>All themes must include an <code>index.twig</code> file to define the HTML structure of the theme. Below are the Twig variables that are available to use in your theme. Please note that paths (e.g. <code>{{ base_dir }}</code>) and URLs (e.g. <code>{{ base_url }}</code>) don't have a trailing slash.</p> <ul> <li><code>{{ site_title }}</code> - Shortcut to the site title (see <code>config/config.yml</code>)</li> <li><code>{{ config }}</code> - Contains the values you set in <code>config/config.yml</code> (e.g. <code>{{ config.theme }}</code> becomes <code>default</code>)</li> <li><code>{{ base_dir }}</code> - The path to your Pico root directory</li> <li><code>{{ base_url }}</code> - The URL to your Pico site; use Twig's <code>link</code> filter to specify internal links (e.g. <code>{{ "sub/page"|link }}</code>), this guarantees that your link works whether URL rewriting is enabled or not</li> <li><code>{{ theme_dir }}</code> - The path to the currently active theme</li> <li><code>{{ theme_url }}</code> - The URL to the currently active theme</li> <li><code>{{ version }}</code> - Pico's current version string (e.g. <code>2.0.0</code>)</li> <li><code>{{ meta }}</code> - Contains the meta values of the current page <ul> <li><code>{{ meta.title }}</code></li> <li><code>{{ meta.description }}</code></li> <li><code>{{ meta.author }}</code></li> <li><code>{{ meta.date }}</code></li> <li><code>{{ meta.date_formatted }}</code></li> <li><code>{{ meta.time }}</code></li> <li><code>{{ meta.robots }}</code></li> <li>...</li> </ul></li> <li><code>{{ content }}</code> - The content of the current page after it has been processed through Markdown</li> <li><code>{{ pages }}</code> - A collection of all the content pages in your site <ul> <li><code>{{ page.id }}</code> - The relative path to the content file (unique ID)</li> <li><code>{{ page.url }}</code> - The URL to the page</li> <li><code>{{ page.title }}</code> - The title of the page (YAML header)</li> <li><code>{{ page.description }}</code> - The description of the page (YAML header)</li> <li><code>{{ page.author }}</code> - The author of the page (YAML header)</li> <li><code>{{ page.time }}</code> - The <a href="https://en.wikipedia.org/wiki/Unix_timestamp">Unix timestamp</a> derived from the <code>Date</code> header</li> <li><code>{{ page.date }}</code> - The date of the page (YAML header)</li> <li><code>{{ page.date_formatted }}</code> - The formatted date of the page as specified by the <code>date_format</code> parameter in your <code>config/config.yml</code></li> <li><code>{{ page.raw_content }}</code> - The raw, not yet parsed contents of the page; use Twig's <code>content</code> filter to get the parsed contents of a page by passing its unique ID (e.g. <code>{{ "sub/page"|content }}</code>)</li> <li><code>{{ page.meta }}</code>- The meta values of the page (see <code>{{ meta }}</code> above)</li> <li><code>{{ page.previous_page }}</code> - The data of the respective previous page</li> <li><code>{{ page.next_page }}</code> - The data of the respective next page</li> <li><code>{{ page.tree_node }}</code> - The page's node in Pico's page tree</li> </ul></li> <li><code>{{ prev_page }}</code> - The data of the previous page (relative to <code>current_page</code>)</li> <li><code>{{ current_page }}</code> - The data of the current page (see <code>{{ pages }}</code> above)</li> <li><code>{{ next_page }}</code> - The data of the next page (relative to <code>current_page</code>)</li> </ul> <p>Pages can be used like the following:</p> <pre><code>&lt;ul class="nav"&gt; {% for page in pages if not page.hidden %} &lt;li&gt;&lt;a href="{{ page.url }}"&gt;{{ page.title }}&lt;/a&gt;&lt;/li&gt; {% endfor %} &lt;/ul&gt;</code></pre> <p>Besides using the <code>{{ pages }}</code> list, you can also access pages using Pico's page tree. The page tree allows you to iterate through Pico's pages using a tree structure, so you can e.g. iterate just a page's direct children. It allows you to build recursive menus (like dropdowns) and to filter pages more easily. Just head over to Pico's <a href="http://picocms.org/in-depth/features/page-tree/">page tree documentation</a> for details.</p> <p>To call assets from your theme, use <code>{{ theme_url }}</code>. For instance, to include the CSS file <code>themes/my_theme/example.css</code>, add <code>&lt;link rel="stylesheet" href="{{ theme_url }}/example.css" type="text/css" /&gt;</code> to your <code>index.twig</code>. This works for arbitrary files in your theme's folder, including images and JavaScript files.</p> <p>Additional to Twigs extensive list of filters, functions and tags, Pico also provides some useful additional filters to make theming easier.</p> <ul> <li>Pass the unique ID of a page to the <code>link</code> filter to return the page's URL (e.g. <code>{{ "sub/page"|link }}</code> gets <code>https://webshoppe.ca/pico/sub/page</code>).</li> <li>To get the parsed contents of a page, pass its unique ID to the <code>content</code> filter (e.g. <code>{{ "sub/page"|content }}</code>).</li> <li>You can parse any Markdown string using the <code>markdown</code> filter (e.g. you can use Markdown in the <code>description</code> meta variable and later parse it in your theme using <code>{{ meta.description|markdown }}</code>). You can pass meta data as parameter to replace <code>&#37;meta.&#42;&#37;</code> placeholders (e.g. <code>{{ "Written *by Joe Bloggs*"|markdown(meta) }}</code> yields &quot;Written by <em>John Doe</em>&quot;).</li> <li>Arrays can be sorted by one of its keys using the <code>sort_by</code> filter (e.g. <code>{% for page in pages|sort_by([ 'meta', 'nav' ]) %}...{% endfor %}</code> iterates through all pages, ordered by the <code>nav</code> meta header; please note the <code>[ 'meta', 'nav' ]</code> part of the example, it instructs Pico to sort by <code>page.meta.nav</code>). Items which couldn't be sorted are moved to the bottom of the array; you can specify <code>bottom</code> (move items to bottom; default), <code>top</code> (move items to top), <code>keep</code> (keep original order) or <code>remove</code> (remove items) as second parameter to change this behavior.</li> <li>You can return all values of a given array key using the <code>map</code> filter (e.g. <code>{{ pages|map("title") }}</code> returns all page titles).</li> <li>Use the <code>url_param</code> and <code>form_param</code> Twig functions to access HTTP GET (i.e. a URL's query string like <code>?some-variable=my-value</code>) and HTTP POST (i.e. data of a submitted form) parameters. This allows you to implement things like pagination, tags and categories, dynamic pages, and even more - with pure Twig! Simply head over to our <a href="http://picocms.org/in-depth/features/http-params/">introductory page for accessing HTTP parameters</a> for details.</li> </ul> <p>You can use different templates for different content files by specifying the <code>Template</code> meta header. Simply add e.g. <code>Template: blog</code> to the YAML header of a content file and Pico will use the <code>blog.twig</code> template in your theme folder to display the page.</p> <p>Pico's default theme isn't really intended to be used for a productive website, it's rather a starting point for creating your own theme. If the default theme isn't sufficient for you, and you don't want to create your own theme, you can use one of the great themes third-party developers and designers created in the past. As with plugins, you can find themes in <a href="https://github.com/picocms/Pico/wiki/Pico-Themes">our Wiki</a> and on <a href="http://picocms.org/themes/">our website</a>.</p> <h3>Plugins</h3> <h4>Plugins for users</h4> <p>Officially tested plugins can be found at <a href="http://picocms.org/plugins/">http://picocms.org/plugins/</a>, but there are many awesome third-party plugins out there! A good start point for discovery is <a href="https://github.com/picocms/Pico/wiki/Pico-Plugins">our Wiki</a>.</p> <p>Pico makes it very easy for you to add new features to your website using plugins. Just like Pico, you can install plugins either using <a href="https://getcomposer.org/">Composer</a> (e.g. <code>composer require phrozenbyte/pico-file-prefixes</code>), or manually by uploading the plugin's file (just for small plugins consisting of a single file, e.g. <code>PicoFilePrefixes.php</code>) or directory (e.g. <code>PicoFilePrefixes</code>) to your <code>plugins</code> directory. We always recommend you to use Composer whenever possible, because it makes updating both Pico and your plugins way easier. Anyway, depending on the plugin you want to install, you may have to go through some more steps (e.g. specifying config variables) to make the plugin work. Thus you should always check out the plugin's docs or <code>README.md</code> file to learn the necessary steps.</p> <p>Plugins which were written to work with Pico 1.0 and later can be enabled and disabled through your <code>config/config.yml</code>. If you want to e.g. disable the <code>PicoDeprecated</code> plugin, add the following line to your <code>config/config.yml</code>: <code>PicoDeprecated.enabled: false</code>. To force the plugin to be enabled, replace <code>false</code> by <code>true</code>.</p> <h4>Plugins for developers</h4> <p>You're a plugin developer? We love you guys! You can find tons of information about how to develop plugins at <a href="http://picocms.org/development/">http://picocms.org/development/</a>. If you've developed a plugin before and want to upgrade it to Pico 2.0, refer to the <a href="http://picocms.org/development/#upgrade">upgrade section of the docs</a>.</p> <h2>Config</h2> <p>Configuring Pico really is stupidly simple: Just create a <code>config/config.yml</code> to override the default Pico settings (and add your own custom settings). Take a look at the <code>config/config.yml.template</code> for a brief overview of the available settings and their defaults. To override a setting, simply copy the line from <code>config/config.yml.template</code> to <code>config/config.yml</code> and set your custom value.</p> <p>But we didn't stop there. Rather than having just a single config file, you can use a arbitrary number of config files. Simply create a <code>.yml</code> file in Pico's <code>config</code> dir and you're good to go. This allows you to add some structure to your config, like a separate config file for your theme (<code>config/my_theme.yml</code>).</p> <p>Please note that Pico loads config files in a special way you should be aware of. First of all it loads the main config file <code>config/config.yml</code>, and then any other <code>*.yml</code> file in Pico's <code>config</code> dir in alphabetical order. The file order is crucial: Config values which have been set already, cannot be overwritten by a succeeding file. For example, if you set <code>site_title: Pico</code> in <code>config/a.yml</code> and <code>site_title: My awesome site!</code> in <code>config/b.yml</code>, your site title will be &quot;Pico&quot;.</p> <p>Since YAML files are plain text files, users might read your Pico config by navigating to <code>https://webshoppe.ca/pico/config/config.yml</code>. This is no problem in the first place, but might get a problem if you use plugins that require you to store security-relevant data in the config (like credentials). Thus you should <em>always</em> make sure to configure your webserver to deny access to Pico's <code>config</code> dir. Just refer to the &quot;URL Rewriting&quot; section below. By following the instructions, you will not just enable URL rewriting, but also deny access to Pico's <code>config</code> dir.</p> <h3>URL Rewriting</h3> <p>Pico's default URLs (e.g. <a href="https://webshoppe.ca/pico/?sub/page">https://webshoppe.ca/pico/?sub/page</a>) already are very user-friendly. Additionally, Pico offers you a URL rewrite feature to make URLs even more user-friendly (e.g. <a href="https://webshoppe.ca/pico/sub/page">https://webshoppe.ca/pico/sub/page</a>). Below you'll find some basic info about how to configure your webserver proberly to enable URL rewriting.</p> <h4>Apache</h4> <p>If you're using the Apache web server, URL rewriting probably already is enabled - try it yourself, click on the <a href="https://webshoppe.ca/pico/sub/page">second URL</a>. If URL rewriting doesn't work (you're getting <code>404 Not Found</code> error messages from Apache), please make sure to enable the <a href="https://httpd.apache.org/docs/current/mod/mod_rewrite.html"><code>mod_rewrite</code> module</a> and to enable <code>.htaccess</code> overrides. You might have to set the <a href="https://httpd.apache.org/docs/current/mod/core.html#allowoverride"><code>AllowOverride</code> directive</a> to <code>AllowOverride All</code> in your virtual host config file or global <code>httpd.conf</code>/<code>apache.conf</code>. Assuming rewritten URLs work, but Pico still shows no rewritten URLs, force URL rewriting by setting <code>rewrite_url: true</code> in your <code>config/config.yml</code>. If you rather get a <code>500 Internal Server Error</code> no matter what you do, try removing the <code>Options</code> directive from Pico's <code>.htaccess</code> file (it's the last line).</p> <h4>Nginx</h4> <p>If you're using Nginx, you can use the following config to enable URL rewriting (lines <code>5</code> to <code>8</code>) and denying access to Pico's internal files (lines <code>1</code> to <code>3</code>). You'll need to adjust the path (<code>/pico</code> on lines <code>1</code>, <code>2</code>, <code>5</code> and <code>7</code>) to match your installation directory. Additionally, you'll need to enable URL rewriting by setting <code>rewrite_url: true</code> in your <code>config/config.yml</code>. The Nginx config should provide the <em>bare minimum</em> you need for Pico. Nginx is a very extensive subject. If you have any trouble, please read through our <a href="http://picocms.org/in-depth/nginx/">Nginx config docs</a>.</p> <pre><code>location ~ ^/pico/((config|content|vendor|composer\.(json|lock|phar))(/|$)|(.+/)?\.(?!well-known(/|$))) { try_files /pico/index.php$is_args$args =404; } location /pico/ { index index.php; try_files $uri $uri/ /pico/index.php$is_args$args; }</code></pre> <h4>Lighttpd</h4> <p>Pico runs smoothly on Lighttpd. You can use the following config to enable URL rewriting (lines <code>6</code> to <code>9</code>) and denying access to Pico's internal files (lines <code>1</code> to <code>4</code>). Make sure to adjust the path (<code>/pico</code> on lines <code>2</code>, <code>3</code> and <code>7</code>) to match your installation directory, and let Pico know about available URL rewriting by setting <code>rewrite_url: true</code> in your <code>config/config.yml</code>. The config below should provide the <em>bare minimum</em> you need for Pico.</p> <pre><code>url.rewrite-once = ( "^/pico/(config|content|vendor|composer\.(json|lock|phar))(/|$)" =&gt; "/pico/index.php", "^/pico/(.+/)?\.(?!well-known(/|$))" =&gt; "/pico/index.php" ) url.rewrite-if-not-file = ( "^/pico(/|$)" =&gt; "/pico/index.php" )</code></pre> <h2>Documentation</h2> <p>For more help have a look at the Pico documentation at <a href="http://picocms.org/docs">http://picocms.org/docs</a>.</p> Thu, 22 Aug 2019 00:00:00 +0000 https://webshoppe.ca/pico/pico https://webshoppe.ca/pico/pico <h2>This is a Sub Page</h2> <p>This is <code>page.md</code> in the <code>pico</code> folder.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> Thu, 22 Aug 2019 00:00:00 +0000 https://webshoppe.ca/pico/pico/page https://webshoppe.ca/pico/pico/page <h1>Theme Styling Test</h1> <p>This is <code>theme.md</code> in Pico's content directory. This page doesn't show up in the website's menu due to <code>hidden: true</code> in the page's YAML header. The purpose of this page is to aid theme development - below you'll find basically every format that is possible with Markdown. If you develop a theme, you should make sure that all examples below show decent.</p> <h2>Text</h2> <p><strong><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet,</strong> consectetur adipisici elit, <em>sed eiusmod tempor</em> incidunt ut labore et dolore magna aliqua.<sup id="fnref1:1"><a href="#fn:1" class="footnote-ref">1</a></sup> <del>Ut enim ad minim veniam,</del> quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.<sup id="fnref1:2"><a href="#fn:2" class="footnote-ref">2</a></sup> <a href="https://webshoppe.ca/pico" title="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.">Quis aute iure reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <code>Excepteur</code> sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="https://webshoppe.ca/pico" title="Pico Logo" class="image small float-right"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCI+PHBhdGggZD0ibTI5OC40IDE5NC43cTAtMTQuMTUtLjgtMzEuMmwtLjg1LTE0LjI1aC01MS4wNXY4OS45NWw4IDEuMXE5LjYgMS4wNSAxNy42IDEuMDUgNy45NSAwIDE3LjUtMS4wNSA0LjgtLjU1IDcuOTUtMS4xIDEuNjUtMjIuMiAxLjY1LTQ0LjVtLTY5Ljc1LTQ1LjhoLTQ5LjN2MTgyLjQ1bDcuNy44NXE5LjMuOCAxNyAuOCAxMi4zIDAgMjQuNi0xLjY1eiIgZmlsbD0iIzJlYWU5YiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM4Ljg1IC00MC45NSkiLz48L3N2Zz4K" alt="Pico Logo" /></a></p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Headings</h2> <h1>h1</h1> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>h2</h2> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <h3>h3</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h4>h4</h4> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h5>h5</h5> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <h6>h6</h6> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <h2>Horizontal line</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr /> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <h2>List</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ul> <li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <ol> <li><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> <li>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li> <li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</li> </ol></li> <li>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <ul> <li><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> <li>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <ol> <li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</li> <li>At vero eos et accusam et justo duo dolores et ea rebum.</li> <li>Stet clita kasd gubergren, no sea takimata sanctus est <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet</li> <li><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li> <li>At vero eos et accusam et justo duo dolores et ea rebum.</li> </ol></li> </ul></li> </ul> <p>Stet clita kasd gubergren, no sea takimata sanctus est <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p> <h2>Definition list</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <dl> <dt>Duis autem</dt> <dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd> <dt><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet</dt> <dd><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd> <dt>Ut wisi enim ad minim veniam</dt> <dd>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</dd> <dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd> </dl> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Blockquote</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <blockquote> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <blockquote> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </blockquote> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </blockquote> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p> <h2>Code block</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;This is a title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello world!&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <h2>Table</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <table> <thead> <tr> <th><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr></th> <th>Duis autem vel eum</th> <th>Ut wisi enim ad minim veniam</th> </tr> </thead> <tbody> <tr> <td><strong>Duis autem vel eum iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td><em><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet,</em> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td> <td><del>Ut wisi enim ad minim veniam,</del> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> </tr> <tr> <td><a href="https://webshoppe.ca/pico" title="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.">Duis autem vel eum iriure dolor</a> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td><code>Nam liber tempor</code> cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</td> <td><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td> </tr> <tr> <td>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> <td></td> <td>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</td> </tr> </tbody> </table> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <h2>Forms</h2> <p><abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <fieldset> <legend>Legend</legend> <label>Label</label> <input type="checkbox"> <input type="checkbox" checked> <input type="radio"> <input type="radio" checked><br> <input type="text" value="Lorem ipsum"> <input type="password" value="Ut enim"><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> <input type="button" value="Button (Input)"> <button>Button</button><br> <textarea>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua<br>.</textarea><br> <select> <option>Lorem ipsum</option> <option>Ut enim</option> </select><br> <select multiple> <option>Lorem ipsum</option> <option selected>Ut enim</option> <option>Quis aute iure</option> <option>Excepteur sint</option> </select> </fieldset> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <abbr title="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.">Lorem ipsum</abbr> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="footnotes"> <hr /> <ol> <li id="fn:1"> &lt;p&gt;Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&amp;#160;&lt;a href="#fnref1:1" rev="footnote" class="footnote-backref"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt; </li> <li id="fn:2"> &lt;p&gt;Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&amp;#160;&lt;a href="#fnref1:2" rev="footnote" class="footnote-backref"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt; </li> </ol> </div> Thu, 22 Aug 2019 00:00:00 +0000 https://webshoppe.ca/pico/pico/theme https://webshoppe.ca/pico/pico/theme <!-- Begin index.md template--> <!-- Moved h1 header to twig --> <div class="w3-center">Begin <code>index.md</code></div> <div id="pageContent"> <div class="w3-row-padding w3-hide-medium w3-hide-large"> <button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-theme w3-button w3-block w3-center-align" title="Open Table Of Contents">Open Table Of Contents</button> <div id="Demo1" class="w3-hide"> <div class="w3-container"> <div class="tree-block w3-theme"> <div class="w3-container w3-center w3-padding-16"> <span class="w3-large" title="Table Of Contents">Table Of Contents</span> </div><!-- .w3-container w3-center w3-padding-16 --> <!-- Pico Table Of Contents Plugin --> <nav class="tree w3-center" id="toc-nav-m"> <toc-pwa max-level="5"></toc-pwa> </nav><!-- .w3-hide-medium w3-hide-large --> </div><!-- .tree-block w3-theme --> </div><!-- .w3-container --> </div><!-- #Demo1 .w3-hide --> </div><!-- .w3-row-padding w3-hide-medium w3-hide-large --> <br> <div class="w3-display-container"> <div class="w3-row-padding"> <div class="w3-container w3-left"> <div class="w3-display-container"> <div class="w3-left w3-theme-light w3-display-container w3-border-bottom"> <section> <h2>Sub</h2> <p>This is <code>index.md</code> in the <code>sub</code> folder. The <a href="sub/page" title="">Sub Page</a> is page.md<code> and is located in the <code>sub</code> folder.</code></p> </section> <!-- PWA TOC Top Tooltip --> <div class="w3-hide-medium w3-hide-large"> <div class="w3-tooltip w3-right"> <span class="w3-hide">Go to Top</span> <a href="#myHeader" title="Go to Top" class="w3-padding w3-hover-theme w3-center"> <span class="w3-xlarge"><i class="fas fa-chevron-circle-up" title="Go to Top"></i></span> </a> </div><!-- .w3-tooltip w3-right --> </div><!-- .w3-hide-medium w3-hide-large --> <section> <h2>Section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <h3>Section 2 h3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <h4>Section 2 h4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <h5>Section 2 h5</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> <h6>Section 2 h6</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> <!-- PWA TOC Top Tooltip --> <div class="w3-hide-medium w3-hide-large"> <div class="w3-tooltip w3-right"> <span class="w3-hide">Go to Top</span> <a href="#myHeader" title="Go to Top" class="w3-padding w3-hover-theme w3-center"> <span class="w3-xlarge"><i class="fas fa-chevron-circle-up" title="Go to Top"></i></span> </a> </div><!-- .w3-tooltip w3-right --> </div><!-- .w3-hide-medium w3-hide-large --> <section> <h2>Section 3x</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> <!-- PWA TOC Top Tooltip --> <div class="w3-hide-medium w3-hide-large"> <div class="w3-tooltip w3-right"> <span class="w3-hide">Go to Top</span> <a href="#myHeader" title="Go to Top" class="w3-padding w3-hover-theme w3-center"> <span class="w3-xlarge"><i class="fas fa-chevron-circle-up" title="Go to Top"></i></span> </a> </div><!-- .w3-tooltip w3-right --> </div><!-- .w3-hide-medium w3-hide-large --> </div><!-- .w3-left w3-theme-light w3-display-container w3-border-bottom --> </div><!-- .w3-display-container --> </div><!-- .w3-container w3-center --> </div><!-- .w3-row-padding --> <br> <div class="w3-row-padding"> <div class="w3-container w3-hide-small w3-left"> <!-- Pico Table Of Contents Plugin --> <nav class="w3-container" id="toc-nav"> <div class="w3-container w3-center w3-medium"> <h2>Table Of Contents</h2> </div><!-- .w3-container w3-center --> <toc max-level="5"></toc> </nav><!-- .w3-container --> <div class="w3-center">last updated:<br>2020-09-17</div> <hr class="clear"> </div><!-- .w3-container w3-hide-small w3-right --> </div><!-- .w3-row-padding --> </div><!-- .w3-display-container --> <br> </div> Thu, 17 Sep 2020 00:00:00 +0000 https://webshoppe.ca/pico/sub https://webshoppe.ca/pico/sub <!-- Begin index.md template--> <!-- Moved header to twig --> <div class="w3-center">Begin <code>index.md</code></div> <content> <div class="w3-display-container"> <div class="w3-row-padding"> <div class="w3-threequarter"> <div class="w3-display-container"> <div class="w3-right w3-theme-light w3-display-container w3-border-bottom"> <section> <h2>Sub</h2> <p>This is <code>index.md</code> in the <code>sub</code> folder. The <a href="sub/page" title="">Sub Page</a> is page.md<code> and is located in the <code>sub</code> folder.</code></p> </section> <section> <h2>Section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> <section> <h2>Section 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> </div><!-- .w3-left w3-white w3-display-container w3-border-bottom --> </div><!-- .w3-display-container --> <hr> </div><!-- .w3-threequarter --> <div class="w3-quarter w3-left"> <!-- Pico Table Of Contents Plugin --> <nav class="w3-container" id="toc-nav"> <div class="w3-container w3-center w3-medium"> <h2>Table Of Contents</h2> </div><!-- .w3-container w3-center --> <toc max-level="5"></toc> </nav><!-- .w3-container --> <hr> </div><!-- .w3-quarter w3-right --> </div><!-- .w3-row-padding --> </div><!-- .w3-display-container --> <br> <div class="w3-display-container"> <div class="w3-row-padding"> <div class="w3-threequarter w3-right"> <div class="w3-display-container"> <div class="w3-right w3-theme-light w3-display-container w3-border-bottom"> <section> <h2>Sub</h2> <p>This is <code>index.md</code> in the <code>sub</code> folder. The <a href="sub/page" title="">Sub Page</a> is page.md<code> and is located in the <code>sub</code> folder.</code></p> </section> <section> <h2>Section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> <section> <h2>Section 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.</p> </section> </div><!-- .w3-left w3-white w3-display-container w3-border-bottom --> </div><!-- .w3-display-container --> <hr> </div><!-- .w3-threequarter --> <div class="w3-quarter w3-left"> <!-- Pico Table Of Contents Plugin --> <nav class="w3-container" id="toc-nav"> <div class="w3-container w3-center w3-medium"> <h2>Table Of Contents</h2> </div><!-- .w3-container w3-center --> <toc max-level="5"></toc> </nav><!-- .w3-container --> <hr> </div><!-- .w3-quarter w3-right --> </div><!-- .w3-row-padding --> </div><!-- .w3-display-container --> <br> </content> <div class="w3-center">END <code>index.md</code></div> <!-- END index.md template--> Fri, 26 Apr 2024 14:23:57 +0000 https://webshoppe.ca/pico/sub/index-ok https://webshoppe.ca/pico/sub/index-ok