Use a 25px grid

1 files changed, 29 insertions, 28 deletions

diff --git a/static/css/style.css b/static/css/style.css
index c00784a..aafabe2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6,6 +6,7 @@
   font-stretch: 75% 100%;
   font-style: normal;
   font-display: swap;
+  size-adjust: 100%;
 }
 
 @font-face {
@@ -26,7 +27,7 @@
   --font-display: 'Libre Caslon', 'Times New Roman', 'Georgia', serif;
   --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --root-font-size: 1rem;
-  --base-grid: 1.25rem;
+  --base-grid: 1.5625rem;
   --radius: 4px;
   --border-width: 1px;
   --outer-radius: calc(var(--radius) - var(--border-width));
@@ -47,11 +48,13 @@ h1,h2,h3,h4 { font-weight: 300 }
 li,p {
   hyphens: auto;
   text-align: justify;
-  transform: translateY(4px);
+  transform: translateY(7px);
 }
 strong {
+  font-family: Helvetica, Arial, sans-serif;
   color: var(--foreground-emphasis);
   font-weight: 700;
+  line-height: 1;
 }
 p { margin-bottom: var(--base-grid); }
 a[role="button"],
@@ -63,7 +66,7 @@ button {
   cursor: pointer;
   font-family: var(--font-body);
   font-size: 1rem;
-  line-height: 1.25;
+  line-height: var(--base-grid)
   font-weight: 700;
   display: inline-block;
   text-decoration: none;
@@ -77,14 +80,14 @@ button {
   }
 
   label {
-    line-height: 1.25;
+    line-height: var(--base-grid);
     cursor: pointer;
   }
 }
 
 .textured {
   h2, p, ul {
-    -webkit-text-stroke: calc(4 * var(--border-width)) var(--background);
+    -webkit-text-stroke: calc(8 * var(--border-width)) var(--background);
     paint-order: stroke fill;
   }
 }
@@ -96,7 +99,7 @@ body {
   color: var(--foreground);
   background: var(--primary-color);
   font-size: var(--root-font-size);
-  line-height: 1.25;
+  line-height: var(--base-grid);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -114,57 +117,55 @@ body {
     position: relative;
 
     h1 {
-      font-size: 2rem;
+      font-size: 1.3125rem;
       flex: 0 0 auto;
-      line-height: 1.25;
+      line-height: var(--base-grid);
 
       @media (max-width: 600px) {
         font-size: 1rem;
-        line-height: 1.25;
       }
     }
 
     p {
       font-size: 4.5rem;
       font-style: italic;
-      line-height: 5rem;
-      margin: 0.5lh auto 0.25lh;
-      transform: translateY(-5px);
+      line-height: 4.6875rem;
+      margin: var(--base-grid) auto var(--base-grid);
+      transform: translateY(12px);
       white-space: pre;
       width: min-content;
 
       @media (max-width: 800px) {
         font-size: 3rem;
-        line-height: 3.75rem;
+        line-height: 3.125rem;
         margin: 1lh auto var(--base-grid);
-        transform: translateY(-7px)
+        transform: translateY(7px)
       }
 
       @media (max-width: 600px) {
         font-size: 2rem;
-        line-height: 1.25;
         margin: 0.75lh auto 0.25lh;
-        transform: translateY(-1px)
+        transform: translateY(1px)
       }
 
       @media (max-width: 360px) {
         font-size: 1rem;
-        margin: 2lh auto 0;
-        transform: translateY(4px);
+        font-size: var(--base-grid);
+        transform: translateY(3px);
       }
     }
 
     a {
       color: #fff;
       display: block;
-      margin-top: 9px;
+      margin-top: 5px;
       text-decoration: none;
       width: min-content;
       word-spacing: 100vw;
 
       @media (max-width: 600px) {
         margin-top: 0;
-        transform: translateY(4px);
+        transform: translateY(6px);
       }
     }
 
@@ -173,12 +174,12 @@ body {
     canvas {
       background: var(--primary-color);
       display: block;
-      height: 60px;
-      width: 60px;
+      height: 75px;
+      width: 75px;
 
       @media (max-width: 600px) {
-        height: 40px;
-        width: 40px;
+        height: 50px;
+        width: 50px;
       }
     }
   }
@@ -195,7 +196,7 @@ main {
 
   h2 {
     font-size: 1.5rem;
-    line-height: 1.6667;
+    line-height: 3.125rem;
     font-family: var(--font-display);
     font-weight: 500;
     transform: translateY(-8px);
@@ -203,7 +204,7 @@ main {
 
   h3 {
     font-size: 1.25rem;
-    line-height: 1;
+    line-height: 1.25;
     font-weight: 500;
     transform: translateY(2px);
     margin: 2lh 0 1lh;
@@ -212,7 +213,7 @@ main {
   h4 {
     font-weight: 500;
     font-size: 1rem;
-    line-height: 1.25;
+    line-height: var(--base-grid);
     transform: translateY(4px);
     margin: 1lh 0;
   }
@@ -372,7 +373,7 @@ footer {
 
   .titlebar {
     border-bottom: var(--border-width) solid #000;
-    padding: calc(3 * var(--border-width)) calc(8 * var(--border-width)) calc(4 * var(--border-width)) ;
+    padding: calc(6 * var(--border-width)) calc(8 * var(--border-width)) calc(6 * var(--border-width)) ;
     line-height: calc(9 * var(--border-width));
     text-align: center;
     font-weight: 700;