fix: Sidebar link styles, timeline item styles

kiosion · Oct 14, 2024 · 1977347 · 1977347
1 parent f86d8d1
commit 1977347
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
@@ -23,7 +23,7 @@
     ><ChevronRightSmall /></span
   >
   <div class="content">
-    <h3 class="pb-1 pt-1 text-base font-bold text-dark transition-colors dark:text-white">
+    <h3 class="pt-1 text-base font-bold text-dark transition-colors dark:text-white">
       {title}
     </h3>
     <p
@@ -64,7 +64,7 @@
     }
 
     &:before {
-      @apply absolute border-l border-dashed border-neutral-200 transition-colors;
+      @apply absolute border-l border-dashed border-neutral-300 transition-colors;
 
       content: '';
       top: #{$bulletTopMargin + $bulletSize + $lineGap};

diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
@@ -36,6 +36,7 @@
       ? `${link.slice(0, 50 - 3)}...`
       : link ?? $t('Visit')}
   placement={tooltipPlacement}
+  delay={[500, 0]}
 >
   <svelte:element
     this={type}

diff --git a/svelte-app/src/components/sidebar/sidebar-link.svelte b/svelte-app/src/components/sidebar/sidebar-link.svelte
@@ -3,9 +3,8 @@
   import { navigating, page } from '$app/stores';
   import { isLocalized, linkTo, t } from '$lib/i18n';
 
-  import SidebarTooltip from '$components/sidebar/sidebar-tooltip.svelte';
-  import Tooltip from '$components/tooltips/tooltip.svelte';
-
+  // import SidebarTooltip from '$components/sidebar/sidebar-tooltip.svelte';
+  // import Tooltip from '$components/tooltips/tooltip.svelte';
   import type { NAV_LINKS } from '$lib/consts';
 
   export let link: (typeof NAV_LINKS)[number],
@@ -37,23 +36,24 @@
   })();
 </script>
 
-<Tooltip placement="bottom-end">
+<!-- <Tooltip placement="bottom-end" offset={0} delay={[500, 0]}>
   <svelte:fragment slot="content">
     <SidebarTooltip {link} />
-  </svelte:fragment>
-  <a
-    href={link.url}
-    class="focus-outline-sm -mx-2 block w-[calc(100%+16px)] rounded-lg px-3 py-1.5 text-md text-neutral-700 transition-colors dark:text-neutral-200"
-    class:active={isActive}
-    class:font-semibold={isActive}
-    aria-current={isActive ? 'page' : undefined}
-    data-sveltekit-preload-code
-    on:click={handleAction}
-    on:keydown={(e) => e.key === 'Enter' && handleAction(e)}
-  >
-    {$t(link.name)}
-  </a>
-</Tooltip>
+  </svelte:fragment> -->
+<a
+  href={link.url}
+  class="focus-outline-sm -mx-2 block w-[calc(100%+16px)] rounded-lg px-3 py-1.5 text-md text-neutral-700 transition-colors dark:text-neutral-200"
+  class:active={isActive}
+  class:font-semibold={isActive}
+  aria-current={isActive ? 'page' : undefined}
+  data-sveltekit-preload-code
+  on:click={handleAction}
+  on:keydown={(e) => e.key === 'Enter' && handleAction(e)}
+>
+  {$t(link.name)}
+</a>
+
+<!-- </Tooltip> -->
 
 <style lang="scss">
   @import '@styles/colors';