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

🛠️ Add dark/light mode.

Browse Source
This commit is contained in:
pheralb
2023-03-20 10:30:32 +00:00
parent 89a34ee595
commit 7911c6718e
5 changed files with 95 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+25 -17
View File
@@ -18,45 +18,53 @@
// Toaster:
import { Toaster } from 'svelte-french-toast';
// Components for all pages:
import Transition from '@/components/transition.svelte';
import Container from '@/components/container.svelte';
import Theme from '@/components/theme.svelte';
</script>
<main class="min-h-screen bg-dark font-sans text-mini text-white">
<main class="min-h-screen bg-light font-sans text-mini dark:bg-dark dark:text-white">
<nav
class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-800 md:fixed md:top-0 md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
>
<div class="items-center px-6 py-6">
<div class="mb-3 border-b border-neutral-700/40 pb-3">
<a href="/">
<div class="flex items-center space-x-2 duration-150 hover:text-neutral-300">
<h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.0.0</p>
</div>
</a>
<div class="px-6 py-6">
<div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
<div class="flex items-center justify-between">
<a href="/">
<div class="flex items-center space-x-2 duration-150 hover:text-neutral-300">
<h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.0.0</p>
</div>
</a>
<Theme />
</div>
<p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs for web</p>
</div>
<div
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-700/40 pb-3 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 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"
>
{#each categories as category}
<a
href={`/directory/${category.toLowerCase()}`}
class={`flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${
data.pathname === `/directory/${category.toLowerCase()}` ? 'bg-neutral-700/30' : ''
data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30'
: ''
}`}
data-sveltekit-preload-data>{category}</a
>
{/each}
</div>
<div
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-700/40 pb-3 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
>
<a
href="https://github.com/pheralb/svgl#-getting-started"
target="_blank"
class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
>
<span>Submit logo</span>
<ArrowUpRight size={16} />
@@ -64,7 +72,7 @@
<a
href="https://github.com/pheralb/svgl#-getting-started"
target="_blank"
class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
>
<span>Repository</span>
<ArrowUpRight size={16} />
@@ -73,7 +81,7 @@
<a
href="https://twitter.com/pheralb_"
target="_blank"
class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
class="mt-5 flex items-center space-x-2 duration-100 hover:text-white dark:text-neutral-400"
>
<Heart color="#991b1b" size={18} weight={'duotone'} />
<div class="flex items-center space-x-1">
@@ -88,7 +96,7 @@
<Container>
<a href="/">
<div
class="flex items-center space-x-2 text-neutral-400 transition-colors duration-100 hover:text-white"
class="flex items-center space-x-2 duration-100 dark:text-neutral-400 dark:hover:text-white"
>
<ArrowLeft size={20} />
<span>Back to home</span>