Adds proper custom callouts

Adds new proper custom callouts, separated from Quartz's source code.
Darakuu · Feb 2, 2024 · de6ed7e · de6ed7e
1 parent 5fa3c47
commit de6ed7e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 27 deletions.
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
@@ -72,9 +72,6 @@ const calloutMapping = {
   example: "example",
   quote: "quote",
   cite: "quote",
-  definition: "def",
-  def: "def",
-  application: "application"
 } as const
 
 function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {

diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
@@ -107,18 +107,6 @@
     --callout-icon: var(--callout-icon-example);
   }
 
-  &[data-callout="application"] {
-    --color: #c1efc1;
-    --border: #c1efc144;
-    --bg: #c1efc110;
-  }
-
-  &[data-callout="def"] {
-    --color: #a01e28;
-    --border: #a01e2866;
-    --bg: #a01e2811;
-  }
-
   &[data-callout="quote"] {
     --color: var(--secondary);
     --border: var(--lightgray);

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -1,20 +1,18 @@
 @use "./base.scss";
 
-.callout[data-callout="application"] {
-    --callout-color: 193, 239, 193;
-    --callout-icon: lucide-wrench;
-}
-
-.callout[data-callout="definition"] {
-    --callout-color: 160, 30, 40;
-    --callout-icon: lucide-book;
-}
-
 .callout[data-callout="def"] {
-    --callout-color: 160, 30, 40;
-    --callout-icon: lucide-book;
+    --color: #a01e28;
+    --border: #a01e2866;
+    --bg: #a01e2811;
+    --callout-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2siPjxwYXRoIGQ9Ik00IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJIMjB2MjBINi41YTIuNSAyLjUgMCAwIDEgMC01SDIwIi8+PC9zdmc+');
 }
 
+.callout[data-callout="application"] {
+    --color: #c1efc1;
+    --border: #c1efc144;
+    --bg: #c1efc110;
+    --callout-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdyZW5jaCI+PHBhdGggZD0iTTE0LjcgNi4zYTEgMSAwIDAgMCAwIDEuNGwxLjYgMS42YTEgMSAwIDAgMCAxLjQgMGwzLjc3LTMuNzdhNiA2IDAgMCAxLTcuOTQgNy45NGwtNi45MSA2LjkxYTIuMTIgMi4xMiAwIDAgMS0zLTNsNi45MS02LjkxYTYgNiAwIDAgMSA3Ljk0LTcuOTRsLTMuNzYgMy43NnoiLz48L3N2Zz4=');
+}
 .article-title {
     font-weight: bold;
     text-decoration: underline;