qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-14 09:11:54 +08:00
Code Issues Actions 2 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.css
View File

@ -45,6 +45,18 @@
aside::-webkit-scrollbar-thumb { aside::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color); background: var(--sb-thumb-color);
} }
nav::-webkit-scrollbar {
width: var(--sb-size);
}
nav::-webkit-scrollbar-track {
background: var(--sb-track-color);
}
nav::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
}
} }
@font-face { @font-face {

2
src/app.html
View File

@ -29,7 +29,7 @@
</head> </head>
<body <body
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
class="min-h-screen bg-white font-sans text-mini dark:bg-dark dark:text-white antialiased" class="min-h-screen bg-white font-sans text-mini dark:bg-dark dark:text-white antialiased selection:bg-neutral-200 dark:selection:bg-neutral-700"
> >
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>

12
src/components/navbar.svelte
View File

@ -61,14 +61,16 @@
</div> </div>
</a> </a>
</div> </div>
<div class="flex items-center space-x-7"> <div class="flex items-center space-x-0 md: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 md:space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700"
>
{#each externalLinks as link} {#each externalLinks as link}
<a <a
href={link.url} href={link.url}
target={link.external ? '_blank' : ''} target={link.external ? '_blank' : ''}
class={cn( 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 && currentPath === link.url &&
'underline underline-offset-8 decoration-dotted decoration-neutral-500' 'underline underline-offset-8 decoration-dotted decoration-neutral-500'
)} )}
@ -76,13 +78,13 @@
{#if !link.external} {#if !link.external}
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" /> <svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
{/if} {/if}
<span>{link.name}</span> <span class={cn('hidden md:block', !link.external && 'block')}>{link.name}</span>
{#if link.external} {#if link.external}
<svelte:component <svelte:component
this={link.icon} this={link.icon}
size={16} size={16}
strokeWidth={1.5} 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} {/if}
</a> </a>

4
src/components/svgCard.svelte
View File

@ -58,7 +58,9 @@
loading="lazy" loading="lazy"
/> />
<div class="mb-3 flex flex-col items-center justify-center"> <div class="mb-3 flex flex-col items-center justify-center">
<p class="truncate text-[15px] font-medium text-balance text-center">{svgInfo.title}</p> <p class="truncate text-[15px] font-medium text-balance text-center select-all">
{svgInfo.title}
</p>
<a <a
href={`/directory/${svgInfo.category.toLowerCase()}`} href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a

10
src/routes/+layout.svelte
View File

@ -37,9 +37,9 @@
'border-r border-neutral-200 dark:border-neutral-800' 'border-r border-neutral-200 dark:border-neutral-800'
)} )}
> >
<div class="px-6 py-6"> <div class="md:px-6 md:py-6">
<div <nav
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible" class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
> >
<a <a
href="/" href="/"
@ -64,7 +64,7 @@
<span>{category}</span> <span>{category}</span>
</a> </a>
{/each} {/each}
</div> </nav>
<div></div> <div></div>
<a <a
href="https://twitter.com/pheralb_" href="https://twitter.com/pheralb_"
@ -82,7 +82,7 @@
</a> </a>
</div> </div>
</aside> </aside>
<div class="md:ml-56 pb-6"> <div class="ml-0 md:ml-56 pb-6">
<Transition pathname={data.pathname}> <Transition pathname={data.pathname}>
<slot /> <slot />
</Transition> </Transition>

2
src/routes/api/+page.svelte
View File

@ -25,7 +25,7 @@
class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]" class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
/> />
<div <div
class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono" class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
> >
beta beta
</div> </div>

4
src/routes/directory/[slug]/+layout.svelte
View File

@ -6,9 +6,9 @@
<Container> <Container>
<a href="/"> <a href="/">
<div <div
class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white" class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white group md:mt-2"
> >
<ArrowLeft size={20} /> <ArrowLeft size={20} class="group-hover:-translate-x-[2px] group-hover:duration-200" />
<span>View all</span> <span>View all</span>
</div> </div>
</a> </a>