fix: Misc styles

kiosion · Oct 31, 2023 · 6246e13 · 6246e13
1 parent 49bce4a
commit 6246e13
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 deletions.
diff --git a/svelte-app/src/components/context-menu/menu.svelte b/svelte-app/src/components/context-menu/menu.svelte
@@ -65,12 +65,12 @@
 
 <style lang="scss">
   div {
-    @apply fixed z-20 grid min-w-[14rem] overflow-hidden rounded-lg border border-dark/40 bg-light/50 py-2 text-dark backdrop-blur-md;
+    @apply fixed z-20 grid min-w-[14rem] overflow-hidden rounded-lg border border-black/40 bg-light/50 py-2 text-dark backdrop-blur-md;
   }
 
   :global(.dark) {
     div {
-      @apply border-light/40 bg-dark/50 text-light;
+      @apply border-light/40 bg-black/50 text-light;
     }
   }
 </style>
diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
@@ -38,7 +38,7 @@
       <div class="flex flex-row items-center justify-start gap-4 md:gap-5">
         <MenuToggle class="block md:hidden" />
         <!-- <span
-          class="pointer-events-none mb-0.5 block select-none font-code text-3xl text-accent-light/60 transition-[color] dark:text-accent-dark/60 md:hidden"
+          class="pointer-events-none mb-0.5 block select-none font-code text-3xl text-accent-light/70 transition-[color] dark:text-accent-dark/70 md:hidden"
           aria-hidden="true">~</span
         > -->
         <span class="relative mt-0.5 h-fit w-fit lg:mt-0">
@@ -58,7 +58,7 @@
           </span>
         </span>
         <span
-          class="pointer-events-none mb-0.5 block select-none font-code text-3xl text-accent-light/70 transition-[color] dark:text-accent-dark/70"
+          class="pointer-events-none mb-0.5 hidden select-none font-code text-3xl text-accent-light/70 transition-[color] dark:text-accent-dark/70 md:block"
           aria-hidden="true">~</span
         >
         <div class="hidden flex-row items-center justify-start gap-5 md:flex">
@@ -100,7 +100,7 @@
   }
 
   nav {
-    @apply flex w-full max-w-5xl flex-col items-center justify-center rounded-lg border border-dark/40 bg-light/40 px-6 py-2.5 backdrop-blur-lg transition-[border,background-color];
+    @apply flex w-full max-w-5xl flex-col items-center justify-center rounded-lg border border-dark/40 bg-light/40 px-6 py-3 backdrop-blur-lg transition-[border,background-color];
 
     @include media(md) {
       @apply py-2;

diff --git a/svelte-app/src/components/nav/nav-link.svelte b/svelte-app/src/components/nav/nav-link.svelte
@@ -87,7 +87,7 @@
       @apply text-dark;
     }
     &.mobile {
-      @apply ml-6 w-full;
+      @apply ml-7 w-full;
     }
   }
 

diff --git a/svelte-app/src/components/portable-text/footnote.svelte b/svelte-app/src/components/portable-text/footnote.svelte
@@ -35,7 +35,6 @@
 <span>
   <slot />&nbsp;<sup
     ><a
-      class="decoration-dark-400 dark:decoration-light-500 underline decoration-dotted underline-offset-4"
       href={`#note-${portableText.value._key}`}
       id="src-{portableText.value._key}"
       aria-label="Go to footnote"
@@ -48,3 +47,21 @@
     ></sup
   >
 </span>
+
+<style lang="scss">
+  span {
+    &,
+    sup > a {
+      @apply underline decoration-dark/80 decoration-dotted underline-offset-4;
+    }
+  }
+
+  :global(.dark) {
+    span {
+      &,
+      sup > a {
+        @apply decoration-light/80;
+      }
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/tooltip.svelte b/svelte-app/src/components/tooltip.svelte
@@ -56,10 +56,10 @@
       'backdrop-blur-sm',
       'bg-light/50',
       'text-dark',
-      'dark:bg-dark/50',
+      'dark:bg-black/50',
       'dark:text-light',
       'border',
-      'border-dark/40',
+      'border-black/40',
       'dark:border-light/40',
       'font-code',
       'text-sm'

diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
@@ -156,17 +156,17 @@
 >
   <Nav loaded={appLoaded && !$loading} />
   <ScrollContainer bind:element={scrollContainer}>
+    <!-- Janky but works for now lmao -->
+    {#if $navOpen}
+      <span
+        class="shim"
+        transition:slide={{
+          duration: BASE_ANIMATION_DURATION,
+          easing: circInOut
+        }}
+      />
+    {/if}
     <div>
-      <!-- Janky but works for now lmao -->
-      {#if $navOpen}
-        <span
-          class="shim"
-          transition:slide={{
-            duration: BASE_ANIMATION_DURATION,
-            easing: circInOut
-          }}
-        />
-      {/if}
       <PageTransition pathname={data.pathname}>
         <slot />
       </PageTransition>
@@ -200,17 +200,17 @@
     }
 
     div {
-      @apply relative mt-20;
+      @apply relative mt-16;
 
       width: calc(100% - 2rem);
 
-      // @include media(md) {
-      //   @apply mt-20;
-      // }
+      @include media(md) {
+        @apply mt-20;
+      }
 
-      // @include media(lg) {
-      //   @apply mt-14;
-      // }
+      @include media(lg) {
+        @apply mt-16;
+      }
     }
   }