chore: Update nav design

kiosion · Nov 12, 2023 · 2be6e87 · 2be6e87
1 parent 6e50cd4
commit 2be6e87
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 18 deletions.
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -34,10 +34,10 @@
   @import '@styles/mixins';
 
   div {
-    @apply relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8 pt-16 transition-[padding-top] duration-300;
+    @apply relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8 pt-14 transition-[padding-top] duration-300;
 
     @include media(md) {
-      @apply pt-24;
+      @apply pt-20;
     }
   }
 </style>
diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
@@ -59,7 +59,7 @@
         </span>
         <span
           class="pointer-events-none mb-0.5 hidden select-none font-code text-2xl text-accent-light/80 transition-[color] dark:text-accent-dark/80 md:block"
-          aria-hidden="true">|</span
+          aria-hidden="true">/</span
         >
         <div class="hidden flex-row items-center justify-start gap-5 md:flex" role="menu">
           {#each NAV_LINKS as link}
@@ -79,32 +79,34 @@
   @import '@styles/mixins';
 
   div[role='none'] {
-    @apply fixed left-4 right-4 top-4 z-10 flex items-center justify-center;
+    @apply fixed left-0 right-0 top-0 z-10 flex items-center justify-center border-b border-dark/20 bg-light/50 backdrop-blur-lg transition-[border,background-color];
 
-    @include media(md) {
-      @apply left-6 right-6 top-6;
+    &:hover,
+    &:focus-visible,
+    &:focus-within {
+      @apply bg-light/60;
     }
   }
 
   nav {
-    @apply flex w-full max-w-5xl flex-row items-center justify-between gap-5 rounded-md border border-dark/20 bg-light/50 px-6 py-3 backdrop-blur-lg transition-[border,background-color];
+    @apply flex w-full flex-row items-center justify-between gap-5 px-6 py-3;
 
     @include media(md) {
       @apply flex py-2;
     }
+    @include media(lg) {
+      @apply max-w-4xl;
+    }
     @include media(xl) {
-      @apply max-w-6xl;
+      @apply max-w-5xl;
     }
-
-    &:hover,
-    &:focus-visible,
-    &:focus-within {
-      @apply bg-light/60;
+    @include media(2xl) {
+      @apply max-w-6xl;
     }
   }
 
   :global(.dark) {
-    nav {
+    div[role='none'] {
       @apply border-light/20 bg-black/50;
 
       &:hover,

diff --git a/svelte-app/src/styles/_colors.scss b/svelte-app/src/styles/_colors.scss
@@ -3,5 +3,5 @@ $white: #f5f5f5;
 $dark: #242b33;
 $light: #efefef;
 
-$accent-light: #2c6af0;
-$accent-dark: #c5fa71;
+$accent-light: #3b75f5;
+$accent-dark: #affa71;
diff --git a/svelte-app/tailwind.config.cjs b/svelte-app/tailwind.config.cjs
@@ -12,8 +12,8 @@ module.exports = {
         dark: '#242b33',
         light: '#efefef',
         accent: {
-          light: '#2c6af0',
-          dark: '#c5fa71'
+          light: '#3b75f5',
+          dark: '#affa71'
         }
       },
       fontFamily: {