Use a 25px grid

4 files changed, 35 insertions, 34 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;
diff --git a/static/img/selfie.png b/static/img/selfie.png
index d50ef8f..f9940a7 100644
--- a/static/img/selfie.png
+++ b/static/img/selfie.png
diff --git a/static/js/animation.js b/static/js/animation.js
index d78ac8f..c13cd08 100644
--- a/static/js/animation.js
+++ b/static/js/animation.js
@@ -3,10 +3,10 @@ var K=document.querySelector('canvas'),
 X=K.getContext('2d'),F=24,l=-1001,
 u=0,S=Array(~~(z()*2)+3).fill().map(()=>({
  C:~~(z()*10)+4,
- r:30-4*u++, T:z()*.1,
+ r:37.5-4*u++, T:z()*.1,
  R:z()>.25?z()/5-.1:0,
  S:z()>.25?z()*.5+.5:1,
- n:30,t:0,d:1
+ n:37.5,t:0,d:1
 })),Z=matchMedia('(prefers-reduced-motion: reduce)').matches?0:1
 
 X.strokeStyle='#fff'
@@ -21,7 +21,7 @@ px=x+r*cos(a), py=y+r*sin(a)
 X.stroke()
 }
 function d(s) {
- var cx=30,cy=30,{T,d,r,S,n}=s
+ var cx=37.5,cy=37.5,{T,d,r,S,n}=s
  s.n+=T*d
  if (s.n>=r) {
   s.n=r
@@ -38,8 +38,8 @@ function f(t) {
   if(Z)requestAnimationFrame(f)
   var dt=t-l
   if (dt>1000/F) {
-    X.clearRect(0,0,60,60)
-    X.rect(0,0,60,60)
+    X.clearRect(0,0,75,75)
+    X.rect(0,0,75,75)
     X.stroke()
     S.map(d)
     l=t
diff --git a/templates/base.html b/templates/base.html
index d56facd..b82b3c2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -26,7 +26,7 @@
   <body>
     <header>
       <h1>
-        <canvas width="60" height="60" aria-hidden="true"></canvas>
+        <canvas width="75" height="75" aria-hidden="true"></canvas>
         <a href="/">Rubén Beltrán del Río</a>
       </h1>
       <p>✷ Holistic