From 3b32a8188f36db288c31724a681174b017889383 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Tue, 2 Feb 2021 23:45:12 +0000
Subject: [PATCH] feat(style): dynamically theme SVGs

And refactor HL shortcode to use semantic <mark>
---
 wowchemy/assets/scss/wowchemy/_base.scss | 12 +++++++++---
 wowchemy/assets/scss/wowchemy/_dark.scss |  5 +++--
 wowchemy/layouts/shortcodes/hl.html      |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/_base.scss b/wowchemy/assets/scss/wowchemy/_base.scss
index a613de39..08251f65 100644
--- a/wowchemy/assets/scss/wowchemy/_base.scss
+++ b/wowchemy/assets/scss/wowchemy/_base.scss
@@ -255,6 +255,11 @@ figcaption.numbered {
   counter-increment: captions;
 }
 
+// Dynamically theme SVGs
+svg {
+  fill: currentColor;
+}
+
 pre,
 code {
   font-family: $sta-font-mono, monospace;
@@ -302,9 +307,10 @@ blockquote p:last-child {
   }
 }
 
-.markup-quote {
-  background-color: transparent;
-  background-image: linear-gradient(to bottom, rgba(233, 231, 245, 1), rgba(233, 231, 245, 1));
+mark,
+.mark {
+  // Inherit color for dynamic light/dark compatibility.
+  color: inherit;
 }
 
 .space-below {
diff --git a/wowchemy/assets/scss/wowchemy/_dark.scss b/wowchemy/assets/scss/wowchemy/_dark.scss
index 7c4ba5c1..f0823ba5 100644
--- a/wowchemy/assets/scss/wowchemy/_dark.scss
+++ b/wowchemy/assets/scss/wowchemy/_dark.scss
@@ -55,8 +55,9 @@ body.dark,
   border-color: rgb(68, 71, 90);
 }
 
-.dark .markup-quote {
-  background-image: linear-gradient(to bottom, rgba(233, 231, 245, 0.2), rgba(233, 231, 245, 0.2));
+.dark mark,
+.dark .mark {
+  background: rgba(233, 231, 245, 0.2);
 }
 
 .dark #MathJax_Zoom {
diff --git a/wowchemy/layouts/shortcodes/hl.html b/wowchemy/layouts/shortcodes/hl.html
index f56cb017..6f344014 100644
--- a/wowchemy/layouts/shortcodes/hl.html
+++ b/wowchemy/layouts/shortcodes/hl.html
@@ -1 +1 @@
-<span class="markup-quote">{{ .Inner | markdownify | emojify }}</span>
\ No newline at end of file
+<mark>{{ .Inner | markdownify | emojify }}</mark>
\ No newline at end of file