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.

Browse Source
This commit is contained in:
pheralb 2023-12-17 00:20:11 +00:00
parent 85ddb3fdb8
commit faeb193531
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/navbar.svelte
View File

@ -1,4 +1,6 @@
<script> <script lang="ts">
export let currentPath: string;
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import Logo from './logo.svelte'; import Logo from './logo.svelte';
import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte'; import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte';
@ -37,6 +39,8 @@
external: true external: true
} }
]; ];
console.log(currentPath);
</script> </script>
<nav <nav
@ -53,7 +57,7 @@
<div class="flex items-center space-x-2 hover:opacity-80 transition-opacity"> <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
<svelte:component this={Logo} /> <svelte:component this={Logo} />
<span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span> <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
<p class="text-neutral-500 hidden md:block">v4.0.0</p> <p class="text-neutral-500 hidden md:block font-mono">v4</p>
</div> </div>
</a> </a>
</div> </div>
@ -63,7 +67,11 @@
<a <a
href={link.url} href={link.url}
target={link.external ? '_blank' : ''} target={link.external ? '_blank' : ''}
class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group" class={cn(
'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group',
currentPath === link.url &&
'underline underline-offset-8 decoration-dotted decoration-neutral-500'
)}
> >
{#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" />

2
src/routes/+layout.svelte
View File

@ -26,7 +26,7 @@
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
</script> </script>
<Navbar /> <Navbar currentPath={data.pathname} />
<main> <main>
<aside <aside
class={cn( class={cn(

2
src/routes/+page.svelte
View File

@ -84,7 +84,7 @@
<div class="flex items-center justify-end mb-4"> <div class="flex items-center justify-end mb-4">
<button <button
class={cn( class={cn(
'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium', 'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-80 transition-opacity',
filteredSvgs.length === 0 && 'hidden' filteredSvgs.length === 0 && 'hidden'
)} )}
on:click={() => sort()} on:click={() => sort()}

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-sm font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800" 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"
> >
beta beta
</div> </div>