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

scss/components/_card-sectioning.scss

@@ -0,0 +1,145 @@
+/**
+ * Card sectionning (<article> > header, footer|pre)
+ */
+
+article {
+  > header,
+  > footer {
+    background-color: var(--card-sections);
+  }
+  > header,
+  > footer,
+  > pre {
+    margin: -$spacing-gutter;
+    padding: $spacing-block $spacing-gutter;
+
+    @if map-get($breakpoints, "sm") and
+      map-get($spacing-factor, "sm") and
+      $enable-responsive-spacings {
+
+      @media (min-width: map-get($breakpoints, "sm")) {
+        margin: -$spacing-block*map-get($spacing-factor, "sm");
+        padding: $spacing-block ($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")) {
+        margin: -$spacing-block*map-get($spacing-factor, "md");
+        padding: $spacing-block ($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")) {
+        margin: -$spacing-block*map-get($spacing-factor, "lg");
+        padding: $spacing-block ($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")) {
+        margin: -$spacing-block*map-get($spacing-factor, "xl");
+        padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+      }
+    }
+  }
+  > header {
+    margin-top: -$spacing-gutter*2;
+    margin-bottom: $spacing-block;
+
+    @if map-get($breakpoints, "sm") and
+      map-get($spacing-factor, "sm") and
+      $enable-responsive-spacings {
+
+      @media (min-width: map-get($breakpoints, "sm")) {
+        margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
+        margin-bottom: $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")) {
+        margin-top: -($spacing-block*map-get($spacing-factor, "md"));
+        margin-bottom: $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")) {
+        margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
+        margin-bottom: $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")) {
+        margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
+        margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
+      }
+    }
+  }
+  > footer,
+  > pre {
+    margin-top: $spacing-block;
+    margin-bottom: -$spacing-gutter*2;
+
+    @if map-get($breakpoints, "sm") and
+      map-get($spacing-factor, "sm") and
+      $enable-responsive-spacings {
+
+      @media (min-width: map-get($breakpoints, "sm")) {
+        margin-top: $spacing-block*map-get($spacing-factor, "sm");
+        margin-bottom: -($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")) {
+        margin-top: $spacing-block*map-get($spacing-factor, "md");
+        margin-bottom: -($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")) {
+        margin-top: $spacing-block*map-get($spacing-factor, "lg");
+        margin-bottom: -($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")) {
+        margin-top: $spacing-block*map-get($spacing-factor, "xl");
+        margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
+      }
+    }
+  }
+}

scss/components/_card.scss

@@ -7,6 +7,7 @@ article {
   margin-right: -$spacing-gutter;
   margin-left: -$spacing-gutter;
   padding: $spacing-block $spacing-gutter;
+  overflow: hidden;
   background: var(--card-background);
   box-shadow: var(--card-shadow);
 
@@ -53,4 +54,9 @@ article {
       padding: $spacing-block*map-get($spacing-factor, "xl");
     }
   }
+
+  // Remove last-child margin bottom
+  > *:not(footer):not(pre):last-child {
+    margin-bottom: 0;
+  }
 }