add a logo, changes to css, format older articles

1 files changed, 112 insertions, 57 deletions

diff --git a/prose.css b/prose.css
index db54f26..3a053c5 100644
--- a/prose.css
+++ b/prose.css
@@ -1,6 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');
 @import url('style.css');
 
+:root {
+    --sx: 1rem;
+    --lx: 3rem;
+    --lh: 1.5;
+}
+
 article {
     width: 100%;
     max-width: 75ch;
@@ -11,13 +16,22 @@ article {
 
 p {
     color: #e6e6e6;
-    font-family: 'Gelasio';
-    line-height: 1.3;
+    font-family: var(--fontSerif);
+    line-height: var(--lh);
     font-size: 1.1rem;
+    margin: var(--sx) 0;
+}
+
+sup {
+    font-size: 0.8em;
+    line-height: 0;
+    vertical-align: baseline;
+    position: relative;
+    top: -0.5em;
 }
 
 a {
-    color: #4DA3FF;
+    color: #49f;
     text-decoration: none;
 
     &:hover {
@@ -27,8 +41,8 @@ a {
 
 li {
     color: #e6e6e6;
-    font-family: 'Gelasio';
-    line-height: 1.3;
+    font-family: var(--fontSerif);
+    line-height: var(--lh);
     font-size: 1.1rem;
 
     &::marker {
@@ -36,29 +50,12 @@ li {
     }
 }
 
-h1 {
-    color: #e6e6e6;
-    line-height: 1.15;
-    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 {
+h1, h2, h3 {
     color: #e6e6e6;
-    line-height: 1;
-    margin-top: 2rem;
-    margin-bottom: 0;
-    font-family: 'Gelasio';
+    margin-top: var(--lx);
+    margin-bottom: var(--sx);
+    font-family: var(--fontSerif);
+    line-height: var(--lh);
     font-weight: 600;
 }
 
@@ -71,15 +68,14 @@ hr {
   height: 2px;
   border: 0;
   border-top: 2px solid #888;
-  margin: 1em 0;
+  margin: var(--sx) 0;
   padding: 0;
 }
 
 time {
     display: block;
-    font-family: 'Gelasio';
+    font-family: var(--fontSerif);
     color: #888;
-    margin-top: 0.5rem;
 }
 
 @media (max-width: 1000px) {
@@ -94,7 +90,7 @@ time {
 }
 
 details {
-    font-family: 'Gelasio';
+    font-family: var(--fontSerif);
     color: #888;
 
     summary::marker {
@@ -103,13 +99,18 @@ details {
 }
 
 table {
+    --tsx_x: calc(var(--sx) / 3);
+    --tsx_y: calc(var(--sx) / 1.5);
+
+    font-family: var(--fontSerif);
+    margin: var(--sx) 0;
+
     border-collapse: collapse;
-    margin: 0 auto;
     th {
         color: #e6e6e6;
         text-align: center;
         border: solid;
-        padding: 0 1.5ch;
+        padding: var(--tsx_x) var(--tsx_y);
         border-width: 0 0 1px 0;
 
         &[scope="row"] {
@@ -117,40 +118,94 @@ table {
         }
     }
     td {
-        color: #00ff78;
+        color: #6e7;
         text-align: center;
-        padding: 0 1.5ch;
+        padding: var(--tsx_x) var(--tsx_y);
     }
 }
 
-code .path {
-    color: #888;
+math {
+    font-family: var(--fontMath);
+    font-size: 1.2rem;
+    transform: translateZ(0);
+
+    msub > :nth-child(2) {
+        transform: translateY(-0.2em);
+        font-size: 0.8rem;
+    }
 }
 
-/* inline code */
+/* CODEBLOCKS */
 code {
-    color: #00ff78;
-    font-family: 'Roboto Mono';
+    font-size: 0.95rem;
+    color: #e6e6e6;
+    white-space: pre;
+    font-family: 'Fira Code', monospace;
+
+    kw   { color: #49f; }
+    ty   { color: #4d9; }
+    fn   { color: #7bf; }
+    mac  { color: #d69; }
+    str  { color: #6e7; }
+    num  { color: #9c9; }
+    com  { color: #888; }
+    prop { color: #8cf; }
+    mod  { color: #bcd; }
+    id   { color: inherit; }
 }
 
-/* CODEBLOCKS */
 pre {
-    color: #00ff78;
-    font-family: 'Roboto Mono';
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-sizing: border-box;
 
-    code {
-        color: #e6e6e6;
+    margin: var(--sx) 0;
+    line-height: var(--lh);
+}
+
+/* HEADER */
+header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto auto;
+    gap: var(--sx);
+
+    .header-logo-link {
+        display: block;
+        height: 100%;
+        aspect-ratio: 1;
+
+        background-color: #e6e6e6;
+
+        mask-image: url("/Logo.svg");
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
     }
 
-    kw   { color: #6cb8ff; }   /* keywords */
-    ty   { color: #4ec9b0; }   /* types */
-    fn   { color: #dcdcaa; }   /* functions */
-    mac  { color: #c586c0; }   /* macros */
-    str  { color: #ce9178; }   /* strings */
-    num  { color: #b5cea8; }   /* numbers */
-    com  { color: #7f848e; font-style: italic; }
-    prop { color: #9cdcfe; }   /* fields */
-    mod  { color: #e6e6e6; }   /* modules */
-    id   { color: inherit; }   /* local variables */
-}
+    .header-logo-link:hover {
+        background-color: #49f;
+    }
+
+    .header-info {
+        min-width: 0;
+        align-self: center;
 
+        h1 {
+            line-height: 1;
+            margin: 0;
+        }
+    }
+
+    time {
+        line-height: var(--lh);
+        margin: 0;
+    }
+
+    hr {
+        margin: 0;
+        grid-column: 1 / -1;
+        width: 100%;
+    }
+}
\ No newline at end of file