qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Design improvements for light/dark mode theme.

Browse Source
This commit is contained in:
pheralb
2023-12-17 01:00:39 +00:00
parent eac20137b8
commit 824a83bf35
7 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navbar.svelte
+7 -5
View File
@@ -61,14 +61,16 @@
</div>
</a>
</div>
<div class="flex items-center space-x-7">
<div class="flex items-center space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700">
<div class="flex items-center space-x-0 md:space-x-7">
<div
class="flex items-center md:space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700"
>
{#each externalLinks as link}
<a
href={link.url}
target={link.external ? '_blank' : ''}
class={cn(
'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group',
'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-2 md:pl-3 group',
currentPath === link.url &&
'underline underline-offset-8 decoration-dotted decoration-neutral-500'
)}
@@ -76,13 +78,13 @@
{#if !link.external}
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
{/if}
<span>{link.name}</span>
<span class={cn('hidden md:block', !link.external && 'block')}>{link.name}</span>
{#if link.external}
<svelte:component
this={link.icon}
size={16}
strokeWidth={1.5}
class="ml-1 transition-transform duration-300 group-hover:translate-x-[1px]"
class="ml-1 transition-transform duration-300 group-hover:translate-x-[1px] hidden md:block"
/>
{/if}
</a>