diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f791495 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "css.customData": [".vscode/tailwind.json"] +} diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..a45bccc --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/package.json b/package.json index 2d9c4cb..5eab105 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "prettier": "^3.3.2", "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.5", + "sass": "^1.80.7", "svelte": "^5.0.0", "svelte-check": "^4.0.0", "tailwindcss": "^3.4.9", @@ -41,6 +42,7 @@ "clsx": "^2.1.1", "lucide-svelte": "^0.456.0", "svelte-adapter-bun": "^0.5.2", + "typescript-cookie": "^1.0.6", "wasm-vips": "^0.0.11" } } diff --git a/src/app.html b/src/app.html index 77a5ff5..03c4c3b 100644 --- a/src/app.html +++ b/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/app.css b/src/app.scss similarity index 68% rename from src/app.css rename to src/app.scss index 00893ec..3501bc1 100644 --- a/src/app.css +++ b/src/app.scss @@ -1,24 +1,16 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; +@tailwind base; +@tailwind components; +@tailwind utilities; @import url(@fontsource/lexend/400.css); @import url(@fontsource/lexend/500.css); @import url(@fontsource/azeret-mono/600.css); :root { - --accent-bg: hsl(303, 73%, 81%); - --accent-fg: hsl(0, 0, 10%); --font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-display: "Azeret Mono", var(--font-body); - --bg: hsl(0, 0%, 100%); - --fg: hsl(0, 0%, 10%); - --fg-muted: hsl(0, 0%, 50%); - --fg-muted-alt: hsl(0, 0%, 75%); - --fg-highlight: hsl(303, 52%, 42%); - --fg-failure: hsl(0, 67%, 49%); --transition: linear( 0, 0.006, @@ -37,6 +29,50 @@ ); } +@mixin light { + --accent-bg: hsl(303, 73%, 81%); + --accent-fg: hsl(0, 0, 10%); + --bg: hsl(0, 0%, 100%); + --bg-transparent: hsla(0, 0%, 100%, 0.6); + --fg: hsl(0, 0%, 10%); + --fg-muted: hsl(0, 0%, 50%); + --fg-muted-alt: hsl(0, 0%, 75%); + --fg-highlight: hsl(303, 61%, 47%); + --fg-failure: hsl(0, 67%, 49%); +} + +@mixin dark { + --accent-bg: hsl(304, 41%, 21%); + --accent-fg: hsl(303, 73%, 81%); + --bg: hsl(0, 0%, 8%); + --bg-transparent: hsla(0, 0%, 8%, 0.8); + --fg: hsl(0, 0%, 90%); + --fg-muted: hsl(0, 0%, 50%); + --fg-muted-alt: hsl(0, 0%, 25%); + --fg-highlight: hsl(303, 64%, 65%); + --fg-failure: hsl(0, 67%, 80%); +} + +@media (prefers-color-scheme: dark) { + body { + @include dark; + } +} + +@media (prefers-color-scheme: light) { + body { + @include light; + } +} + +body.light { + @include light; +} + +body.dark { + @include dark; +} + body { @apply text-foreground bg-background font-body overflow-x-hidden; width: 100vw; diff --git a/src/hooks.server.ts b/src/hooks.server.ts new file mode 100644 index 0000000..a847d23 --- /dev/null +++ b/src/hooks.server.ts @@ -0,0 +1,9 @@ +import type { Handle } from "@sveltejs/kit"; + +export const handle: Handle = async ({ event, resolve }) => { + const theme = event.cookies.get("theme") ?? ""; + const res = await resolve(event, { + transformPageChunk: ({ html }) => html.replace("%theme%", theme), + }); + return res; +}; diff --git a/src/lib/components/functional/FancyMenu.svelte b/src/lib/components/functional/FancyMenu.svelte index bfff5e0..77ef111 100644 --- a/src/lib/components/functional/FancyMenu.svelte +++ b/src/lib/components/functional/FancyMenu.svelte @@ -38,7 +38,7 @@ {/if} {#each links as { name, url } (url)} { if (shouldGoBack) { @@ -55,7 +55,7 @@
{#key name} { + this.dark = !this.dark; + console.log(this.dark); + }; +} + export const files = new Files(); +export const theme = new Theme(); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dc85a70..01f8bea 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,14 +1,17 @@ @@ -68,7 +88,7 @@
@@ -91,6 +111,11 @@
+
+ +
{#key data.pathname} diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts new file mode 100644 index 0000000..5e4a6de --- /dev/null +++ b/src/routes/+layout.ts @@ -0,0 +1,16 @@ +import { browser } from "$app/environment"; +import { theme } from "$lib/store/index.svelte"; +import { getCookie, setCookie } from "typescript-cookie"; + +export const load = ({ data }) => { + if (!browser) return; + const themeStr = getCookie("theme"); + if (typeof themeStr === "undefined") { + theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches; + setCookie("theme", theme.dark ? "dark" : "light"); + } else { + theme.dark = themeStr === "dark"; + } + theme.dark = getCookie("theme") === "dark"; + return data; +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6f63688..250b3ea 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -83,10 +83,12 @@
c.supportedFormats))]} + acceptedFormats={[ + ...new Set(converters.flatMap((c) => c.supportedFormats)), + ]} />
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 83c8c62..19d4a3e 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -63,18 +63,28 @@ class="font-display text-3xl mt-12 text-transition" style="--delay: {5 * multiplier}ms" > - 👨‍💻 source code + 🔗 resources -

- VERT is licensed under AGPL-3.0, and the source code can be found on GitHub. -

+

🎨 credits

@@ -83,7 +93,7 @@
{credit.name}'s avatar @@ -101,7 +111,7 @@

(obviously inspired by

diff --git a/tailwind.config.ts b/tailwind.config.ts index 07c48f4..1ec68d4 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,8 +1,8 @@ import type { Config } from "tailwindcss"; +import plugin from "tailwindcss/plugin"; export default { content: ["./src/**/*.{html,js,svelte,ts}"], - theme: { extend: { colors: { @@ -25,5 +25,12 @@ export default { }, }, - plugins: [], + plugins: [ + plugin(function ({ addVariant }) { + addVariant("dynadark", [ + "body:not(.light).dark &", + "@media (prefers-color-scheme: dark) { body:not(.light) &", + ]); + }), + ], } satisfies Config; diff --git a/vite.config.ts b/vite.config.ts index d5bf6b7..d48daa2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -26,4 +26,11 @@ export default defineConfig({ "@ffmpeg/util", ], }, + css: { + preprocessorOptions: { + scss: { + api: "modern", + }, + }, + }, });