Improvements

- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher

docs/scss/layout/_aside.scss

@@ -51,14 +51,19 @@ main > aside {
   details {
     padding-bottom: .25rem;
     border-bottom: none;
-  }
 
-  details summary {
-    font-weight: 300;
-    text-transform: uppercase;
+    summary {
+      font-weight: 300;
+      text-transform: uppercase;
+      color: var(--h3);
 
-    &::after {
-      display: none;
+      &::after {
+        display: none;
+      }
+    }
+
+    &[open] summary {
+      color: var(--h3);
     }
   }
 }

docs/scss/layout/_documentation.scss

@@ -2,6 +2,15 @@
  * Docs: Documentation
  */
 
+// Docs: Themes
+// ––––––––––––––––––––
+
+#themes {
+  button i {
+    font-style: normal;
+  }
+}
+
 // Docs: Customization
 // ––––––––––––––––––––
 
@@ -73,9 +82,15 @@
 #grids {
 
   button {
-    display: inline-block;
-    width: auto;
-    margin-right: .5rem;
+    display: block;
+    width: 100%;
+    margin-bottom: $spacing-typography/2;
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      display: inline-block;
+      width: auto;
+      margin-right: .5rem;
+    }
 
     svg {
       stroke: var(--secondary);
@@ -91,4 +106,8 @@
     background: var(--code-background);
     text-align: center;
   }
+
+  details {
+    margin-top: $spacing-typography*2;
+  }
 }

docs/scss/layout/_main.scss

@@ -35,7 +35,7 @@ body > main {
 // Anchors hacks for internal links
 // ––––––––––––––––––––
 
-a[name]:not([href])::before {
+div[role="document"] > section::before {
   display: block;
   height: map-get($spacing-factor, "xs") + $navHeight;
   margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
@@ -62,3 +62,20 @@ a[name]:not([href])::before {
     margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
   }
 }
+
+
+// External links
+// ––––––––––––––––––––
+
+div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  // Source: https://feathericons.com/
+  $caret-icon-color: "808080"; // Without '#' !important
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: .66rem auto;
+  content: '';
+}