Update Typography

Author: codegaze

assets/css/base.css

@@ -13,7 +13,7 @@ body {
 
 html {
   font-size: calc(var(--cs-base-font-size) * 1px);
-  line-height: 1.35;
+  line-height: var(--cs-line-height-body);
   overflow-y: scroll;
   @media (min-width: 38em) {
     font-size: 18px;
@@ -24,6 +24,7 @@ body {
   font-family: var(--cs-base-font-family-plain);
   color: var(--cs-font-color);
   background-color: var(--cs-bg);
+  font-size: var(--cs-font-size-body);
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }
@@ -54,12 +55,12 @@ a {
 img {
   display: block;
   max-width: 100%;
-  margin: 0 0 1rem;
+  margin: 0 0 var(--cs-space-4);
   border-radius: 5px;
 }
 
 table {
-  margin-bottom: 1rem;
+  margin-bottom: var(--cs-space-4);
   width: 100%;
   font-size: 85%;
   border: 1px solid #e5e5e5;
@@ -68,7 +69,7 @@ table {
 
 td,
 th {
-  padding: 0.25rem 0.5rem;
+  padding: var(--cs-space-2) var(--cs-space-4);
   border: 1px solid #e5e5e5;
 }
 

assets/css/layout.css

@@ -1,19 +1,19 @@
 .layout {
   &__row {
     max-width: calc(820 / var(--cs-base-font-size) * 1rem);
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+    padding-left: var(--cs-space-6);
+    padding-right: var(--cs-space-6);
     margin-left: auto;
     margin-right: auto;
     &--header {
-      margin-top: calc(var(--cs-base-gutter) * 4);
+      margin-top: var(--cs-space-12);
     }
     &--main {
-      margin-top: calc(var(--cs-base-gutter) * 4);
+      margin-top: var(--cs-space-12);
     }
     &--footer {
-      margin-top: 2em;
-      padding-bottom: 1rem;
+      margin-top: var(--cs-space-12);
+      padding-bottom: var(--cs-space-4);
     }
   }
 }

assets/css/posts.css

@@ -1,17 +1,17 @@
 .posts-grid {
   margin: 0 auto;
-  max-width: calc(570/var(--cs-base-font-size) * 1rem);
+  max-width: calc(570 / var(--cs-base-font-size) * 1rem);
   &__item {
     width: 100%;
-    margin-bottom: 2.6rem;
+    margin-bottom: var(--cs-space-10);
   }
   &__summary {
     font-weight: 300;
-    margin-bottom: 0.3rem;
-    line-height: 1.5rem;
+    margin-bottom: var(--cs-space-2);
+    line-height: 1.6;
     color: var(--cs-font-color);
   }
-  &__header{
+  &__header {
     display: flex;
     align-items: baseline;
     h2 {
@@ -28,7 +28,7 @@
     text-decoration: none;
     margin-bottom: 0.2rem;
     -webkit-transition: all 0.25s 0s ease;
-            transition: all 0.25s 0s ease;
+    transition: all 0.25s 0s ease;
     &:hover {
       h3 {
         color: var(--cs-link-active-color);
@@ -38,14 +38,13 @@
   }
   &__meta {
     color: #6f6f6f;
-    font-size: .8em;
+    font-size: 0.8em;
     a {
       color: #e03030;
     }
   }
 }
 
-
 .page,
 .post {
   max-width: 700px;
@@ -60,14 +59,14 @@
   color: #e03030;
 }
 .post__info {
-  margin-bottom: .5rem;
+  margin-bottom: var(--cs-space-2);
   text-align: center;
 }
 
 .post__date {
   display: inline-block;
-  margin-top: -.5rem;
-  margin-bottom: 1rem;
+  margin-top: calc(-1 * var(--cs-space-2));
+  margin-bottom: var(--cs-space-4);
   color: #585858;
 }
 
@@ -77,6 +76,7 @@
 .post__content {
   padding-bottom: 2rem;
   line-height: 1.6rem;
+
   h2 {
     margin-bottom: 0.9rem;
   }
@@ -91,14 +91,14 @@
     padding-bottom: 0.5rem;
   }
   li:before {
-    content: '→';
+    content: "→";
     position: absolute;
     left: 0.8rem;
     font-weight: bold;
   }
 }
 .post__footer {
-  border-top: 1px solid #ABABAB;
+  border-top: 1px solid #ababab;
   padding-top: 1rem;
   font-size: 15px;
 }

assets/css/type.css

@@ -1,51 +1,60 @@
-h1, h2, h3, h4, h5, h6 {
-  margin-bottom: .5rem;
-  font-weight: bold;
-  line-height: 1.25;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--cs-space-3);
+  font-weight: 700;
+  line-height: var(--cs-line-height-headings);
   color: var(--cs-heading-color);
   text-rendering: optimizeLegibility;
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: var(--cs-font-size-h1);
 }
 h2 {
-  margin-top: 2rem;
-  font-size: 1.4rem;
+  margin-top: var(--cs-space-10);
+  font-size: var(--cs-font-size-h2);
 }
 
 h3 {
-  margin-top: 1.5rem;
-  font-size: 1.25rem;
+  margin-top: var(--cs-space-8);
+  font-size: var(--cs-font-size-h3);
 }
 
-h4, h5, h6 {
-  margin-top: 1rem;
-  font-size: 1rem;
+h4,
+h5,
+h6 {
+  margin-top: var(--cs-space-6);
+  font-size: var(--cs-font-size-h4);
 }
 
 p {
   margin-top: 0;
-  margin-bottom: 1.3rem;
-  font-size: 19px;
+  margin-bottom: var(--cs-space-5);
 }
 
 strong {
   color: #303030;
-  font-weight: 500;
+  font-weight: 600;
 }
 
-ul, ol, dl {
+ul,
+ol,
+dl {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cs-space-5);
 }
 
 dt {
   font-weight: bold;
 }
 
 dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 abbr {
@@ -61,30 +70,31 @@ abbr {
 }
 
 blockquote {
-  padding: .5rem 1rem;
-  margin: 0 0rem 1.3rem 0;
+  padding: var(--cs-space-2) var(--cs-space-4);
+  margin: 0 0 var(--cs-space-5) 0;
   color: #7a7a7a;
-  border-left: .25rem solid #e5e5e5;
+  border-left: 0.25rem solid #e5e5e5;
 
   p:last-child {
     margin-bottom: 0;
   }
 
   @media (min-width: 30em) {
-    padding-right: 5rem;
-    padding-left: 1.25rem;
+    padding-right: var(--cs-space-12);
+    padding-left: calc(var(--cs-space-4) + 0.25rem);
   }
 }
 
-
 a[href^="#fn:"],
 a[href^="#fnref:"] {
   display: inline-block;
-  margin-left: .1rem;
+  margin-left: 0.1rem;
   font-weight: bold;
 }
 
+/* reverted link decoration overrides */
+
 .footnotes {
-  margin-top: 2rem;
+  margin-top: var(--cs-space-8);
   font-size: 85%;
 }

assets/css/variables.css

@@ -13,6 +13,29 @@
     sans-serif;
   --cs-base-font-size: 16;
   --cs-base-gutter: 15px;
+
+  /* Typography rhythm */
+  --cs-line-height-body: 1.6;
+  --cs-line-height-headings: 1.2;
+
+  /* Fluid type scale */
+  --cs-font-size-body: clamp(1rem, 0.98rem + 0.2vw, 1.125rem);
+  --cs-font-size-small: clamp(0.875rem, 0.86rem + 0.2vw, 0.95rem);
+  --cs-font-size-h1: clamp(2rem, 1.6rem + 2.5vw, 3rem);
+  --cs-font-size-h2: clamp(1.5rem, 1.3rem + 1.2vw, 2rem);
+  --cs-font-size-h3: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
+  --cs-font-size-h4: clamp(1.125rem, 1.1rem + 0.2vw, 1.25rem);
+
+  /* Spacing scale */
+  --cs-space-1: 0.25rem;
+  --cs-space-2: 0.5rem;
+  --cs-space-3: 0.75rem;
+  --cs-space-4: 1rem;
+  --cs-space-5: 1.25rem;
+  --cs-space-6: 1.5rem;
+  --cs-space-8: 2rem;
+  --cs-space-10: 2.5rem;
+  --cs-space-12: 3rem;
 }
 
 /* @media (prefers-color-scheme: dark) {