refactor: callouts

chrisgrieser · Oct 26, 2024 · d625ca5 · d625ca5
1 parent 812f92e
commit d625ca5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 102 deletions.
diff --git a/source/03 callouts.css b/source/03 callouts.css
@@ -0,0 +1,86 @@
+.callout {
+	--callout-icon: circle; /* default callout icon (lucid icon) */
+	--icon-stroke: 2px;
+	--callout-border-width: 1.5px;
+	--callout-padding: 0;
+	--callout-radius: var(--radius-s);
+	background-color: rgb(var(--callout-color), 11%);
+}
+
+.HyperMD-callout.HyperMD-callout.HyperMD-callout.HyperMD-callout {
+	background-color: var(--bg4);
+}
+
+.cm-hmd-callout.cm-hmd-callout.cm-hmd-callout {
+	color: var(--secondary-accent);
+}
+
+.callout-title {
+	padding: 3px 6px;
+	background-color: rgb(var(--callout-color), 15%);
+	border-bottom: var(--callout-border-width)
+		/* stylelint-disable-next-line color-function-notation */
+		solid rgb(var(--callout-color), var(--callout-border-opacity));
+}
+
+.HyperMD-callout,
+.callout-title-inner {
+	font-weight: 700;
+}
+
+.callout-content {
+	padding: 2px 8px;
+}
+
+.callout-title-inner,
+.callout-icon {
+	margin-right: 6px;
+}
+
+.callout-title,
+body .callout-icon .svg-icon {
+	color: var(--text-muted);
+	stroke-width: 3px;
+}
+
+/* interaction of callouts with other markdown syntax */
+.callout-content :is(ul, p, ol) {
+	margin: 6px 0;
+	line-height: 1.4em;
+}
+
+.callout-content li {
+	margin: 5px 0;
+	line-height: 1.1em;
+}
+
+.callout-content.callout-content ul {
+	padding-left: 20px;
+	margin-top: 5px;
+}
+
+.callout-content p + p {
+	margin-top: 12px;
+}
+
+.callout ol {
+	padding-inline-start: 1.85em;
+	margin-top: 4px;
+	margin-bottom: 0;
+}
+
+.callout ol li::marker {
+	color: var(--text-gray);
+}
+
+.callout.callout.callout :is(code, pre) {
+	background-color: var(--bg1);
+}
+
+.callout-content .contains-task-list:only-child {
+	padding-inline-start: 0;
+}
+
+.callout-content .contains-task-list:only-child .task-list-item-checkbox {
+	margin-inline-start: 0;
+}
diff --git a/source/03 markdown.css b/source/03 markdown.css
@@ -624,108 +624,6 @@ blockquote code {
 	line-height: 1.4;
 }
 
-/* ───────────────────────────────────────────────── */
-/** Callouts
-──────────────────────────────────────────────────── */
-.callout {
-	/* default callout icon */
-	--callout-icon: circle;
-	--icon-stroke: 2px;
-	--sidenote-callout-width: 35%;
-	--callout-border-width: 1.5px;
-	--callout-padding: 0;
-	--callout-radius: var(--radius-s);
-	--callout-blend-mode: var(--highlight-mix-blend-mode);
-	--callout-title-size: inherit;
-	background-color: rgb(var(--callout-color), 11%);
-}
-
-.callout :is(h1, h2, h3, h4, h5, h6) {
-	font-family: var(--font-interface);
-}
-
-.HyperMD-callout.HyperMD-callout.HyperMD-callout.HyperMD-callout {
-	padding-top: 2px;
-	padding-bottom: 2px;
-	font-weight: 700;
-	background-color: var(--bg4);
-}
-
-.cm-hmd-callout.cm-hmd-callout.cm-hmd-callout {
-	color: var(--secondary-accent);
-	opacity: 0.8;
-}
-
-.callout-title {
-	padding: 2px 8px 3px;
-	letter-spacing: 0.8px;
-	background-color: rgb(var(--callout-color), 15%);
-	border-bottom: var(--callout-border-width)
-		/* stylelint-disable-next-line color-function-notation */
-		solid rgb(var(--callout-color), var(--callout-border-opacity));
-}
-
-.callout-title-inner {
-	font-weight: 700;
-}
-
-.callout-content {
-	padding: 2px 8px;
-}
-
-.callout-title-inner,
-.callout-icon {
-	margin-right: 6px;
-}
-
-.callout-title,
-body .callout-icon .svg-icon {
-	color: var(--text-muted);
-	stroke-width: 3px;
-}
-
-/* interaction of callouts with other markdown syntax */
-.callout-content :is(ul, p, ol) {
-	margin: 6px 0;
-	line-height: 1.4em;
-}
-
-.callout-content li {
-	margin: 5px 0;
-	line-height: 1.1em;
-}
-
-.callout-content.callout-content ul {
-	padding-left: 20px;
-	margin-top: 5px;
-}
-
-.callout-content p + p {
-	margin-top: 12px;
-}
-
-.callout ol {
-	padding-inline-start: 1.85em;
-	margin-top: 4px;
-	margin-bottom: 0;
-}
-
-.callout ol li::marker {
-	color: var(--text-gray);
-}
-
-.callout.callout.callout :is(code, pre) {
-	background-color: var(--bg1);
-}
-
-.callout-content .contains-task-list:only-child {
-	padding-inline-start: 0;
-}
-
-.callout-content .contains-task-list:only-child .task-list-item-checkbox {
-	margin-inline-start: 0;
-}
-
 /* ───────────────────────────────────────────────── */
 /** Strikethroughs
 ──────────────────────────────────────────────────── */