From c171e339488601a89488493718c8a3ce82629ff8 Mon Sep 17 00:00:00 2001
From: AleksandrHovhannisyan <aleksandrhovhannisyan@gmail.com>
Date: Fri, 2 Dec 2022 08:03:06 -0500
Subject: [PATCH] Clean up navbar css and mobile-lg styles

---
 src/_includes/navbar.html                     |  2 +-
 src/_pages/art.html                           |  4 +-
 src/assets/styles/art.scss                    | 19 ++++++----
 src/assets/styles/partials/_tokens.scss       |  2 +-
 .../styles/partials/components/_navbar.scss   | 37 ++++++-------------
 .../styles/partials/global/_global.scss       |  5 ++-
 6 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index ee9e50f6e..6f50a16e8 100644
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -3,7 +3,7 @@
     <nav aria-label="Primary">
       <a href="#page-content" class="screen-reader-only skip-navigation">Skip to content</a>
       <a class="navbar-branding outline-offset" href="/" aria-label="Home page" {% if permalink == "/" %}aria-current="page"{% endif %}>
-        <img src="/assets/images/favicons/favicon-128.png" class="navbar-logo circle" alt="">
+        <img src="/assets/images/favicons/favicon-128.png" class="navbar-logo circle" alt="" width="28" height="28">
         <span>Aleksandr Hovhannisyan</span>
       </a>
       <ul class="navbar-links">
diff --git a/src/_pages/art.html b/src/_pages/art.html
index e3bc9ec91..cf2562528 100644
--- a/src/_pages/art.html
+++ b/src/_pages/art.html
@@ -54,4 +54,6 @@ <h1 class="title">CSS Art</h1>
     {%- endfor -%}
   </ol>
 </main>
-<footer class="artwork-page-footer">&copy; {{ site.author }}, 2019–Present. No pixels were harmed in the production of this site.</footer>
+<footer class="artwork-page-footer">
+  <p>&copy; {{ site.author }}, 2019–Present. No pixels were harmed in the production of this site.</p>
+</footer>
diff --git a/src/assets/styles/art.scss b/src/assets/styles/art.scss
index 1848d6d84..0855ea9a2 100644
--- a/src/assets/styles/art.scss
+++ b/src/assets/styles/art.scss
@@ -47,7 +47,7 @@ html {
     background-size: 90px 90px, 90px 90px, 18px 18px, 18px 18px;
     background-position: -3.6px -3.6px, -3.6px -3.6px, -1.8px -1.8px, -1.8px -1.8px;
 
-    @include tablet {
+    @include tablet-sm {
       &::before,
       &::after {
         content: "";
@@ -86,7 +86,7 @@ html {
         font-size: calc(var(--font-size-multiplier) * #{font-size("4xl")});
         @include font($family: "display", $weight: "regular");
 
-        @include tablet {
+        @include tablet-sm {
           --font-size-multiplier: 2;
           --color-shadow: hsl(0deg 0% 50% / 10%);
         }
@@ -123,7 +123,7 @@ html {
           text-transform: none;
           @include font($family: "cursive", $weight: "regular", $size: "md");
 
-          @include mobile-lg {
+          @include tablet-sm {
             --translate-x: 0;
             --translate-y: -50%;
             --rotation: 2deg;
@@ -144,7 +144,12 @@ html {
       text-align: center;
       @include font($family: "mono", $weight: "medium", $size: "xs");
 
-      @include tablet {
+      > * {
+        max-width: 60ch;
+        margin-inline: auto;
+      }
+
+      @include tablet-sm {
         padding-bottom: spacing("5");
       }
     }
@@ -157,7 +162,7 @@ html {
     left: 0;
     width: 100%;
 
-    @include tablet {
+    @include tablet-sm {
       position: static;
     }
 
@@ -179,7 +184,7 @@ html {
         1px 1px;
       @include font($size: "sm", $family: "mono", $weight: "medium");
 
-      @include tablet {
+      @include tablet-sm {
         @include font($size: "base");
 
         &.with-subtitle {
@@ -218,7 +223,7 @@ html {
         margin-inline-start: auto;
       }
 
-      @include tablet {
+      @include tablet-sm {
         gap: spacing("5");
         overflow-x: unset;
         padding: spacing("0") spacing("5");
diff --git a/src/assets/styles/partials/_tokens.scss b/src/assets/styles/partials/_tokens.scss
index cfeb65bcc..80570e6cb 100644
--- a/src/assets/styles/partials/_tokens.scss
+++ b/src/assets/styles/partials/_tokens.scss
@@ -101,7 +101,7 @@ $tokens: (
   breakpoints: (
     "mobile-min": 360px,
     "mobile": 400px,
-    "mobile-lg": 600px,
+    "mobile-lg": 480px,
     "tablet-sm": 768px,
     "tablet": 896px,
     "desktop": 960px,
diff --git a/src/assets/styles/partials/components/_navbar.scss b/src/assets/styles/partials/components/_navbar.scss
index 74750938d..5be185daa 100644
--- a/src/assets/styles/partials/components/_navbar.scss
+++ b/src/assets/styles/partials/components/_navbar.scss
@@ -5,7 +5,7 @@
   top: 50%;
   transform: translate(#{spacing("-2")}, -50%);
   padding: spacing("-2");
-  color: inherit;
+  background-color: var(--color-navbar-bg);
 }
 
 .navbar {
@@ -21,8 +21,6 @@
     --shadow-navbar: 0 -2px 8px hsl(0deg 0% 0% / 40%);
   }
 
-  --navbar-min-height: #{spacing("10")};
-
   /* Body is a flex container. Without this, the navbar may shrink vertically due to the presence of a horizontal scrollbar. */
   flex-shrink: 0;
   display: flex;
@@ -35,10 +33,13 @@
   padding-block: spacing("-1");
   background-color: var(--color-navbar-bg);
   box-shadow: var(--shadow-navbar);
-  min-height: var(--navbar-min-height);
   overflow-x: auto;
+  // Shared typography styles for all navbar text
+  color: white;
+  @include font($size: "sm");
 
   a {
+    color: inherit;
     text-decoration: none;
   }
 
@@ -49,13 +50,10 @@
     flex: 1 0 auto;
     // Relatively position the navbar for the skip link
     position: relative;
-    // Shared typography styles for all navbar text
-    color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: spacing("-2");
-    @include font($size: "sm");
+    gap: spacing("0");
   }
 
   &-container {
@@ -70,21 +68,14 @@
 
   &-branding {
     display: none;
-    color: inherit;
     @include font($family: "body", $weight: "bold");
   }
 
   &-links {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     gap: spacing("-2");
-    flex: 1 0 auto;
-  }
-
-  &-item {
     text-align: center;
-    flex-grow: 1;
   }
 
   &-link {
@@ -93,13 +84,11 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    color: inherit;
-  }
-}
 
-.skip-navigation:focus,
-.navbar-link:is([aria-current="page"], :hover, :focus) {
-  background-color: var(--color-navbar-bg-focus);
+    &:is([aria-current="page"], :hover, :focus) {
+      background-color: var(--color-navbar-bg-focus);
+    }
+  }
 }
 
 .lamp {
@@ -223,7 +212,7 @@
 
 @include mobile-lg {
   .navbar {
-    --navbar-min-height: #{spacing("11")};
+    padding-block: spacing("0");
     position: unset;
     box-shadow: none;
 
@@ -237,10 +226,6 @@
       align-items: center;
     }
 
-    &-links {
-      flex: 0 1 auto;
-    }
-
     &-item.home {
       display: none;
     }
diff --git a/src/assets/styles/partials/global/_global.scss b/src/assets/styles/partials/global/_global.scss
index 1bde73a3d..a21550ced 100644
--- a/src/assets/styles/partials/global/_global.scss
+++ b/src/assets/styles/partials/global/_global.scss
@@ -2,6 +2,7 @@
 
 @import "../functions";
 @import "../mixins";
+@import "../tokens";
 
 body {
   display: flex;
@@ -15,8 +16,8 @@ body {
 }
 
 #page-content {
-  padding-block-start: clamped(32px, 104px);
-  padding-block-end: clamped(64px, 96px);
+  padding-block-start: clamped(get($tokens, "spacing", "steps", "5"), get($tokens, "spacing", "steps", "12"));
+  padding-block-end: clamped(get($tokens, "spacing", "steps", "10"), get($tokens, "spacing", "steps", "12"));
 }
 
 :is(code, kbd) {