Docs: Sidebar styles

docs/css/pico.docs.css

@@ -55,7 +55,7 @@ body > main {
 @media (min-width: 992px) {
   body > main {
     --block-spacing-horizontal: calc(var(--spacing) * 1.75);
-    grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
+    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
     display: grid;
     grid-template-columns: 200px auto;
   }
@@ -70,37 +70,6 @@ body > main div[role=document] {
   min-width: 0;
 }
 
-div[role=document] > section::before {
-  display: block;
-  height: calc(2rem + 3.5rem - 0.5rem);
-  margin-top: calc(-2rem - 3.5rem + 0.5rem);
-  content: "";
-}
-@media (min-width: 576px) {
-  div[role=document] > section::before {
-    height: calc(2.5rem + 3.5rem - 0.5rem);
-    height: calc(-2.5rem - 3.5rem + 0.5rem);
-  }
-}
-@media (min-width: 768px) {
-  div[role=document] > section::before {
-    height: calc(3rem + 3.5rem - 0.5rem);
-    margin-top: calc(-3rem - 3.5rem + 0.5rem);
-  }
-}
-@media (min-width: 992px) {
-  div[role=document] > section::before {
-    height: calc(3.5rem + 3.5rem - 0.5rem);
-    margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
-  }
-}
-@media (min-width: 1200px) {
-  div[role=document] > section::before {
-    height: calc(4rem + 3.5rem - 0.5rem);
-    margin-top: calc(-4rem - 3.5rem + 0.5rem);
-  }
-}
-
 div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
   display: inline-block;
   width: 1rem;
@@ -121,10 +90,7 @@ svg {
  */
 main > aside nav {
   width: 100%;
-  margin-bottom: var(--block-spacing-vertical);
+  margin-bottom: calc(var(--block-spacing-vertical) * 2);
-}
-main > aside nav h1 {
-  margin-bottom: calc(var(--typography-spacing-vertical) / 2);
 }
 @media (min-width: 992px) {
   main > aside nav {
@@ -135,10 +101,43 @@ main > aside nav h1 {
     overflow-x: hidden;
     overflow-y: auto;
   }
-  main > aside nav h1 {
+}
+main > aside nav a#toggle-docs-navigation {
+  margin: 0;
+  margin-bottom: var(--spacing);
+  padding: 0;
+  padding-bottom: var(--spacing);
+  border-bottom: var(--border-width) solid var(--accordion-border-color);
+}
+main > aside nav a#toggle-docs-navigation svg {
+  vertical-align: -3px;
+  margin-right: calc(var(--spacing) * 0.5);
+}
+@media (min-width: 992px) {
+  main > aside nav a#toggle-docs-navigation {
     display: none;
   }
 }
+main > aside nav.closed-on-mobile {
+  margin-bottom: var(--block-spacing-vertical);
+}
+main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
+  display: none;
+}
+main > aside nav.closed-on-mobile details {
+  display: none;
+}
+@media (min-width: 992px) {
+  main > aside nav.closed-on-mobile details {
+    display: block;
+  }
+  main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
+    display: none;
+  }
+}
+main > aside nav.open a#toggle-docs-navigation svg.expand {
+  display: none;
+}
 main > aside li,
 main > aside summary {
   padding-top: 0;
@@ -146,7 +145,7 @@ main > aside summary {
   font-size: 16px;
 }
 main > aside li a {
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.5rem;
 }
 main > aside li a svg {
   vertical-align: middle;
@@ -160,7 +159,6 @@ main > aside a.active:hover {
   color: var(--primary);
 }
 main > aside details {
-  padding-bottom: 0.25rem;
   border-bottom: none;
 }
 main > aside details summary {
@@ -172,6 +170,9 @@ main > aside details summary {
 main > aside details summary::after {
   display: none;
 }
+main > aside details[open] > summary {
+  margin-bottom: calc(var(--spacing) * 0.75);
+}
 main > aside details[open] > summary:not(:focus) {
   color: var(--h1-color);
 }
@@ -273,6 +274,10 @@ main > aside details[open] > summary:not(:focus) {
 /**
  * Docs: Typography
  */
+h1 {
+  margin-top: -0.25em;
+}
+
 section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }

docs/js/commons.js

@@ -7,6 +7,7 @@
 
 // Imports
 import themeSwitcher from './src/theme-switcher.js';
+import toggleNavigation from './src/toggle-navigation';
 
 // Theme switcher
 themeSwitcher.addButton({
@@ -15,3 +16,6 @@ themeSwitcher.addButton({
   target: 'body',
 });
 themeSwitcher.init();
+
+// Toggle navigation
+toggleNavigation.init();

docs/js/commons.min.js

@@ -1 +1 @@
-"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init()}();
+"use strict";!function(){var t={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(t){t.addEventListener("click",function(t){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(t){var e=document.createElement(t.tag);e.className=t.class,document.querySelector(t.target).appendChild(e)},set scheme(t){"auto"==t?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=t&&"light"!=t||(this._scheme=t),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}},e={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){this.toggleLink.addEventListener("click",function(t){t.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)}.bind(this),!1)},applyState:function(){},get state(){return this._state},set state(t){this._state=t}};t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),e.init()}();

docs/js/src/color-picker.js

@@ -6,6 +6,7 @@
  */
 
 export const colorPicker = {
+  
   // Config
   colors: null,
   buttonsTarget: '#customization article[data-theme="generated"]',

docs/js/src/grid.js

@@ -6,6 +6,7 @@
  */
 
 export const grid = {
+  
   // Config
   buttons: {
     text: {

docs/js/src/theme-switcher.js

@@ -6,6 +6,7 @@
  */
 
 export const themeSwitcher = {
+  
   // Config
   _scheme: 'auto',
   change: {

docs/js/src/toggle-navigation.js

@@ -0,0 +1,53 @@
+/*
+ * Toggle navigation
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+export const toggleNavigation = {
+  
+  // Config
+  _state: 'closed-on-mobile',
+  toggleLink: document.getElementById('toggle-docs-navigation'),
+  nav: document.querySelector('main > aside > nav'),
+
+  // Init
+  init() {
+    this.onToggleClick()
+  },
+
+  onToggleClick() {
+    this.toggleLink.addEventListener(
+      'click',
+      function (event) {
+        event.preventDefault();
+        if (this.state == 'closed-on-mobile') {
+          this.state = 'open';
+        } else {
+          this.state = 'closed-on-mobile';
+        }
+        this.nav.removeAttribute('class');
+        this.nav.classList.add(this.state);
+      }.bind(this),
+      false
+    );
+  },
+
+  // Apply navigation state
+  applyState() {
+    
+  },
+
+  // Get state
+  get state() {
+    return this._state;
+  },
+
+  // Set state
+  set state(state) {
+    this._state = state;
+  },
+};
+
+export default toggleNavigation;

docs/scss/content/_typography.scss

@@ -2,6 +2,10 @@
  * Docs: Typography
  */
 
+h1 {
+  margin-top: -0.25em;
+}
+
 section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }

docs/scss/layout/_aside.scss

@@ -3,13 +3,10 @@
  */
 
 main > aside {
+
   nav {
     width: 100%;
-    margin-bottom: var(--block-spacing-vertical);
+    margin-bottom: calc(var(--block-spacing-vertical) * 2);
-
-    h1 {
-      margin-bottom: calc(var(--typography-spacing-vertical) / 2);
-    }
   
     @media (min-width: map-get($breakpoints, "lg")) {
       position: fixed;
@@ -18,13 +15,59 @@ main > aside {
       margin-bottom: 0;
       overflow-x: hidden;
       overflow-y: auto;
+    }
 
-      h1 {
+    a#toggle-docs-navigation {
+      margin: 0;
+      margin-bottom: var(--spacing);
+      padding: 0;
+      padding-bottom: var(--spacing);
+      border-bottom: var(--border-width) solid var(--accordion-border-color);
+
+      svg {
+        vertical-align: -3px;
+        margin-right: calc(var(--spacing) * 0.5);
+      }
+
+      @media (min-width: map-get($breakpoints, "lg")) {
+        display: none;
+      }
+    }
+
+    &.closed-on-mobile {
+      margin-bottom: var(--block-spacing-vertical);
+
+      a#toggle-docs-navigation {
+        svg.collapse {
+          display: none;
+        }
+      }
+
+      details {
+        display: none;
+      } 
+
+      @media (min-width: map-get($breakpoints, "lg")) {
+        details {
+          display: block;
+        }
+
+        > a#toggle-docs-navigation {
           display: none;
         }
       }
     }
 
+    &.open {
+      a#toggle-docs-navigation {
+        svg.expand {
+          display: none;
+        }
+      }
+    }
+  }
+  
+
   li,
   summary {
     padding-top: 0;
@@ -33,7 +76,7 @@ main > aside {
   }
 
   li a {
-    padding: 0.25rem 0.5rem;
+    padding: 0.375rem 0.5rem;
 
     svg {
       vertical-align: middle;
@@ -51,7 +94,6 @@ main > aside {
   }
 
   details {
-    padding-bottom: 0.25rem;
     border-bottom: none;
 
     summary {
@@ -66,9 +108,13 @@ main > aside {
     }
 
     &[open] {
-      > summary:not(:focus) {
+      > summary {
+        margin-bottom: calc(var(--spacing) * 0.75);
+
+        &:not(:focus) {
           color: var(--h1-color);
         }
       }
     }
   }
+}

docs/scss/layout/_main.scss

@@ -12,7 +12,7 @@ body > main {
   @if map-get($breakpoints, "lg") {
     @media (min-width: map-get($breakpoints, "lg")) {
       --block-spacing-horizontal: calc(var(--spacing) * 1.75);
-      grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
+      grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
       display: grid;
       grid-template-columns: 200px auto;
     }
@@ -30,42 +30,6 @@ body > main {
   }
 }
 
-// Anchors hacks for internal links
-div[role="document"] > section::before {
-  display: block;
-  height: calc(2rem + #{$navHeight} - 0.5rem);
-  margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
-  content: "";
-
-  @if map-get($breakpoints, "sm") {
-    @media (min-width: map-get($breakpoints, "sm")) {
-      height: calc(2.5rem + #{$navHeight} - 0.5rem);
-      height: calc(-2.5rem - #{$navHeight} + 0.5rem);
-    }
-  }
-
-  @if map-get($breakpoints, "md") {
-    @media (min-width: map-get($breakpoints, "md")) {
-      height: calc(3rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
-    }
-  }
-
-  @if map-get($breakpoints, "lg") {
-    @media (min-width: map-get($breakpoints, "lg")) {
-      height: calc(3.5rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
-    }
-  }
-
-  @if map-get($breakpoints, "xl") {
-    @media (min-width: map-get($breakpoints, "xl")) {
-      height: calc(4rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
-    }
-  }
-}
-
 // External links
 div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
 {

docs/src/_sidebar.html

@@ -1,6 +1,16 @@
 <aside>
-  <nav>
+  <nav class="closed-on-mobile">
-    <h1>Documentation</h1>
+    <a href="./" class="secondary" id="toggle-docs-navigation">
+      <svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16">
+        <title>Expand</title>
+        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="collapse"  fill="currentColor" viewBox="0 0 16 16">
+        <title>Collapse</title>
+        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
+      </svg>
+      Table of content
+    </a>
     <details>
       <summary>Getting started</summary>
       <ul>
@@ -53,11 +63,10 @@
       </ul>
     </details>
   </nav>
-</aside>
-
   <script>
     const activeLink = document.querySelector(`aside a#${props.active}`);
     const parentAccordion = activeLink.closest('details');
     activeLink.classList.add('active');
     parentAccordion.setAttribute('open', 'true');
   </script>
+</aside>

docs/src/accordions.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="accordions">
           <hgroup>
-            <h2>Accordions</h2>
+            <h1>Accordions</h1>
-            <h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
+            <h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
           </hgroup>
           <article aria-label="Accordions examples">
             <details>

docs/src/buttons.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="buttons">
           <hgroup>
-            <h2>Buttons</h2>
+            <h1>Buttons</h1>
-            <h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
+            <h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
           </hgroup>
           <article aria-label="Button example">
             <button aria-label="Button">Button</button>

docs/src/cards.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="cards">
           <hgroup>
-            <h2>Cards</h2>
+            <h1>Cards</h1>
-            <h3>A flexible container with graceful spacings across devices and viewports.</h3>
+            <h2>A flexible container with graceful spacings across devices and viewports.</h2>
           </hgroup>
           <article aria-label="Card example">
             I'm a card!

docs/src/classless.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="classless">
           <hgroup>
-            <h2>Class-less version</h2>
+            <h1>Class-less version</h1>
-            <h3>For wild HTML purists!</h3>
+            <h2>For wild HTML purists!</h2>
           </hgroup>
           <p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
           <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>

docs/src/containers.html

@@ -17,11 +17,11 @@
       <div role="document">
         <section id="containers">
           <hgroup>
-            <h2>Containers</h2>
+            <h1>Containers</h1>
-            <h3>
+            <h2>
               <code>.container</code> enable a centered viewport.<br>
               <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
-            </h3>
+            </h2>
           </hgroup>
 
 <pre><code>&lt;<b>body</b>&gt;

docs/src/customization.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="customization">
           <hgroup>
-            <h2>Customization</h2>
+            <h1>Customization</h1>
-            <h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
+            <h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
           </hgroup>
           <p>Example: <strong>pick a color!</strong></p>
 

docs/src/forms.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="forms">
           <hgroup>
-            <h2>Forms</h2>
+            <h1>Forms</h1>
-            <h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
+            <h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
           </hgroup>
           <p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
           <p>All natives form elements are fully customizable and themeable with CSS variables.</p>

docs/src/grid.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="grid">
           <hgroup>
-            <h2>Grid</h2>
+            <h1>Grid</h1>
-            <h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
+            <h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
           </hgroup>
           <article aria-label="Grid example">
             <div class="grid">

docs/src/index.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="start">
           <hgroup>
-            <h2>Usage</h2>
+            <h1>Usage</h1>
-            <h3>Works without package manager or dependencies 🙂!</h3>
+            <h2>Works without package manager or dependencies 🙂!</h2>
           </hgroup>
           <p>There are 3 ways to get started with pico.css:</p>
           <h4>Install manually</h4>

docs/src/loading.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="loading">
           <hgroup>
-            <h2>Loading</h2>
+            <h1>Loading</h1>
-            <h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
+            <h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
           </hgroup>
           <article aria-label="Loading buttons example">
             <button aria-busy="true">Please wait…</button>

docs/src/navs.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="navs">
           <hgroup>
-            <h2>Navs</h2>
+            <h1>Navs</h1>
-            <h3>The essential navbar component in pure semantic HTML.</h3>
+            <h2>The essential navbar component in pure semantic HTML.</h2>
           </hgroup>
           <article aria-label="Nav example">
             <nav>

docs/src/progress.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="progress">
           <hgroup>
-            <h2>Progress</h2>
+            <h1>Progress</h1>
-            <h3>Progress bar element in pure HTML, without JavaScript.</h3>
+            <h2>Progress bar element in pure HTML, without JavaScript.</h2>
           </hgroup>
           <article aria-label="Progress bar example">
             <progress value="25" max="100"></progress>

docs/src/rtl.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="rtl">
           <hgroup>
-            <h2>RTL</h2>
+            <h1>RTL</h1>
-            <h3>Support for right-to-left text in Pico.</h3>
+            <h2>Support for right-to-left text in Pico.</h2>
           </hgroup>
           <p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element.</p>
 

docs/src/scroller.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="scroller">
           <hgroup>
-            <h2>Horizontal scroller</h2>
+            <h1>Horizontal scroller</h1>
-            <h3><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h3>
+            <h2><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h2>
           </hgroup>
           <p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
           <figure>

docs/src/tables.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="tables">
           <hgroup>
-            <h2>Tables</h2>
+            <h1>Tables</h1>
-            <h3>Default styles for tables without <code>.classes</code></h3>
+            <h2>Default styles for tables without <code>.classes</code></h2>
           </hgroup>
           <figure>
             <table>

docs/src/themes.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="themes">
           <hgroup>
-            <h2>Themes</h2>
+            <h1>Themes</h1>
-            <h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
+            <h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
           </hgroup>
           <p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
           <article aria-label="Theme switcher">

docs/src/tooltips.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="tooltips">
           <hgroup>
-            <h2>Tooltips</h2>
+            <h1>Tooltips</h1>
-            <h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
+            <h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
           </hgroup>
           <article aria-label="Tooltips examples">
             <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>

docs/src/typography.html

@@ -17,8 +17,8 @@
       <div role="document">
         <section id="typography">
           <hgroup>
-            <h2>Typography</h2>
+            <h1>Typography</h1>
-            <h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
+            <h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
           </hgroup>
           <figure>
             <table role="grid">

docs/src/we-love-classes.html

@@ -16,7 +16,7 @@
       
       <div role="document">
         <section id="we-love-classes">
-          <h2>We love <code>.classes</code></h2>
+          <h1>We love <code>.classes</code></h1>
           <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
           <p>But of course, <code>.classes</code> are not a bad practice at all.</p>
           <p>Feel free to use <em>modifiers</em>.</p>