{$text.key}
//replace the key with the translation key example: "nav.about" +``` + ## Styling Look at `src/app.css` for global styles and CSS variables. Each Svelte component can also have its own styles scoped to that component Variables are defined in `:root` +we only have 3 colors in out palette + 2 variants: + +- `--orange` +- `--black` +- `--white` + +- `--off-white` +- `--off-black` + Add new ones only if they seem universal enough to be used in multiple places, don't add stuff like `--space-100: -888px` noone else will ever use that, if you really need it just add it to the component's own style block ## Layout @@ -39,3 +64,14 @@ There are also helper classes for responsive design: These classes use media queries defined in `src/app.css` based on common breakpoints. also things like `.stack`, `.inline`, `.grid`. Go look at `src/app.css` for what they do. + +## Routing + +Routing is handled by the custom router in `src/lib/Router.svelte` and `src/lib/router/router.js`. +To add new routes, edit `src/routes/index.js` and add your new route there. + +Import router functions as: + +```js +import { navigate, goBack, reload, getPath, getQuery } from "$lib"; // only import what you need +``` diff --git a/src/app.css b/src/app.css index cae9288..a4ba4ea 100644 --- a/src/app.css +++ b/src/app.css @@ -3,14 +3,11 @@ /* Design tokens & theme variables (light defaults) */ :root { /* color tokens (light defaults) */ - --color-bg: #ffffff; - --color-surface: #f7f8fb; - --color-text: #0f1720; - --color-muted: #6b7280; - --color-primary: #4f46e5; - --color-primary-600: #4338ca; - --color-border: rgba(15, 23, 32, 0.08); - --color-danger: #ef4444; + --orange: #f0941d; + --black: #000000; + --off-black: #0d0d0d; + --white: #ffffff; + --off-white: #fffdfa; /* layout tokens */ --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */ @@ -31,7 +28,8 @@ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; - --shadow-1: 0 1px 2px rgba(2, 6, 23, 0.06), 0 1px 3px rgba(2, 6, 23, 0.04); + --shadow-1: 0 1px 2px rgba(240, 148, 29, 0.2), + 0 1px 3px rgba(240, 148, 29, 0.12); /* breakpoints */ --bp-sm: 480px; @@ -59,31 +57,6 @@ --accent: var(--color-primary); } -/* Dark theme overrides: set document.documentElement.dataset.theme = "dark" */ -[data-theme="dark"] { - --color-bg: #0b1220; - --color-surface: #0f1724; - --color-text: #e6eef8; - --color-muted: #9aa5b2; - --color-primary: #7c6cff; - --color-primary-600: #6d5cff; - --color-border: rgba(255, 255, 255, 0.06); - --button-bg: #0f1724; - --card-bg: linear-gradient( - 180deg, - rgba(18, 20, 28, 0.9), - rgba(15, 17, 24, 0.85) - ); -} - -/* let the browser apply native form rendering for color-scheme */ -:root { - color-scheme: light; -} -[data-theme="dark"] { - color-scheme: dark; -} - /* Global box sizing & accessible defaults */ *, *::before, diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg deleted file mode 100644 index c5e0848..0000000 --- a/src/assets/svelte.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Button.svelte b/src/components/Button.svelte index 1cc2550..98131ee 100644 --- a/src/components/Button.svelte +++ b/src/components/Button.svelte @@ -1,20 +1,27 @@ -