Typst

static/style.css

@@ -0,0 +1,92 @@
+html {
+    font-family: "Libertinus Serif", serif;
+    font-size: 18pt;
+    line-height: 1.5em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Mojangles", "monospace";
+}
+
+code {
+    font-family: "Libertinus Mono", monospace;
+}
+
+math {
+    font-family: "Libertinus Math", math;
+}
+
+main, header, footer {
+    max-width: 80ch;
+    margin-inline: auto;
+}
+
+li > * {
+    margin-block: 0;
+}
+
+.callout {
+    display: block;
+    margin-inline: -2ch;
+    padding-inline: 2ch;
+    padding-block: 1ch;
+    border-radius: 4pt;
+    border-width: 1pt;
+    border-style: solid;
+
+    color: var(--mode-color);
+    border-color: rgba(from var(--mode-color) r g b);
+    background-color: rgba(from var(--mode-color) r g b / 5%);
+}
+
+.callout::before {
+    content: var(--mode-name);
+    padding-inline-end: 1ch;
+    font-family: "Mojangles", "monospace";
+    display: inline-block;
+    float: left;
+}
+
+.callout > p:first-child {
+    display: inline;
+}
+
+.note {
+    --mode-name: "Note";
+}
+
+.caution {
+    --mode-name: "Caution";
+}
+
+.tip {
+    --mode-name: "Tip";
+}
+
+@media (prefers-color-scheme: dark) {
+    .note {
+        --mode-color: cyan;
+    }
+
+    .caution {
+        --mode-color: coral;
+    }
+
+    .tip {
+        --mode-color: springgreen;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .note {
+        --mode-color: blue;
+    }
+
+    .caution {
+        --mode-color: orangered;
+    }
+
+    .tip {
+        --mode-color: seagreen;
+    }
+}