Add Scrollspy for docs

docs/scss/components/_nav.scss

@@ -13,7 +13,7 @@ body > nav {
   background-color: var(--nav-background);
   box-shadow: 0px 1px 0 var(--nav-border);
 
-  li a {
+  a {
     border-radius: 0;
   }
 

docs/scss/components/_theme-switcher.scss

@@ -2,7 +2,7 @@
  * Docs: Theme switcher
  */
 
-button.switcher {
+.switcher {
   position: fixed;
   right: $spacing-gutter/2;
   bottom: $spacing-gutter;

docs/scss/content/_typography.scss

@@ -2,17 +2,19 @@
  * Docs: Typography
  */
 
- section > hgroup {
-   margin-bottom: $spacing-typography*2;
- }
- a[role=button] {
-   margin-right: $spacing-gutter/4;
-   margin-bottom: $spacing-typography;
- }
- [role=document] {
-   section > h1,
-   section > h2,
-   section > h3 {
-     line-height: 1;
-   }
- }
+section > hgroup {
+  margin-bottom: $spacing-typography*2;
+}
+
+a[role=button] {
+  margin-right: $spacing-gutter/4;
+  margin-bottom: $spacing-typography;
+}
+
+[role=document] {
+  section > h1,
+  section > h2,
+  section > h3 {
+    line-height: 1;
+  }
+}

docs/scss/layout/_aside.scss

@@ -40,12 +40,14 @@ main > aside {
     }
   }
 
-  a,
-  a.secondary {
-    &:focus {
-      background-color: transparent;
-      color: var(--primary-hover);
-    }
+  a.secondary:focus {
+    background-color: transparent;
+    color: var(--primary-hover);
+  }
+
+  a.active,
+  a.active:hover {
+    color: var(--primary);
   }
 
   details {
@@ -68,11 +70,3 @@ main > aside {
     }
   }
 }
-
-[role=document] {
-  section > h1,
-  section > h2,
-  section > h3 {
-    line-height: 1;
-  }
-}

docs/scss/layout/_documentation.scss

@@ -125,8 +125,6 @@
 // Docs: Forms
 // ––––––––––––––––––––
 
-#forms {
-  div.grid {
-    grid-row-gap: 0;
-  }
+#forms div.grid {
+  grid-row-gap: 0;
 }

docs/scss/layout/_main.scss

@@ -80,6 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
   content: '';
 }
 
+
 // Form grid
 // ––––––––––––––––––––