And refactor HL shortcode to use semantic <mark>
@@ -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 {
@@ -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 {
@@ -1 +1 @@
-<span class="markup-quote">{{ .Inner | markdownify | emojify }}</span>
+<mark>{{ .Inner | markdownify | emojify }}</mark>