trafficlunar/website
1
0
Fork 0
mirror of https://github.com/trafficlunar/website.git synced 2026-08-12 12:29:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: light mode

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Computer.svelte
View file

@ -98,7 +98,7 @@
});
</script>
<div class="relative transition-all duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<div class="relative transition-[translate,opacity] duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<div class="flex justify-center items-center absolute -top-2 right-2 z-0">
<div class="w-4 h-4 rounded-full {online ? 'bg-green' : 'bg-red'}"></div>
<div class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {online ? 'bg-green animate-ping' : 'bg-red'}"></div>

2
src/components/Music.svelte
View file

@ -26,7 +26,7 @@
});
</script>
<div class="relative transition-all duration-300 delay-100 starting:opacity-0 starting:translate-y-4">
<div class="relative transition-[translate,opacity] duration-300 delay-100 starting:opacity-0 starting:translate-y-4">
<div class="flex justify-center items-center absolute -top-2 right-2 z-0">
<div class="w-4 h-4 rounded-full {playing ? 'bg-green' : 'bg-red'}"></div>
<div class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {playing ? 'bg-green animate-ping' : 'bg-red'}"></div>

2
src/components/Projects.svelte
View file

@ -133,7 +133,7 @@
</div>
{/snippet}
<div class="grid grid-cols-2 gap-4 max-sm:grid-cols-1 transition-all duration-300 delay-300 starting:opacity-0 starting:translate-y-4">
<div class="grid grid-cols-2 gap-4 max-sm:grid-cols-1 transition-[translate,opacity] duration-300 delay-300 starting:opacity-0 starting:translate-y-4">
{@render projectColumn(leftColumn)}
{@render projectColumn(rightColumn)}
</div>

31
src/components/ThemeButton.svelte Normal file
View file

@ -0,0 +1,31 @@
<script lang="ts">
let isDarkMode = $state(true);
function onClick() {
const toggle = () => {
isDarkMode = !isDarkMode;
document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
};
if (!document.startViewTransition) toggle();
document.startViewTransition(toggle);
}
</script>
<button onclick={onClick} aria-label="Toggle dark mode" class="absolute top-8 right-8 cursor-pointer">
{#if isDarkMode}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="size-12"
><path
fill="currentColor"
d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006z"
/></svg
>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="size-12"
><path
fill="currentColor"
d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1m6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0M4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0M12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1m0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7"
/></svg
>
{/if}
</button>

14
src/components/Tools.astro
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>