Improvements

- Edit code colors and add a color for comments
- Add ::selection
- Small edits for cards: last-child and overflow
- Add card-sectioning (header, footer, pre)
- Change global hue for Primary color
- Remove border for pre
- Add querySelectorAll() for theme-switcher.js
- Update docs

docs/scss/components/_card-code.scss

@@ -1,52 +0,0 @@
-/**
- * Docs: Code inside <article>
- */
-
-// Custom spacings
-article pre {
-  margin-top: $spacing-block;
-  margin-bottom: -$spacing-gutter*2;
-
-  @if map-get($breakpoints, "sm") and
-    map-get($spacing-factor, "sm") {
-
-    @media (min-width: map-get($breakpoints, "sm")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
-      margin: -$spacing-block*map-get($spacing-factor, "sm");
-      margin-top: $spacing-block*map-get($spacing-factor, "sm");
-    }
-  }
-
-  @if map-get($breakpoints, "md") and
-    map-get($spacing-factor, "md") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "md")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
-      margin: -$spacing-block*map-get($spacing-factor, "md");
-      margin-top: $spacing-block*map-get($spacing-factor, "md");
-    }
-  }
-
-  @if map-get($breakpoints, "lg") and
-    map-get($spacing-factor, "lg") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "lg")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
-      margin: -$spacing-block*map-get($spacing-factor, "lg");
-      margin-top: $spacing-block*map-get($spacing-factor, "lg");
-    }
-  }
-
-  @if map-get($breakpoints, "xl") and
-    map-get($spacing-factor, "xl") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "xl")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
-      margin: -$spacing-block*map-get($spacing-factor, "xl");
-      margin-top: $spacing-block*map-get($spacing-factor, "xl");
-    }
-  }
-}

docs/scss/content/_code.scss

@@ -83,10 +83,6 @@ pre {
     background: var(--invalid);
     content: 'Bulky';
   }
-
-  pre {
-    border-color: var(--invalid);
-  }
 }
 
 [data-theme="valid"] {
@@ -94,10 +90,6 @@ pre {
     background: var(--valid);
     content: 'Great';
   }
-
-  pre {
-    border-color: var(--valid);
-  }
 }
 
 section[title="love"] [data-theme="invalid"] {

docs/scss/layout/_aside.scss

@@ -53,9 +53,10 @@ main > aside {
     border-bottom: none;
 
     summary {
+      color: var(--h3);
+      font-size: 14px;
       font-weight: 300;
       text-transform: uppercase;
-      color: var(--h3);
 
       &::after {
         display: none;

docs/scss/pico.docs.scss

@@ -21,5 +21,5 @@
 
 // Components
 @import "components/nav";
-@import "components/card-code";
+//@import "components/card-code";
 @import "components/theme-switcher";