feat: update base stylings

src/scss/base.scss

@@ -40,6 +40,10 @@
   --text-line-height: 1.5;
   --link-inset-box-shadow: 1.5rem;
 
+  --page-background-image: url(@/assets/layered-waves-light.svg);
+  --page-background-image-height: 100vw;
+  --page-background-image-max-height: 50vh;
+
   --paragraph-margin: 1rem;
 
   --textblock-max-width: 34rem;
@@ -53,6 +57,10 @@
   --textblock-padding: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
 
+  --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
+    var(--container-spacing-left-safe);
+  --welcome-headings-text-align: center;
+
   --navigation-flow: row nowrap;
   --navigation-justify: space-evenly;
   --navigation-align: center;
@@ -69,11 +77,12 @@
 
   --navigation-cutout: 0 0
     calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
-  --navigation-cutout-bottom: calc(
+  --navigation-cutout-page-background: calc(
     var(--navigation-size) + env(safe-area-inset-bottom)
   );
+  --navigation-cutout-main: 0;
 
-  --navigation-link-display-hover: none;
+  --navigation-link-display: none;
   --navigation-link-flex: 1 0 var(--navigation-size);
   --navigation-link-justify: center;
   --navigation-link-height: calc(
@@ -112,8 +121,8 @@
 
 /* semantic color variables for this project */
 :root {
-  --page-background-image: url(@/assets/layered-waves-light.svg);
   --color-background: var(--theme-c-antique-white);
+  --color-background-body: var(--theme-c-walnut-brown);
 
   --color-border: var(--theme-c-crystal-blue);
 
@@ -180,12 +189,17 @@
 
 @media (min-width: 50em) {
   :root {
+    --page-background-image-height: 20vw;
+    --page-background-image-max-height: 100vh;
+
     --color-table-color-cell-width: 10rem;
     --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-cutout-page-background: 0;
+    --navigation-cutout-main: var(--navigation-cutout);
 
     --navigation-flow: column nowrap;
     --navigation-justify: flex-start;
@@ -202,7 +216,7 @@
       var(--navigation-size) * 3.75 + env(safe-area-inset-left)
     );
 
-    --navigation-link-display-hover: block;
+    --navigation-link-display: block;
     --navigation-link-flex: 0 0 --navigation-size;
     --navigation-link-justify: flex-start;
     --navigation-link-height: var(--navigation-size);
@@ -215,6 +229,15 @@
   }
 }
 
+@media (min-width: 55em) {
+  :root {
+    --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
+      var(--container-spacing-left-safe);
+    --welcome-headings-align-items: center;
+    --welcome-headings-text-align: left;
+  }
+}
+
 @media (min-width: 64em) {
   :root {
     --timeline-stroke-length: calc(100% - var(--timeline-circle-size));

src/scss/main.scss

@@ -18,7 +18,7 @@
 body {
   min-height: 100vh;
   color: var(--color-text);
-  background: var(--color-background);
+  background: var(--color-background-body);
   transition: color 0.5s, background-color 0.5s;
   line-height: var(--text-line-height);
 
@@ -32,7 +32,10 @@ body {
 }
 
 main {
+  background: var(--color-background);
+  margin: var(--navigation-cutout-main);
   transition: 0.4s;
+  z-index: 0;
 
   &:after {
     display: block;
@@ -40,10 +43,11 @@ main {
     content: "";
     position: sticky;
     right: 0;
-    bottom: var(--navigation-cutout-bottom);
+    bottom: var(--navigation-cutout-page-background);
     left: 0;
 
-    height: 13rem;
+    height: var(--page-background-image-height);
+    max-height: var(--page-background-image-max-height);
 
     background: var(--page-background-image);
     background-repeat: no-repeat;
@@ -58,10 +62,6 @@ section {
   max-width: var(--textblock-max-width);
   margin: 0 auto;
   padding: var(--textblock-padding);
-
-  p {
-    text-align: justify;
-  }
 }
 
 h1,
@@ -81,6 +81,7 @@ h1 {
 }
 
 p {
+  text-align: justify;
   margin: var(--paragraph-margin) 0;
 }