fonts

css/base/variables.css

@@ -13,9 +13,9 @@
 
 :root {
   /*--font-sans: "metropolis", sans-serif;*/
-  --font-sans: "metropolis", sans-serif;
+  --font-sans: "Barlow", sans-serif;
   /*--font-serif: "Lora", "georgia", serif;*/
-  --font-serif: "Lora", "georgia", serif;
+  --font-serif: "Alegreya", "georgia", serif;
 
   /* Typography helpers. */
   --font-size-base: 1rem;
@@ -47,8 +47,13 @@
   --grid-col-count: 6;
   --grid-gap: var(--sp);
   --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
-  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+  --grid-full-width: calc(
-  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
+    100vw - var(--sp2) - var(--scrollbar-width)
+  ); /* Width of the entire grid. */
+  --grid-col-width: calc(
+    (var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) /
+      var(--grid-col-count)
+  );
 
   /* Layout helpers */
   --sp0-25: calc(0.25 * var(--sp));
@@ -76,16 +81,56 @@
    */
   --color--gray-hue: 201;
   --color--gray-saturation: 15%;
-  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
+  --color--gray-5: hsl(
-  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
+    var(--color--gray-hue),
-  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
+    var(--color--gray-saturation),
-  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
+    5%
-  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
+  ); /* Black */
-  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
+  --color--gray-10: hsl(
-  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
+    var(--color--gray-hue),
-  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
+    var(--color--gray-saturation),
-  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
+    11%
-  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%);
+  );
+  --color--gray-20: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    20%
+  ); /* Black 2 */
+  --color--gray-45: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    44%
+  ); /* Gray Dark */
+  --color--gray-60: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    57%
+  ); /* Gray medium */
+  --color--gray-65: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    63%
+  ); /* Black 4 */
+  --color--gray-70: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    72%
+  ); /* Gray medium 2 */
+  --color--gray-90: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    88%
+  ); /* Gray light */
+  --color--gray-95: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    93%
+  ); /* Gray light 1 */
+  --color--gray-100: hsl(
+    var(--color--gray-hue),
+    var(--color--gray-saturation),
+    97%
+  );
 
   /**
    * Primary colors.
@@ -95,11 +140,55 @@
   --color--primary-hue: 202;
   --color--primary-saturation: 79%;
   --color--primary-lightness: 50;
-  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
+  --color--primary-30: hsl(
-  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
+    var(--color--primary-hue),
-  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
+    var(--color--primary-saturation),
-  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+    calc(
-  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness))))));
+      1% *
+        (
+          var(--color--primary-lightness) -
+            (0.36 * var(--color--primary-lightness))
+        )
+    )
+  );
+  --color--primary-40: hsl(
+    var(--color--primary-hue),
+    var(--color--primary-saturation),
+    calc(
+      1% *
+        (
+          var(--color--primary-lightness) -
+            (0.24 * var(--color--primary-lightness))
+        )
+    )
+  ); /* Blue dark */
+  --color--primary-50: hsl(
+    var(--color--primary-hue),
+    var(--color--primary-saturation),
+    calc(1% * var(--color--primary-lightness))
+  ); /* Blue medium */
+  --color--primary-60: hsl(
+    var(--color--primary-hue),
+    var(--color--primary-saturation),
+    calc(
+      1% *
+        (
+          var(--color--primary-lightness) +
+            (0.24 * (100 - var(--color--primary-lightness)))
+        )
+    )
+  ); /* Blue bright */
+  --color--primary-80: hsl(
+    var(--color--primary-hue),
+    var(--color--primary-saturation),
+    calc(
+      1% *
+        (
+          var(--color--primary-lightness) +
+            (0.85 * (100 - var(--color--primary-lightness)))
+        )
+    )
+  );
 
   /**
    * Variables specific to text.
@@ -159,7 +248,9 @@
 
 @media ((((min-width: 60rem)))) {
   :root {
-    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+    --grid-full-width: calc(
+      100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)
+    );
   }
 }