فهرست منبع

feat(style): dynamically theme SVGs

And refactor HL shortcode to use semantic <mark>
George Cushen 4 سال پیش
والد
کامیت
3b32a8188f
3فایلهای تغییر یافته به همراه13 افزوده شده و 6 حذف شده
  1. 9 3
      wowchemy/assets/scss/wowchemy/_base.scss
  2. 3 2
      wowchemy/assets/scss/wowchemy/_dark.scss
  3. 1 1
      wowchemy/layouts/shortcodes/hl.html

+ 9 - 3
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 {

+ 3 - 2
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 {

+ 1 - 1
wowchemy/layouts/shortcodes/hl.html

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