From 6efcdae21b383da2d832027d31d0c2506e52925c Mon Sep 17 00:00:00 2001
From: Lucas Amaro <lucasrla@users.noreply.github.com>
Date: Wed, 13 Apr 2022 15:26:15 -0300
Subject: [PATCH] Split headings selectors to prevent PurgeCSS from deleting
 color var

---
 _posts/2021-01-02-basic-html-elements.md |  2 +-
 _sass/_main.scss                         | 43 +++++++++++++-----------
 _sass/base/_color.scss                   |  7 ++--
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/_posts/2021-01-02-basic-html-elements.md b/_posts/2021-01-02-basic-html-elements.md
index d4b720a..9cd6901 100644
--- a/_posts/2021-01-02-basic-html-elements.md
+++ b/_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)._
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/_sass/_main.scss b/_sass/_main.scss
index 8c5aaef..b8fc86f 100644
--- a/_sass/_main.scss
+++ b/_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 {
diff --git a/_sass/base/_color.scss b/_sass/base/_color.scss
index 58854b9..4988889 100644
--- a/_sass/base/_color.scss
+++ b/_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);