Typst

static/index.typ

@@ -0,0 +1,42 @@
+#let fonts = (
+  (src: "/font/Minecraft-Seven_v2.woff2", name: "Mojangles", style: "normal", weight: 400),
+  (src: "/font/LibertinusKeyboard-Regular.woff2", name: "Libertinus Keyboard", style: "normal", weight: 400),
+  (src: "/font/LibertinusMath-Regular.woff2", name: "Libertinus Math", style: "normal", weight: 400),
+  (src: "/font/LibertinusMono-Regular.woff2", name: "Libertinus Mono", style: "normal", weight: 400),
+  (src: "/font/LibertinusSans-Bold.woff2", name: "Libertinus Sans", style: "normal", weight: 700),
+  (src: "/font/LibertinusSans-Italic.woff2", name: "Libertinus Sans", style: "italic", weight: 400),
+  (src: "/font/LibertinusSans-Regular.woff2", name: "Libertinus Sans", style: "normal", weight: 400),
+  (src: "/font/LibertinusSerif-Bold.woff2", name: "Libertinus Serif", style: "normal", weight: 700),
+  (src: "/font/LibertinusSerif-BoldItalic.woff2", name: "Libertinus Serif", style: "italic", weight: 700),
+  (src: "/font/LibertinusSerif-Italic.woff2", name: "Libertinus Serif", style: "italic", weight: 400),
+  (src: "/font/LibertinusSerif-Regular.woff2", name: "Libertinus Serif", style: "normal", weight: 400),
+  (src: "/font/LibertinusSerif-Semibold.woff2", name: "Libertinus Serif", style: "normal", weight: 600),
+  (src: "/font/LibertinusSerif-SemiboldItalic.woff2", name: "Libertinus Serif", style: "italic", weight: 600),
+  (src: "/font/LibertinusSerifDisplay-Regular.woff2", name: "Libertinus Display", style: "normal", weight: 400),
+  (src: "/font/LibertinusSerifInitials-Regular.woff2", name: "Libertinus Initials", style: "normal", weight: 400),
+)
+
+#asset(
+  "font.css",
+  fonts
+    .map(it => {
+      "@font-face{"
+      "font-family:" + repr(it.name) + ";"
+      "font-style:" + str(it.style) + ";"
+      "font-weight:" + str(it.weight) + ";"
+      "src: url(" + repr(it.src) + ");"
+      "}"
+    })
+    .join(" "),
+)
+
+#asset("./style.css", read("style.css", encoding: none))
+
+#for font in fonts {
+  asset(font.src, read("." + font.src, encoding: none))
+}
+
+#let stylesheets = (
+  "/font.css",
+  "/style.css",
+)

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;
+    }
+}