1 files changed, 63 insertions, 3 deletions
diff --git a/public/main.css b/public/main.css
index 772f896..8f9bb7d 100644
--- a/public/main.css
+++ b/public/main.css
@@ -6,7 +6,67 @@
 @source "../**/*.go";
 @source "../**/*.templ";
 
-@keyframes pop { 50% { transform: scale(1.3); } }
-[data-copied] svg { animation: pop 0.25s; }
+@keyframes pop {
+  50% {
+    transform: scale(1.3);
+  }
+}
+[data-copied] svg {
+  animation: pop 0.25s;
+}
 
-@keyframes bump { 50% { transform: scale(1.03); } }
+@keyframes bump {
+  50% {
+    transform: scale(1.03);
+  }
+}
+
+@plugin "@tailwindcss/typography";
+
+.prose {
+  --tw-prose-body: var(--text);
+  --tw-prose-headings: var(--primary);
+  --tw-prose-links: var(--secondary);
+  --tw-prose-bold: var(--text);
+  --tw-prose-bullets: var(--alt);
+  --tw-prose-counters: var(--alt);
+  --tw-prose-hr: var(--alt);
+  --tw-prose-quotes: var(--text);
+  --tw-prose-quote-borders: var(--alt);
+  --tw-prose-captions: var(--alt);
+  --tw-prose-code: var(--extra);
+  --tw-prose-pre-code: var(--text);
+  --tw-prose-pre-bg: rgb(0 0 0 / 0.3);
+  --tw-prose-th-borders: var(--alt);
+  --tw-prose-td-borders: var(--alt);
+}
+
+.js .footnotes {
+  display: none;
+}
+
+.sidenotes {
+  position: fixed;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.sidenote {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  gap: 1ch;
+  padding: 0.4rem 0.6rem;
+  border: 0.1rem solid var(--alt);
+  background: var(--background);
+  font-family: var(--font-normal);
+  font-size: 14px;
+  line-height: 1.4;
+  pointer-events: auto;
+}
+
+.sidenote-num {
+  flex-shrink: 0;
+  color: var(--secondary);
+}