feat(style): dynamically theme SVGs

And refactor HL shortcode to use semantic <mark>
This commit is contained in:
George Cushen 2021-02-02 23:45:12 +00:00
commit 3b32a8188f
3 changed files with 13 additions and 6 deletions

View file

@ -255,6 +255,11 @@ figcaption.numbered {
counter-increment: captions; counter-increment: captions;
} }
// Dynamically theme SVGs
svg {
fill: currentColor;
}
pre, pre,
code { code {
font-family: $sta-font-mono, monospace; font-family: $sta-font-mono, monospace;
@ -302,9 +307,10 @@ blockquote p:last-child {
} }
} }
.markup-quote { mark,
background-color: transparent; .mark {
background-image: linear-gradient(to bottom, rgba(233, 231, 245, 1), rgba(233, 231, 245, 1)); // Inherit color for dynamic light/dark compatibility.
color: inherit;
} }
.space-below { .space-below {

View file

@ -55,8 +55,9 @@ body.dark,
border-color: rgb(68, 71, 90); border-color: rgb(68, 71, 90);
} }
.dark .markup-quote { .dark mark,
background-image: linear-gradient(to bottom, rgba(233, 231, 245, 0.2), rgba(233, 231, 245, 0.2)); .dark .mark {
background: rgba(233, 231, 245, 0.2);
} }
.dark #MathJax_Zoom { .dark #MathJax_Zoom {

View file

@ -1 +1 @@
<span class="markup-quote">{{ .Inner | markdownify | emojify }}</span> <mark>{{ .Inner | markdownify | emojify }}</mark>