From 97478ba98175f335251f6c5875a3e91fdcded145 Mon Sep 17 00:00:00 2001
From: Dan Grebb <dan@dgrebb.com>
Date: Sat, 23 Sep 2023 00:14:12 -0400
Subject: [PATCH] chore(front): updates code component hovers; z-indexes; adds
 post-title light

---
 front/src/lib/styles/base/colors-dark.css     |  1 +
 front/src/lib/styles/base/colors-light.css    |  1 +
 front/src/lib/styles/base/theme.css           | 29 +++++++++++++++----
 front/src/lib/styles/components/Code/Code.css |  8 ++++-
 .../src/lib/styles/components/posts-grid.css  |  2 +-
 front/src/lib/styles/global.css               |  5 ++--
 front/src/lib/styles/pages/post.css           |  2 +-
 7 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/front/src/lib/styles/base/colors-dark.css b/front/src/lib/styles/base/colors-dark.css
index ae8ace7d2..bcce0d266 100644
--- a/front/src/lib/styles/base/colors-dark.css
+++ b/front/src/lib/styles/base/colors-dark.css
@@ -13,6 +13,7 @@
   --celestial: #e3f6ffff;
   --celestial-a90: #e3f6ffe5;
   --celestial-a75: #e3f6ffbf;
+  --celestial-a50: #e3f6ff7f;
   --celestial-a30: #e3f6ff4c;
   --grape: #231151ff;
   --eerie-black: #1a2018ff;
diff --git a/front/src/lib/styles/base/colors-light.css b/front/src/lib/styles/base/colors-light.css
index a8121d5bf..0cc23d746 100644
--- a/front/src/lib/styles/base/colors-light.css
+++ b/front/src/lib/styles/base/colors-light.css
@@ -19,6 +19,7 @@
   --violet: #0b0033ff;
   --violet-a90: #0b0033e5;
   --violet-a75: #0b0033bf;
+  --violet-a50: #0b00337f;
   --violet-a30: #0b00334c;
   --blacktop: #18020cff;
 }
diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
index 8eb111727..318be95de 100644
--- a/front/src/lib/styles/base/theme.css
+++ b/front/src/lib/styles/base/theme.css
@@ -215,7 +215,15 @@
         color: var(--violet-a75);
       }
       .post-title {
-        color: var(--fg-clr);
+        -webkit-background-clip: text;
+        -moz-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        text-shadow:
+          0 0 0 var(--violet),
+          0.019em -0.011em 0 var(--sunshine),
+          0.015em -0.011em 2px rgba(255, 255, 255, 0.5),
+          -1px 1px 2px rgba(0, 0, 0, 0.33);
       }
       .post-article {
         .heading-anchor-link {
@@ -264,9 +272,11 @@
       &:hover,
       &:focus {
         .title,
-        .language,
-        .code-copy-btn {
+        .language {
           color: var(--violet-a75);
+        }
+        .code-copy-btn {
+          color: var(--violet-a50);
           &:hover,
           &:active,
           &:focus-visible {
@@ -587,7 +597,7 @@
         color: var(--celestial-a75);
       }
       .post-title {
-        text-shadow: 0 -0.11rem 1.5rem hsl(var(--shadow-color) / 5);
+        /* text-shadow: 0 -0.11rem 1.5rem hsl(var(--shadow-color) / 5); */
       }
       .post-article {
         .heading-anchor-link {
@@ -636,14 +646,21 @@
       &:hover,
       &:focus {
         .title,
-        .language,
-        .code-copy-btn {
+        .language {
           color: var(--celestial-a75);
           &:hover,
           &:focus-visible {
             color: var(--light);
           }
         }
+        .code-copy-btn {
+          color: var(--celestial-a50);
+          &:hover,
+          &:active,
+          &:focus-visible {
+            color: var(--light);
+          }
+        }
       }
 
       > pre {
diff --git a/front/src/lib/styles/components/Code/Code.css b/front/src/lib/styles/components/Code/Code.css
index 8af93b6a9..ebb5ca5a2 100644
--- a/front/src/lib/styles/components/Code/Code.css
+++ b/front/src/lib/styles/components/Code/Code.css
@@ -44,6 +44,8 @@
       'Liberation Mono', 'Courier New', monospace; /* 1 */
 
     &.full {
+      top: 1px;
+      right: 1px;
       border-top-right-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
       width: 100%;
@@ -62,10 +64,14 @@
       padding-right: 2.77rem;
     }
   }
+  .title,
+  .language,
+  .code-copy-btn {
+    z-index: 9;
+  }
   .code-copy-btn {
     position: absolute;
     right: 0;
-    z-index: 7;
     transition: color 333ms;
     padding: 0.75rem;
     line-height: 1.6;
diff --git a/front/src/lib/styles/components/posts-grid.css b/front/src/lib/styles/components/posts-grid.css
index 41f10da73..215d75234 100644
--- a/front/src/lib/styles/components/posts-grid.css
+++ b/front/src/lib/styles/components/posts-grid.css
@@ -19,7 +19,7 @@
     grid-column: span 6;
     z-index: 1;
     cursor: pointer;
-    box-shadow: var(--shadow-elevation-low);
+    box-shadow: var(--shadow-elevation-medium);
     background-position: center top;
     background-size: cover;
     background-repeat: no-repeat;
diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
index 16d50e0d9..c6f1c03da 100644
--- a/front/src/lib/styles/global.css
+++ b/front/src/lib/styles/global.css
@@ -79,7 +79,7 @@ html {
     (-moz-touch-enabled: 1),
     (pointer: coarse) {
     overflow: auto;
-    scrollbar-gutter: stable both-edges;
+    scrollbar-gutter: stable;
   }
 }
 
@@ -92,11 +92,12 @@ body {
     md:text-lg;
   position: relative;
   transition: scrollbar-color 1s;
+  padding-left: 14px;
   height: 100vh;
   min-height: 100vh;
   overflow: auto;
   scroll-behavior: smooth;
-  scrollbar-gutter: stable both-edges;
+  scrollbar-gutter: stable;
   color: var(--fg-clr);
   @media (hover: none),
     (hover: on-demand),
diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
index a3c329b6d..c15a3df3e 100644
--- a/front/src/lib/styles/pages/post.css
+++ b/front/src/lib/styles/pages/post.css
@@ -88,7 +88,7 @@
         }
       }
       &.loaded {
-        z-index: 5;
+        z-index: 18;
       }
     }
   }