qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +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
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 {
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 {

2
src/app.html
View File

@ -29,7 +29,7 @@
</head>
<body
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>
</body>

12
src/components/navbar.svelte
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>

4
src/components/svgCard.svelte
View File

@ -58,7 +58,9 @@
loading="lazy"
/>
<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
href={`/directory/${svgInfo.category.toLowerCase()}`}
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'
)}
>
<div class="px-6 py-6">
<div
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"
<div class="md:px-6 md:py-6">
<nav
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
href="/"
@ -64,7 +64,7 @@
<span>{category}</span>
</a>
{/each}
</div>
</nav>
<div></div>
<a
href="https://twitter.com/pheralb_"
@ -82,7 +82,7 @@
</a>
</div>
</aside>
<div class="md:ml-56 pb-6">
<div class="ml-0 md:ml-56 pb-6">
<Transition pathname={data.pathname}>
<slot />
</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%)]"
/>
<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
</div>

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

@ -6,9 +6,9 @@
<Container>
<a href="/">
<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>
</div>
</a>