diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte index bd6e097..c69aed6 100644 --- a/src/lib/components/ThemePicker.svelte +++ b/src/lib/components/ThemePicker.svelte @@ -1,35 +1,35 @@ -<script lang="ts" context="module"> - export const themes = ["light", "dark"] as const - export type Theme = (typeof themes)[number] -</script> - -<script lang="ts"> - import { slide } from "svelte/transition" - let { theme } = $props<{ theme: Theme }>() - - function toggleTheme() { - const currentIndex = themes.indexOf(theme) - theme = themes[(currentIndex + 1) % themes.length] - } - - let icon = $derived.by(() => { - if (theme === "light") return "🌞" - if (theme === "dark") return "🌙" - }) -</script> - -{#key theme} - <button transition:slide={{ axis: "x" }} onclick={toggleTheme}> - {icon} - </button> -{/key} - -<slot /> - -<style lang="postcss"> - button { - @apply absolute top-0 right-0; - @apply text-3xl; - @apply cursor-pointer; - } -</style> +<script lang="ts" context="module"> + export const themes = ["light", "dark"] as const + export type Theme = (typeof themes)[number] +</script> + +<script lang="ts"> + import { slide } from "svelte/transition" + let { theme } = $props<{ theme: Theme }>() + + function toggleTheme() { + const currentIndex = themes.indexOf(theme) + theme = themes[(currentIndex + 1) % themes.length] + } + + let icon = $derived.by(() => { + if (theme === "light") return "🌞" + if (theme === "dark") return "🌙" + }) +</script> + +{#key theme} + <button transition:slide={{ axis: "x" }} onclick={toggleTheme}> + {icon} + </button> +{/key} + +<slot /> + +<style lang="postcss"> + button { + @apply absolute top-0 right-0; + @apply text-3xl; + @apply cursor-pointer; + } +</style> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 790effd..3fd29cc 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -24,4 +24,3 @@ @apply bg-background text-foreground; } </style> - diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index bb2a7a1..0fec567 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,7 +4,7 @@ </main> <style lang="postcss"> -main { + main { @apply text-center; @apply mx-auto my-64; } diff --git a/src/routes/timer/+page.svelte b/src/routes/timer/+page.svelte index 29a674e..e7882bc 100644 --- a/src/routes/timer/+page.svelte +++ b/src/routes/timer/+page.svelte @@ -135,9 +135,7 @@ <main> <div> - <h1> - Prevent CVS - </h1> + <h1>Prevent CVS</h1> {#if $state !== "Ready"} <p>{$state}</p> <p>Time left until end of break: {$timeLeftDisplay}</p> @@ -145,14 +143,11 @@ <p>Time left until break: {$timeLeftDisplay}</p> {/if} {#if $state !== "Ready"} - <button - on:click={skipBreak}>Skip Break</button - > + <button on:click={skipBreak}>Skip Break</button> {/if} </div> </main> - <style lang="postcss"> main { @apply text-center; diff --git a/svelte.config.js b/svelte.config.js index 5f1cfd7..21fd18f 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -3,7 +3,6 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte" /** @type {import('@sveltejs/kit').Config} */ const config = { - // vitePlugin: { // dynamicCompileOptions({filename}){ // if(filename.includes('node_modules')){ @@ -13,8 +12,8 @@ const config = { // }, // compilerOptions: { - // runes: true - // }, + // runes: true + // }, // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors