fix: improve light mode header background color

Ryaang · Sep 16, 2023 · 2c30969 · 2c30969
1 parent 2d0de06
commit 2c30969
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,7 +8,7 @@
       tabindex="-1"
       :style="cssVariables"
     >
-      <div class="app-banner bg-[#1a1a1a]" />
+      <div class="app-banner bg-ob-screen" />
       <div class="app-banner app-banner-image" :style="headerImage" />
       <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
       <div class="app-banner app-banner-cover" />
@@ -302,9 +302,17 @@ body {
   background: var(--banner-cover);
 }
 
-.theme-light .app-banner-cover {
-  top: 300px;
-  height: 300px;
+.theme-light {
+  .app-banner-cover {
+    top: 300px;
+    height: 300px;
+  }
+
+  .app-banner-screen {
+    @apply blur-0 rounded-none;
+    width: 100%;
+    height: 600px;
+  }
 }
 
 .app-banner-image {
@@ -320,7 +328,7 @@ body {
   @apply blur-[72px] rounded;
   left: 50%;
   transform: translateX(-50%);
-  transition: ease-in-out opacity 500ms;
+  transition: ease-in-out all 500ms;
   z-index: 2;
   opacity: 0.91;
   width: 85%;

diff --git a/src/styles/theme-variables.scss b/src/styles/theme-variables.scss
@@ -116,6 +116,7 @@
         hsla(225, 40%, 96%, 0.951) 84.5%,
         hsla(225, 40%, 96%, 0.987) 91.9%,
         var(--background-primary));
+  --app-screen-bg: #1a1a1a;
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(232, 57, 255, 0.06),
     0 10px 10px -5px rgba(53, 11, 59, 0.1);
@@ -235,6 +236,7 @@
         hsla(0, 0%, 10%, 0.951) 84.5%,
         hsla(00, 0%, 10%, 0.987) 91.9%,
         var(--background-primary));
+  --app-screen-bg: var(--background-primary);
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(11, 42, 59, 0.35),
     0 10px 10px -5px rgba(11, 42, 59, 0.14);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,7 +21,8 @@ export default {
         'ob-deep': {
           800: 'var(--background-secondary)',
           900: 'var(--background-primary)'
-        }
+        },
+        'ob-screen': 'var(--app-screen-bg)'
       },
       boxShadow: {
         ob: 'var(--accent-shadow)'