From b7167f30e7eff6552a766f2c0d8d40b1492affb2 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 29 Sep 2022 02:41:35 +0200
Subject: [PATCH] feat: add new css variables

---
 src/scss/base.scss | 76 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/scss/base.scss b/src/scss/base.scss
index 343ea1b..dd1a3ca 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Arvo&family=Secular+One&&display=swap");
+
 /* theme colors */
 :root {
   --theme-c-desert-sand: #e7c7b1;
@@ -31,8 +33,8 @@
 
 /* general purpose variables */
 :root {
-  --font-family-copy: sans-serif;
-  --font-family-headings: serif;
+  --font-family-copy: "Arvo", sans-serif;
+  --font-family-headings: "Secular One", serif;
 
   --font-size: 18px;
   --text-line-height: 1.5em;
@@ -40,7 +42,7 @@
   --paragraph-margin: 1rem;
 
   --textblock-max-width: 36rem;
-  --refimage-max-width: 36rem;
+  --refimage-max-width: 50rem;
 
   --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
   --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
@@ -50,9 +52,35 @@
   --textblock-padding: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
 
-  --navigation-item-font-size: 1.5rem;
-  --navigation-item-line-height: 3.25rem;
-  --navigation-width: 100vw;
+  --navigation-flow: row nowrap;
+  --navigation-justify: space-evenly;
+  --navigation-align: center;
+  --navigation-position-top: auto;
+  --navigation-position-right: 0;
+  --navigation-position-bottom: 0;
+  --navigation-position-left: 0;
+
+  --navigation-size: 4rem;
+  --navigation-width: 100%;
+  --navigation-width-expanded: auto;
+  --navigation-height: auto;
+  --navigation-padding: 0 0 0 env(safe-area-inset-left);
+
+  --navigation-cutout: 0 0
+    calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
+
+  --navigation-link-display-hover: none;
+  --navigation-link-flex: 1 0 var(--navigation-size);
+  --navigation-link-justify: center;
+  --navigation-link-height: calc(
+    var(--navigation-size) + env(safe-area-inset-bottom)
+  );
+  --navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
+  --navigation-link-icon-size: calc(var(--navigation-size) / 2);
+  --navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
+  --navigation-link-text-font-size: 1.5rem;
+  --navigation-link-box-shadow: inset 0 calc(var(--navigation-size) * -1) 0 0
+    var(--color-router-link);
 
   --timeline-max-width: calc(var(--timeline-circle-size) * 15);
   --timeline-circle-size: 4rem;
@@ -75,6 +103,7 @@
   --table-border-radius: 1rem;
   --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
+  --table-cell-padding: 0.375rem 0.375rem;
 }
 
 /* semantic color variables for this project */
@@ -90,7 +119,7 @@
   --color-link-text-underline: var(--theme-c-text-light);
 
   --color-header-bar: var(--theme-c-deep-oak-translucent);
-  --color-header-bar-title: var(--theme-c-white);
+  --color-header-bar-title: var(--theme-c-text-dark);
 
   --color-navigation-toggle: var(--theme-c-antique-white);
   --color-navigation-background: var(--theme-c-walnut-brown);
@@ -138,10 +167,37 @@
 @media (min-width: 50em) {
   :root {
     --font-size: 20px;
-    --navigation-width: 20rem;
     --color-table-color-cell-width: 10rem;
-    --textblock-padding: auto;
-    --table-outer-spacing: 0;
+    --textblock-padding: 0 var(--container-spacing-right-safe) 0
+      var(--container-spacing-left-safe);
+
+    --navigation-cutout: 0 0 0
+      calc(var(--navigation-size) + env(safe-area-inset-left));
+
+    --navigation-flow: column nowrap;
+    --navigation-justify: flex-start;
+    --navigation-align: stretch;
+    --navigation-position-top: 0;
+    --navigation-position-right: auto;
+    --navigation-position-bottom: 0;
+    --navigation-position-left: 0;
+
+    --navigation-width: calc(
+      var(--navigation-size) + env(safe-area-inset-left)
+    );
+    --navigation-width-expanded: calc(
+      var(--navigation-size) * 3.75 + env(safe-area-inset-left)
+    );
+
+    --navigation-link-display-hover: block;
+    --navigation-link-flex: 0 0 --navigation-size;
+    --navigation-link-justify: flex-start;
+    --navigation-link-height: var(--navigation-size);
+    --navigation-link-padding: 0 0 0 env(safe-area-inset-left);
+    --navigation-link-box-shadow: inset var(--navigation-width-expanded) 0 0 0
+      var(--color-router-link);
+
+    --table-cell-padding: 0.5rem 1rem;
   }
 }