Split headings selectors to prevent PurgeCSS from deleting color var

_posts/2021-01-02-basic-html-elements.md

@@ -130,4 +130,4 @@ Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur e
 
 {% include divider.html %}
 
-_Most content from this example post was taken from [Poole](https://github.com/poole/poole/blob/master/_posts/2020-04-02-example-content.md) by [@mdo](https://twitter.com/mdo)._
+<p class="muted center" markdown="span">The content from this sample post was heavily inspired by [Poole](https://github.com/poole/poole/blob/master/_posts/2020-04-02-example-content.md).</p>

_sass/_main.scss

@@ -87,38 +87,42 @@ tfoot > tr > td {
 
 /* -------------- HEADINGS -------------- */
 
-h1, h2, h3, h4, h5, h6 {
-  color: color("heading");
-  line-height: $line-height;
-}
-
 h1 {
-  font-size: 1.6em;
-  // line-height: normal;
   margin: 0.75em 0 2em 0;
+  color: color("headings");
+  font-size: 1.6em;
+  line-height: $line-height;  
 }
 
 h2 {
-  font-size: 1.3em;
-  // line-height: normal;
   margin-top: 3em;
+  color: color("headings");
+  font-size: 1.3em;
+  line-height: $line-height;  
 }
 
 h3 {
+  margin-top: 2em;
+  color: color("headings");
   font-size: 1.2em;
-  // line-height: normal;
   font-variant-caps: all-small-caps;
-  letter-spacing: $letter-spacing-sm;
   font-weight: 500;
-  margin-top: 2em;
+  letter-spacing: $letter-spacing-sm;
+  line-height: $line-height;  
 }
 
 h4 {
+  margin-top: 1em;
+  color: color("headings");
   font-size: 1em;
-  // line-height: normal;
   font-style: italic;
   font-weight: normal;
-  margin-top: 1em;
+  line-height: $line-height;  
+}
+
+h5, h6 {
+  color: color("headings");
+  line-height: $line-height;
 }
 
 nav + h2 {
@@ -237,11 +241,12 @@ footer {
 
 div.footnotes::before {
   content: "Footnotes";
-  // font-variant: all-small-caps;
-  color: color("heading");
-  font-weight: 600;
-  letter-spacing: $letter-spacing-sm;
-  // font-size: 1.1em;
+  // analogous to <h4>
+  color: color("headings");
+  font-size: 1em;
+  font-style: italic;
+  font-weight: normal;
+  line-height: $line-height;  
 }
 
 .footnotes {

_sass/base/_color.scss

@@ -60,7 +60,7 @@
   @include define-color("txt", #111);
   @include define-color("txt-muted", lighten(#111, 27%)); // #565656
 
-  @include define-color("heading", darken(#111, 10%)); // #000
+  @include define-color("headings", darken(#111, 10%)); // #000
   // which is equivalent to `hsla-color("txt", $lightness: -10%);` in a css rule
 
   @include define-color("accent", #f0f097);
@@ -88,10 +88,11 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include define-color("txt", #dedede);
+    // @include define-color("txt", #dedede);
+    @include define-color("txt", #d1d1d1);
     @include define-color("txt-muted", darken(#dedede, 20%)); // #ababab
 
-    @include define-color("heading", lighten(#ccc, 10%)); // #e6e6e6
+    @include define-color("headings", lighten(#ccc, 10%)); // #e6e6e6
 
     // @include define-color("accent", #6666004d);
     // @include define-color("accent", #c2a200);