color vars

css/base/base.css

@@ -27,8 +27,8 @@ html {
 body {
   margin: 0;
   color: var(--color-text-neutral-medium);
-  /*background-color: var(--color--gray-100);*/
+  background-color: var(--color--gray-100);
-  background-color: #ece8e3;
+  /* background-color: #ece8e3; */
   /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");*/
   /*background-position: top left; [> LTR <]*/
 }

css/base/variables.css

@@ -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.
@@ -119,6 +208,10 @@
   --color--red: #e33f1e; /* Red */
   --color--gold: #fdca40; /* Gold */
   --color--green: #3fa21c;
+  /* ============ */
+  --color--blue: #115ca0;
+  --color--red: #e21c21;
+  --color--yellow: #ffd703;
 
   /* Header */
   --header-height-wide-when-fixed: calc(6 * var(--sp));
@@ -159,7 +252,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)
+    );
   }
 }
 

css/components/block.css

@@ -22,13 +22,11 @@
 }
 
 .site-footer .block__title {
-  color: var(--color--gray-65);
+  color: var(--color--white);
 }
 .region--sidebar .block {
-
   /*background: #f6f8f8;*/
   background: #ece8e3;
   padding: 1rem;
   border-radius: 5px;
-
 }

css/components/header-site-branding.css

@@ -29,6 +29,10 @@
     var(--color--primary-40) 78.66%
   );
 }
+.site-header__initial,
+.site-branding {
+  border-bottom: 6px solid var(--color--yellow);
+}
 
 @media (min-width: 31.25rem) {
   .site-branding {
@@ -139,6 +143,7 @@
 }
 .site-branding__slogan {
   color: #d0bca4;
+  color: var(--color--yellow);
   font-size: 1.125rem;
   /*font-size: 1.5rem;*/
 }