chore(front): updates to hovers, shadows, gradients, colors, and inte…

…ractions

front/src/lib/styles/base/colors-dark.css

@@ -5,11 +5,14 @@
   --light: #fce2b2ff;
   --light-5: #fce2b20c;
   --light-10: #fce2b219;
-  --turkey-red: #a60800ff;
+  --orange: #f6aa1cff;
+  --orange-100: #ffecc8ff;
   --blistre: #2e1e0fff;
   --celestial: #e3f6ffff;
+  --celestial-a90: #e3f6ffe5;
+  --celestial-a75: #e3f6ffbf;
   --celestial-a30: #e3f6ff4c;
-  --grape: #5a34bdff;
+  --grape: #231151ff;
   --eerie-black: #1a2018ff;
   --oxford-blue: #0e0f24ff;
   --rich-black: #0f0f1cff;

front/src/lib/styles/base/colors-light.css

@@ -6,7 +6,6 @@
   --lemon: #f1f0ccff;
   --lemon-50: #fdfdeeff;
   --jasper: #cd533bff;
-  --orange: #f6aa1cff;
   --sand: #fc9f5bff;
   --green: #5aff15ff;
   --blue: #4062bbff;

front/src/lib/styles/base/layout.css

@@ -154,11 +154,9 @@ body.ready .header.scroll-transition {
         transition:
           border 0.5s,
           color 0.5s;
-        color: rgba(var(--text-accent-rgb), 0.77);
-        &:hover,
-        &:focus {
-          border-bottom-color: rgb(var(--highlight-rgb));
-          color: rgba(var(--text-accent-rgb), 1);
+        border-bottom: thin solid;
+        &.cc-link {
+          border: none;
         }
       }
       img {

front/src/lib/styles/base/theme.css

@@ -41,13 +41,27 @@
   --clr-neut-800-rgb: 44, 44, 44;
   --clr-neut-900-rgb: 11, 11, 11;
   --clr-neut-rgb: var(--clr-primary-900-rgb);
+
+  --rim-light-bg: linear-gradient(
+    3deg,
+    var(--bg-clr) 33%,
+    var(--bg-clr) 77%,
+    var(--rim-clr) 100%
+  );
+  --rim-light-mask-bg: linear-gradient(3deg, transparent, var(--rim-clr));
+
+  :focus-visible {
+    outline: thin dashed var(--highlight-clr);
+  }
 }
 
 @layer utilities {
   .dg--light-theme {
     --bg-clr: var(--lemon-50);
     --fg-clr: var(--violet);
     --shadow-color: var(--sunshine-shadow-clr);
+    --rim-clr: var(--sunshine);
+    --highlight-clr: var(--jasper);
 
     .nav-home {
       &:hover {
@@ -146,15 +160,26 @@
         color: var(--jasper);
       }
     }
+
+    .syntax-highlighter {
+      box-shadow: var(--shadow-elevation-medium);
+    }
   }
 
   /* -----------------------
   ---------- Dark Theme ----
   ----------------------- */
   .dg--dark-theme {
-    --fg-clr: var(--celestial);
+    --fg-clr: var(--moon);
     --bg-clr: var(--rich-black);
     --shadow-color: var(--moonshine-shadow-clr);
+    --rim-clr: var(--moonshine);
+    --highlight-clr: var(--orange);
+
+    .nav-home,
+    .nav-link {
+      color: var(--celestial-a75);
+    }
 
     .nav-home {
       &:hover {
@@ -191,6 +216,19 @@
       background-color: var(--fg-clr);
     }
 
+    .bio,
+    .footer {
+      a {
+        border-bottom-color: var(--celestial-a75);
+        color: var(--celestial-a75);
+        &:hover,
+        &:focus {
+          border-bottom-color: var(--highlight-clr);
+          color: var(--celestial);
+        }
+      }
+    }
+
     .bio-picture {
       filter: sepia(100%) saturate(43%) brightness(77%) hue-rotate(133deg);
     }
@@ -203,69 +241,153 @@
       }
     }
 
-    .hero-wrap {
-      background-color: linear-gradient(
-        3deg,
-        var(--bg-clr) 0%,
-        var(--bg-clr) 33%,
-        var(--moonshine) 100%
-      );
-      &::before {
-        background: linear-gradient(3deg, transparent, var(--moonshine));
-      }
-      .hero {
-        filter: brightness(77%);
-      }
-    }
-
     .posts-grid {
       .post-item {
         filter: brightness(77%);
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:active {
+          filter: brightness(100%);
+        }
       }
       .post-link {
-        background-color: linear-gradient(
-          3deg,
-          var(--bg-clr) 0%,
-          var(--bg-clr) 33%,
-          var(--moonhine) 100%
-        );
+        background-color: var(--rim-light-bg);
         &::before {
-          background: linear-gradient(3deg, transparent, var(--moonshine));
+          background: var(--rim-light-mask-bg);
         }
-        span {
+        .link-bg {
           color: white;
         }
+        &:hover,
+        &:focus,
+        &:focus,
+        &:focus-visible,
+        &:active {
+          .link-bg {
+            background-color: rgba(var(--clr-neut-900-rgb), 0.6);
+          }
+        }
       }
     }
 
+    .hero-wrap {
+      background-color: var(--rim-light-bg);
+      &::before {
+        background: var(--rim-light-mask-bg);
+      }
+      .hero {
+        filter: brightness(77%);
+      }
+    }
+
+    .privacy,
     .post,
-    .transition-elastic-fly-container {
-      background: linear-gradient(
-        3deg,
-        var(--bg-clr) 0%,
-        var(--oxford-blue) 33%,
-        var(--moonshine) 100%
-      );
-      background-color: var(--bg-clr);
+    .category-posts-transition-container {
+      box-shadow: var(--shadow-elevation-high);
+      background: var(--rim-light-bg), var(--bg-clr);
       &::before {
-        background: linear-gradient(3deg, transparent, var(--moonshine));
+        background: var(--rim-light-mask-bg);
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      h7 {
+        color: var(--celestial-a90);
       }
     }
 
+    .privacy .date mark {
+      background-color: var(--highlight-clr);
+    }
+
     .post {
       .summary::first-letter {
         color: var(--orange);
       }
+      .pubdate {
+        color: var(--celestial-a75);
+      }
+      .post-title {
+        text-shadow: 0 -0.11rem 1.5rem hsl(var(--shadow-color) / 5);
+      }
+      .post-article {
+        a:not(.heading-anchor-link) {
+          border-bottom: 1px solid var(--celestial-a75);
+          color: var(--celestial-a75);
+          &:hover,
+          &:focus {
+            border-bottom: 1px solid var(--orange);
+            color: var(--celestial);
+          }
+        }
+        .heading-anchor-link {
+          &:hover,
+          &:focus,
+          &:focus-visible,
+          &:active {
+            color: var(--orange);
+          }
+        }
+      }
+      code {
+        color: var(--celestial-a90);
+      }
+      blockquote {
+        ::before,
+        ::after {
+          color: var(--celestial-a75);
+        }
+      }
     }
 
-    .syntax-highlighter {
-      background-color: var(--clr-neut-900);
+    .page-navigation-list {
+      a {
+        color: var(--celestial-a75);
+        &:hover,
+        &:focus,
+        &:focus,
+        &:focus-visible,
+        &:active,
+        &.active {
+          color: var(--celestial);
+        }
+        &.active::after {
+          color: var(--orange);
+        }
+      }
     }
 
-    .syntax-highlighter .title,
-    .syntax-highlighter .title {
-      background-color: var(--blistre);
-      color: var(--light);
+    .syntax-highlighter {
+      box-shadow: var(--shadow-elevation-medium);
+      background-color: var(--oxford-blue);
+      &::before {
+        background: var(--rim-light-mask-bg);
+      }
+      .title,
+      .language,
+      .code-copy-btn {
+        color: var(--celestial-a30);
+      }
+      .title,
+      .language {
+        background-color: var(--grape);
+      }
+      &:hover,
+      &:focus {
+        .title,
+        .language,
+        .code-copy-btn {
+          color: var(--celestial-a75);
+          &:hover,
+          &:focus-visible {
+            color: var(--light);
+          }
+        }
+      }
     }
 
     .icon-code-copied {

front/src/lib/styles/base/tw-components.css

@@ -44,12 +44,12 @@
   .dg--photo-vignette-dark {
     transition-property: background, color, text-shadow, border-color,
       box-shadow;
-    box-shadow: inset 0 0 5rem rgba(var(--black), 0.88);
+    box-shadow: inset 0 0 9rem 3rem rgba(var(--black), 0.77);
     border: 1px solid rgba(var(--foreground-rgb-faded), 0.23);
     overflow: hidden;
     &:hover,
     &:focus {
-      box-shadow: inset 0 0 0.5rem rgba(var(--black), 0.18);
+      box-shadow: inset 0 0 9rem 3rem rgba(var(--black), 0.33);
       border-color: rgb(var(--background-saturated));
     }
   }