1 files changed, 119 insertions, 0 deletions
diff --git a/prose.css b/prose.css
new file mode 100644
index 0000000..a9f6dc1
--- /dev/null
+++ b/prose.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');
+
+html,
+body {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 75ch) minmax(0, 1fr);
+    align-items: start;
+    column-gap: 2rem;
+    padding: 2rem 1.25rem 4rem;
+}
+
+.toc {
+    grid-column: 1;
+    width: min(17rem, 22vw);
+    position: fixed;
+    top: 32px;
+    left: max(0.75rem, calc(50vw - 37.5ch - 20rem));
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+    padding-right: 0.75rem;
+    z-index: 1;
+}
+
+.toc ul {
+    margin: 0;
+    padding-left: 1rem;
+}
+
+.toc li {
+    margin-bottom: 0.35rem;
+}
+
+.content {
+    grid-column: 2;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 0 2rem;
+    max-width: 75ch;
+    height: auto;
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow: visible;
+}
+
+p {
+    color: #e6e6e6;
+    font-family: 'Gelasio';
+    line-height: 1.3;
+    font-size: 1.1rem;
+}
+
+a {
+    color: #4DA3FF;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+a:hover {
+    background-color: #4DA3FF;
+    color: #121212;
+    text-decoration: none;
+}
+
+li::marker {
+    color: #e6e6e6;
+}
+
+h1 {
+    color: #e6e6e6;
+    line-height: 1;
+    margin-bottom: 0;
+    font-family: 'Gelasio';
+    font-weight: 600;
+}
+
+h2 {
+    color: #e6e6e6;
+    line-height: 1;
+    margin-top: 3rem;
+    margin-bottom: 0;
+    font-family: 'Gelasio';
+    font-weight: 600;
+}
+
+h3 {
+    color: #e6e6e6;
+    line-height: 1;
+    margin-top: 2rem;
+    margin-bottom: 0;
+    font-family: 'Gelasio';
+    font-weight: 600;
+}
+
+p.comment {
+    color: #888;
+}
+
+@media (max-width: 1000px) {
+    body {
+        display: block;
+        padding: 1rem 1rem 3rem;
+    }
+
+    .toc {
+        position: static;
+        width: auto;
+        max-height: none;
+        margin-bottom: 1.25rem;
+        padding-right: 0;
+    }
+
+    .content {
+        padding: 0;
+    }
+}