feat: light mode

This commit is contained in:
trafficlunar 2026-02-22 14:12:17 +00:00
parent efdb3102ae
commit eca7077915
9 changed files with 101 additions and 21 deletions

View file

@ -16,7 +16,7 @@ import DockerIcon from "../assets/icons/coding/docker.svg";
import LinuxIcon from "../assets/icons/coding/linux.svg";
---
<section class="mb-0! transition-all duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<section class="mb-0! transition-[translate,opacity] duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<legend>tools</legend>
<!-- separator -->
@ -26,9 +26,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="grow border-surface0" />
</div>
<div
class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5"
>
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<VSCodiumIcon class="size-5" />
<span>VSCodium</span>
@ -46,9 +44,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="grow border-surface0" />
</div>
<div
class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5"
>
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<TypeScriptIcon class="size-5" />
<span>TypeScript</span>
@ -78,9 +74,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="grow border-surface0" />
</div>
<div
class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5"
>
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/50 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<SvelteIcon class="size-5" />
<span>Svelte</span>