update css, rename article, move assets to selfhosted

1 files changed, 52 insertions, 27 deletions

diff --git a/prose.css b/prose.css
index 3a053c5..5e1819a 100644
--- a/prose.css
+++ b/prose.css
@@ -6,9 +6,14 @@
     --lh: 1.5;
 }
 
+body {
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
 article {
     width: 100%;
-    max-width: 75ch;
+    max-width: 68ch;
     margin: 0 auto;
     position: relative;
     z-index: 1;
@@ -20,6 +25,7 @@ p {
     line-height: var(--lh);
     font-size: 1.1rem;
     margin: var(--sx) 0;
+    text-wrap: pretty;
 }
 
 sup {
@@ -37,6 +43,10 @@ a {
     &:hover {
         text-decoration: underline;
     }
+    &:focus-visible {
+        outline: 2px solid #49f;
+        outline-offset: 2px;
+    }
 }
 
 li {
@@ -57,6 +67,19 @@ h1, h2, h3 {
     font-family: var(--fontSerif);
     line-height: var(--lh);
     font-weight: 600;
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.25rem;
 }
 
 .comment {
@@ -83,7 +106,6 @@ time {
         display: block;
         padding: 1rem 1rem 3rem;
     }
-
     .content {
         padding: 0;
     }
@@ -103,9 +125,9 @@ table {
     --tsx_y: calc(var(--sx) / 1.5);
 
     font-family: var(--fontSerif);
-    margin: var(--sx) 0;
-
+    margin: var(--sx) auto;
     border-collapse: collapse;
+
     th {
         color: #e6e6e6;
         text-align: center;
@@ -117,16 +139,17 @@ table {
             border-width: 0 1px 0 0;
         }
     }
+
     td {
-        color: #6e7;
+        color: #e6e6e6;
         text-align: center;
         padding: var(--tsx_x) var(--tsx_y);
+        font-variant-numeric: tabular-nums;
     }
 }
-
 math {
     font-family: var(--fontMath);
-    font-size: 1.2rem;
+    font-size: 1em;
     transform: translateZ(0);
 
     msub > :nth-child(2) {
@@ -134,7 +157,6 @@ math {
         font-size: 0.8rem;
     }
 }
-
 /* CODEBLOCKS */
 code {
     font-size: 0.95rem;
@@ -153,32 +175,37 @@ code {
     mod  { color: #bcd; }
     id   { color: inherit; }
 }
-
 pre {
-    max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    box-sizing: border-box;
-
     margin: var(--sx) 0;
     line-height: var(--lh);
 }
 
-/* HEADER */
+@media (max-width: 1000px) {
+    pre {
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        box-sizing: border-box;
+    }
+}
+
 header {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto auto;
+    display: flex;
+    flex-direction: column;
     gap: var(--sx);
 
-    .header-logo-link {
-        display: block;
-        height: 100%;
-        aspect-ratio: 1;
+    .header-top {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--sx);
+    }
 
+    .header-logo-link {
+        width: 5.5rem;
+        height: 5.5rem;
+        flex-shrink: 0;
         background-color: #e6e6e6;
-
-        mask-image: url("/Logo.svg");
+        mask-image: url("https://static.williamsfam.us.com/Logo.svg");
         mask-size: contain;
         mask-repeat: no-repeat;
         mask-position: center;
@@ -190,7 +217,6 @@ header {
 
     .header-info {
         min-width: 0;
-        align-self: center;
 
         h1 {
             line-height: 1;
@@ -205,7 +231,6 @@ header {
 
     hr {
         margin: 0;
-        grid-column: 1 / -1;
         width: 100%;
     }
-}
\ No newline at end of file
+}