lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 16:29:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom router now working

Browse Source
This commit is contained in:
Henri
2025-11-21 03:15:09 +02:00
parent 7dfb5adda1
commit e8651f6557
14 changed files with 435 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
README.md
View File

@@ -1,43 +1,136 @@
# Svelte + Vite # Lapikud External Website
This template should help get you started developing with Svelte in Vite. Built with [Svelte 5](https://svelte.dev/) and [Vite](https://vite.dev/).
## Recommended IDE Setup ## Development plan
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). Materials are on `Google Drive > Lapikud > Tarkvara > Väliveeb`
## Need an official Svelte framework? ## Contribution guide
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. ### 1. Create Issues
## Technical considerations Easiest way to help would be to create issues about things that are missing and wrong
**Why use this over SvelteKit?** ### 2. Fork this repo and create a pull request
- It brings its own routing solution which might not be preferable for some users. Fork this repo to your own account and create a pull request for changes you have done in there
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. ## How to setup development environment
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. ### Prerequisites
**Why include `.vscode/extensions.json`?** - [Node.js](https://nodejs.org/) (v18 or higher. v20 is recommended)
- npm (comes with Node.js)
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. ### Installation
**Why enable `checkJs` in the JS template?** 1. **Clone the repository**
It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration. ```bash
git clone https://github.com/Lapikud/lapikud.github.io.git
**Why is HMR not preserving my local component state?** cd lapikud.github.io
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
```js
// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
``` ```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
### Optional (secretly required): Image optimization
> [!WARNING]
> No one wants to download 5MB images that are then shown in a 100x100px box.
**Always optimize images before committing them!**
<details>
<summary>Linux/Windows (WSL/Ubuntu)</summary>
```bash
sudo apt install ffmpeg
```
```bash
# For thumbnails/small images (100-300px display)
ffmpeg -i input -vf scale=400:-1 output.jpg
# For medium images (300-800px display)
ffmpeg -i input -vf scale=1200:-1 output.jpg
# For full-width hero images
ffmpeg -i input -vf scale=1920:-1 output.jpg
```
</details>
<details>
<summary>Windows</summary>
**Option 1: Using winget (Windows 11 or Windows 10 with App Installer)**
```bash
winget install ffmpeg
```
**Option 2: Manual installation**
1. Download FFmpeg from [ffmpeg.org/download.html](https://ffmpeg.org/download.html)
2. Extract the archive
3. Add the `bin` folder to your PATH environment variable
**Usage:**
```bash
# For thumbnails/small images (100-300px display)
ffmpeg -i input -vf scale=400:-1 output.jpg
# For medium images (300-800px display)
ffmpeg -i input -vf scale=1200:-1 output.jpg
# For full-width hero images
ffmpeg -i input -vf scale=1920:-1 output.jpg
```
</details>
<details>
<summary>MacOS</summary>
```bash
brew install ffmpeg
```
```bash
# For thumbnails/small images (100-300px display)
ffmpeg -i input -vf scale=400:-1 output.jpg
# For medium images (300-800px display)
ffmpeg -i input -vf scale=1200:-1 output.jpg
# For full-width hero images
ffmpeg -i input -vf scale=1920:-1 output.jpg
```
</details>
## Build for production
```bash
npm run build
```
Built files will be in the `dist/` folder.
## Deploy
Push to the `main` branch and GitHub Actions will automatically build and deploy to GitHub Pages.
Deployment typically takes 2-5 minutes. You can check the progress in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).

6
index.html
View File

@@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -6,13 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lapikud.github.io</title> <title>lapikud.github.io</title>
<script> <script>
(function(){ (function () {
var redirect = sessionStorage.redirect; var redirect = sessionStorage.redirect;
delete sessionStorage.redirect; delete sessionStorage.redirect;
if (redirect && redirect !== location.href) { if (redirect && redirect !== location.href) {
history.replaceState(null, null, redirect); history.replaceState(null, null, redirect);
} }
})() })();
</script> </script>
</head> </head>
<body> <body>

14
package-lock.json generated
View File

@@ -7,9 +7,6 @@
"": { "": {
"name": "lapikud.github.io", "name": "lapikud.github.io",
"version": "0.0.0", "version": "0.0.0",
"dependencies": {
"svelte-routing": "^2.13.0"
},
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^6.2.1", "@sveltejs/vite-plugin-svelte": "^6.2.1",
"svelte": "^5.43.8", "svelte": "^5.43.8",
@@ -394,6 +391,7 @@
"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==", "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
"debug": "^4.4.1", "debug": "^4.4.1",
@@ -451,6 +449,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -903,6 +902,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@@ -988,6 +988,7 @@
"integrity": "sha512-K1QJbpc71OHs3egN/ZHN+nsH/eE/eJQUbtlTAAXVejOOjsFx9hM96fCX5fwPQIYclJfVS8D96RDFA76nZsrJ3w==", "integrity": "sha512-K1QJbpc71OHs3egN/ZHN+nsH/eE/eJQUbtlTAAXVejOOjsFx9hM96fCX5fwPQIYclJfVS8D96RDFA76nZsrJ3w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@jridgewell/remapping": "^2.3.4", "@jridgewell/remapping": "^2.3.4",
"@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1008,12 +1009,6 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/svelte-routing": {
"version": "2.13.0",
"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-2.13.0.tgz",
"integrity": "sha512-/NTxqTwLc7Dq306hARJrH2HLXOBtKd7hu8nxgoFDlK0AC4SOKnzisiX/9m8Uksei1QAWtlAEdF91YphNM8iDMg==",
"license": "MIT"
},
"node_modules/tinyglobby": { "node_modules/tinyglobby": {
"version": "0.2.15", "version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1046,6 +1041,7 @@
"integrity": "sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==", "integrity": "sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@oxc-project/runtime": "0.97.0", "@oxc-project/runtime": "0.97.0",
"fdir": "^6.5.0", "fdir": "^6.5.0",

3
package.json
View File

@@ -15,8 +15,5 @@
}, },
"overrides": { "overrides": {
"vite": "npm:rolldown-vite@7.2.5" "vite": "npm:rolldown-vite@7.2.5"
},
"dependencies": {
"svelte-routing": "^2.13.0"
} }
} }

0
404.html → public/404.html
View File

1
public/CNAME.example Normal file
View File

@@ -0,0 +1 @@
add later

26
src/App.svelte
View File

@@ -1,20 +1,20 @@
<script> <script>
import { Router, Route} from 'svelte-routing' import Router from "./lib/Router.svelte";
import Navbar from './layout/Navbar.svelte' import { routes } from "./routes/index.js";
import Footer from './layout/Footer.svelte' import { theme, toggle } from "./lib/theme.js";
import { routes } from './routes/index.js' import Navbar from "./layout/Navbar.svelte";
import { theme, toggle } from './lib/theme.js' import Footer from "./layout/Footer.svelte";
</script> </script>
<Navbar /> <Navbar />
<Router> <Router {routes} />
{#each Object.entries(routes) as [path, component]}
<Route {path} {component} />
{/each}
</Router>
<Footer /> <Footer />
<!-- use $theme to show current state --> <!-- use $theme to show current state -->
<button on:click={toggle} style="position:fixed;right:1rem;bottom:1rem" aria-label="Toggle theme"> <button
{#if $theme === 'dark'}☀️{:else}🌙{/if} onclick={toggle}
</button> style="position:fixed;right:1rem;bottom:1rem"
aria-label="Toggle theme"
>
{#if $theme === "dark"}☀️{:else}🌙{/if}
</button>

361
src/app.css
View File

@@ -1,190 +1,293 @@
/* Global stylesheet: design tokens, light/dark themes, responsive helpers, /* Global stylesheet */
and small utility classes so components don't need to re-implement
spacing, breakpoints, or color choices. */
/* Design tokens & theme variables (light defaults) */ /* Design tokens & theme variables (light defaults) */
:root { :root {
/* color tokens (light defaults) */ /* color tokens (light defaults) */
--color-bg: #ffffff; --color-bg: #ffffff;
--color-surface: #f7f8fb; --color-surface: #f7f8fb;
--color-text: #0f1720; --color-text: #0f1720;
--color-muted: #6b7280; --color-muted: #6b7280;
--color-primary: #4f46e5; --color-primary: #4f46e5;
--color-primary-600: #4338ca; --color-primary-600: #4338ca;
--color-border: rgba(15,23,32,0.08); --color-border: rgba(15, 23, 32, 0.08);
--color-danger: #ef4444; --color-danger: #ef4444;
/* layout tokens */ /* layout tokens */
--site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */ --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */
--content-max: 1200px; /* main content max width */ --content-max: 1200px; /* main content max width */
--nav-height: 64px; --nav-height: 64px;
--footer-height: 80px; --footer-height: 80px;
/* spacing scale (use --space-#) */ /* spacing scale (use --space-#) */
--space-0: 0px; --space-0: 0px;
--space-1: 4px; --space-1: 4px;
--space-2: 8px; --space-2: 8px;
--space-3: 16px; --space-3: 16px;
--space-4: 24px; --space-4: 24px;
--space-5: 32px; --space-5: 32px;
--space-6: 48px; --space-6: 48px;
/* radii / shadows */ /* radii / shadows */
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 10px; --radius-md: 10px;
--radius-lg: 14px; --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(2, 6, 23, 0.06), 0 1px 3px rgba(2, 6, 23, 0.04);
/* breakpoints */ /* breakpoints */
--bp-sm: 480px; --bp-sm: 480px;
--bp-md: 768px; --bp-md: 768px;
--bp-lg: 1024px; --bp-lg: 1024px;
--bp-xl: 1280px; --bp-xl: 1280px;
/* type scale (fluid base + modular sizes) */ /* type scale (fluid base + modular sizes) */
--fs-base: clamp(0.95rem, 0.9vw + 0.9rem, 1rem); --fs-base: clamp(0.95rem, 0.9vw + 0.9rem, 1rem);
--fs-xs: 0.85rem; --fs-xs: 0.85rem;
--fs-sm: 0.92rem; --fs-sm: 0.92rem;
--fs-md: 1rem; --fs-md: 1rem;
--fs-lg: 1.125rem; --fs-lg: 1.125rem;
--fs-xl: 1.5rem; --fs-xl: 1.5rem;
--line-height: 1.45; --line-height: 1.45;
/* derived component tokens that components can rely on */ /* derived component tokens that components can rely on */
--button-bg: var(--color-surface); --button-bg: var(--color-surface);
--button-text: var(--color-text); --button-text: var(--color-text);
--card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96)); --card-bg: linear-gradient(
--accent: var(--color-primary); 180deg,
rgba(255, 255, 255, 0.98),
rgba(255, 255, 255, 0.96)
);
--accent: var(--color-primary);
} }
/* Dark theme overrides: set document.documentElement.dataset.theme = "dark" */ /* Dark theme overrides: set document.documentElement.dataset.theme = "dark" */
[data-theme="dark"] { [data-theme="dark"] {
--color-bg: #0b1220; --color-bg: #0b1220;
--color-surface: #0f1724; --color-surface: #0f1724;
--color-text: #e6eef8; --color-text: #e6eef8;
--color-muted: #9aa5b2; --color-muted: #9aa5b2;
--color-primary: #7c6cff; --color-primary: #7c6cff;
--color-primary-600: #6d5cff; --color-primary-600: #6d5cff;
--color-border: rgba(255,255,255,0.06); --color-border: rgba(255, 255, 255, 0.06);
--button-bg: #0f1724; --button-bg: #0f1724;
--card-bg: linear-gradient(180deg, rgba(18,20,28,0.9), rgba(15,17,24,0.85)); --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 */ /* let the browser apply native form rendering for color-scheme */
:root { color-scheme: light; } :root {
[data-theme="dark"] { color-scheme: dark; } color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
/* Global box sizing & accessible defaults */ /* Global box sizing & accessible defaults */
*, *::before, *::after { box-sizing: border-box; } *,
*::before,
*::after {
box-sizing: border-box;
}
html { html {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
-webkit-font-smoothing: antialiased; Roboto, "Helvetica Neue", Arial;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
font-size: var(--fs-base); -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; font-size: var(--fs-base);
-webkit-text-size-adjust: 100%;
} }
body { body {
margin: 0; margin: 0;
color: var(--color-text); color: var(--color-text);
background: var(--color-bg); background: var(--color-bg);
line-height: var(--line-height); line-height: var(--line-height);
min-height: 100vh; min-height: 100vh;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
transition: background-color 160ms ease, color 160ms ease; transition: background-color 160ms ease, color 160ms ease;
padding-top: var(--nav-height); /* reserve navbar */ padding-top: var(--nav-height); /* reserve navbar */
} }
/* Container pattern */ /* Container pattern */
.container { .container {
width: 100%; width: 100%;
max-width: var(--content-max); max-width: var(--content-max);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: var(--site-padding); padding-left: var(--site-padding);
padding-right: var(--site-padding); padding-right: var(--site-padding);
} }
/* Responsive helpers - mobile by default; desktop media queries adjust naturally */ /* Responsive helpers - mobile by default; desktop media queries adjust naturally */
@media (min-width: var(--bp-md)) { @media (min-width: 768px) {
.container { padding-left: calc(var(--site-padding) * 1.2); padding-right: calc(var(--site-padding) * 1.2); } .container {
padding-left: calc(var(--site-padding) * 1.2);
padding-right: calc(var(--site-padding) * 1.2);
}
} }
@media (min-width: var(--bp-lg)) { @media (min-width: 1024px) {
.container { padding-left: calc(var(--site-padding) * 1.5); padding-right: calc(var(--site-padding) * 1.5); } .container {
padding-left: calc(var(--site-padding) * 1.5);
padding-right: calc(var(--site-padding) * 1.5);
}
} }
/* Headings & paragraph scale */ /* Headings & paragraph scale */
h1 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); margin: 0 0 var(--space-3) 0; line-height: 1.08; } h1 {
h2 { font-size: clamp(1.25rem, 2.1vw, 1.75rem); margin: 0 0 var(--space-3) 0; } font-size: clamp(1.5rem, 2.8vw, 2.25rem);
h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-2) 0; } margin: 0 0 var(--space-3) 0;
p { margin: 0 0 var(--space-3) 0; color: var(--color-text); } line-height: 1.08;
}
h2 {
font-size: clamp(1.25rem, 2.1vw, 1.75rem);
margin: 0 0 var(--space-3) 0;
}
h3 {
font-size: var(--fs-lg);
margin: 0 0 var(--space-2) 0;
}
p {
margin: 0 0 var(--space-3) 0;
color: var(--color-text);
}
/* Basic link & button defaults that components inherit */ /* Basic link & button defaults that components inherit */
a { color: var(--color-primary); text-decoration: none; font-weight: 550; } a {
a:hover { text-decoration: underline; color: var(--color-primary-600); } color: var(--color-primary);
text-decoration: none;
button, input[type="button"], input[type="submit"] { font-weight: 550;
font: inherit; }
color: var(--button-text); a:hover {
background: var(--button-bg); text-decoration: underline;
border: 1px solid var(--color-border); color: var(--color-primary-600);
padding: 0.5em 0.9em; }
border-radius: var(--radius-sm);
cursor: pointer; button,
transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease; input[type="button"],
input[type="submit"] {
font: inherit;
color: var(--button-text);
background: var(--button-bg);
border: 1px solid var(--color-border);
padding: 0.5em 0.9em;
border-radius: var(--radius-sm);
cursor: pointer;
transition: box-shadow 120ms ease, transform 120ms ease,
border-color 120ms ease;
}
button:active {
transform: translateY(1px);
}
button:focus {
outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
outline-offset: 2px;
} }
button:active { transform: translateY(1px); }
button:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent); outline-offset: 2px; }
/* Card pattern components can use .card */ /* Card pattern components can use .card */
.card { .card {
background: var(--card-bg); background: var(--card-bg);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-1); box-shadow: var(--shadow-1);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: var(--space-4); padding: var(--space-4);
} }
/* Stacking helpers: use .stack to avoid writing margins for children */ /* Stacking helpers: use .stack to avoid writing margins for children */
.stack { display: flex; flex-direction: column; gap: var(--space-3); } .stack {
.stack--tight { gap: var(--space-2); } display: flex;
.inline { display: inline-flex; gap: var(--space-2); align-items: center; } flex-direction: column;
gap: var(--space-3);
}
.stack--tight {
gap: var(--space-2);
}
.inline {
display: inline-flex;
gap: var(--space-2);
align-items: center;
}
/* Simple responsive grid that adapts to available width */ /* Simple responsive grid that adapts to available width */
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Utility: visually hidden (accessible labels) */ /* Utility: visually hidden (accessible labels) */
.sr-only, .visually-hidden { .sr-only,
position: absolute !important; .visually-hidden {
height: 1px; width: 1px; position: absolute !important;
overflow: hidden; height: 1px;
clip: rect(1px, 1px, 1px, 1px); width: 1px;
white-space: nowrap; overflow: hidden;
border: 0; padding: 0; margin: -1px; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
} }
/* Show/hide helpers for breakpoints */ /* Show/hide helpers for breakpoints */
.mobile-only { display: block; } .mobile-only {
.desktop-only { display: none; } display: block;
@media (min-width: var(--bp-md)) { }
.mobile-only { display: none; } .desktop-only {
.desktop-only { display: block; } display: none;
}
@media (min-width: 768px) {
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
} }
/* Navbar & footer helpers so components can assume consistent heights */ /* Navbar & footer helpers so components can assume consistent heights */
.site-header { height: var(--nav-height); display: flex; align-items: center; background: transparent; position: fixed; top: 0; left: 0; right: 0; z-index: 40; border-bottom: 1px solid var(--color-border); backdrop-filter: blur(6px); } .site-header {
.site-footer { height: var(--footer-height); display: flex; align-items: center; border-top: 1px solid var(--color-border); background: transparent; } height: var(--nav-height);
display: flex;
align-items: center;
background: transparent;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
border-bottom: 1px solid var(--color-border);
backdrop-filter: blur(6px);
}
.site-footer {
height: var(--footer-height);
display: flex;
align-items: center;
border-top: 1px solid var(--color-border);
background: transparent;
}
/* Small form controls default */ /* Small form controls default */
.input { .input {
padding: 0.6em 0.8em; border-radius: var(--radius-sm); padding: 0.6em 0.8em;
border: 1px solid var(--color-border); background: transparent; color: inherit; border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: transparent;
color: inherit;
} }
/* Utility to visually reduce emphasis (muted text) */ /* Utility to visually reduce emphasis (muted text) */
.muted { color: var(--color-muted); font-size: 0.95em; } .muted {
color: var(--color-muted);
font-size: 0.95em;
}
/* Accessibility: respect reduced motion */ /* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
} }

46
src/lib/Router.svelte Normal file
View File

@@ -0,0 +1,46 @@
<!-- DO NOT TOUCH THIS FILE AT ANY COST -->
<!-- unless the router is broken 👉👈 -->
<script>
let { routes } = $props();
let currentPath = $state(window.location.pathname);
let CurrentComponent = $derived(routes[currentPath] || routes["/"]);
function navigate(path) {
window.history.pushState({}, "", path);
currentPath = path;
}
// Handle back/forward buttons
$effect(() => {
const handlePopState = () => {
currentPath = window.location.pathname;
};
window.addEventListener("popstate", handlePopState);
return () => window.removeEventListener("popstate", handlePopState);
});
// Intercept link clicks
$effect(() => {
const handleClick = (e) => {
if (
e.target.tagName === "A" &&
e.target.getAttribute("href")?.startsWith("/")
) {
e.preventDefault();
navigate(e.target.getAttribute("href"));
}
};
window.addEventListener("click", handleClick);
return () => window.removeEventListener("click", handleClick);
});
</script>
{#if CurrentComponent}
<CurrentComponent />
{/if}

0
src/lib/router.svelte.js
View File

6
src/lib/theme.js
View File

@@ -1,17 +1,19 @@
// THEME STORE for LIGHT / DARK mode
import { writable } from 'svelte/store' import { writable } from 'svelte/store'
const init = (() => { const init = (() => {
try { try {
const stored = localStorage.getItem('theme') const stored = localStorage.getItem('theme')
if (stored === 'light' || stored === 'dark') return stored if (stored === 'light' || stored === 'dark') return stored
} catch (e) {} } catch (e) { }
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light' return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'
})() })()
export const theme = writable(init) export const theme = writable(init)
theme.subscribe(value => { theme.subscribe(value => {
try { localStorage.setItem('theme', value) } catch (e) {} try { localStorage.setItem('theme', value) } catch (e) { }
document.documentElement.dataset.theme = value document.documentElement.dataset.theme = value
}) })

3
src/routes/Demo.svelte
View File

@@ -1 +1,2 @@
<div>demo page</div> <h1>Demo Page</h1>
<a href="/">Back to Home</a>

6
src/routes/Home.svelte
View File

@@ -1 +1,5 @@
<div>test</div> <h1>Home</h1>
<nav>
<a href="/demo">Demo</a>
<a href="/contact">Contact</a>
</nav>

5
src/routes/index.js
View File

@@ -1,9 +1,10 @@
// ADD PAGES HERE TO REGISTER ROUTES
// examples: '/page', '/page/:id'
import Demo from './Demo.svelte' import Demo from './Demo.svelte'
import Home from './Home.svelte' import Home from './Home.svelte'
export const routes = { export const routes = {
'/': Home, '/': Home,
'/demo': Demo, '/demo': Demo,
// '/page': Page,
// '/page/:id': Page, // with optional param
} }