chore(front): updates code component hovers; z-indexes; adds post-tit…

…le light
dgrebb · Sep 23, 2023 · 97478ba · 97478ba
1 parent 8f39762
commit 97478ba
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -88,7 +88,7 @@
         }
       }
       &.loaded {
-        z-index: 5;
+        z-index: 18;
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,7 +88,7 @@ @@
             }
           }
           &.loaded {
-            z-index: 5;
+            z-index: 18;
           }
         }
       }
@@ Expand Down @@