updates custom scss

Darakuu · Feb 19, 2024 · 85722f8 · 85722f8
1 parent a30ca7e
commit 85722f8
Showing 1 changed file with 35 additions and 36 deletions.
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -1,47 +1,46 @@
 @use "./base.scss";
 
-.callout{
-    &[data-callout="def"] {
-        --color: #A01E28;
-        --border: #A01E2844;
-        --bg: #A01E2810;
-      }
+.callout[data-callout="def"] {
+    --color: #a01e28;
+    --border: #a01e2866;
+    --bg: #a01e2811;
+    --callout-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2siPjxwYXRoIGQ9Ik00IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJIMjB2MjBINi41YTIuNSAyLjUgMCAwIDEgMC01SDIwIi8+PC9zdmc+');
+}
 
-    &[data-callout="application"] {
+.callout[data-callout="application"] {
     --color: #c1efc1;
     --border: #c1efc144;
-    --bg: #c1efc120;
-  }
+    --bg: #c1efc110;
+    --callout-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdyZW5jaCI+PHBhdGggZD0iTTE0LjcgNi4zYTEgMSAwIDAgMCAwIDEuNGwxLjYgMS42YTEgMSAwIDAgMCAxLjQgMGwzLjc3LTMuNzdhNiA2IDAgMCAxLTcuOTQgNy45NGwtNi45MSA2LjkxYTIuMTIgMi4xMiAwIDAgMS0zLTNsNi45MS02LjkxYTYgNiAwIDAgMSA3Ljk0LTcuOTRsLTMuNzYgMy43NnoiLz48L3N2Zz4=');
 }
-
 .article-title {
-  font-weight: bold;
-  text-decoration: underline;
-  color: #3aaa74;  
-  font-size: xx-large;
+    font-weight: bold;
+    text-decoration: underline;
+    color: #3aaa74;  
+    font-size: xx-large;
 }
 
 article {
-  :is(h1) {
-      color: #4ca6e6;  
-  }
-  :is(h2) {
-      color: #34daa5;  
-  }
-
-  :is(h3) {
-      color: #36e2e2;  
-  }
-
-  :is(h4) {
-      color: #e3e363;  
-  }
-
-  :is(h5) {
-      color: #e96363;  
-  }
-
-  :is(h6) {
-      color: #e06cc7;  
-  }
+    :is(h1) {
+        color: #4ca6e6;  
+    }
+    :is(h2) {
+        color: #34daa5;  
+    }
+
+    :is(h3) {
+        color: #36e2e2;  
+    }
+
+    :is(h4) {
+        color: #e3e363;  
+    }
+
+    :is(h5) {
+        color: #e96363;  
+    }
+
+    :is(h6) {
+        color: #e06cc7;  
+    }
 }