vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: scaffold SvelteKit runtime

Browse source
This commit is contained in:
vince 2026-06-18 17:29:01 +02:00
parent 1c287c782c
commit d87da6c1d1
14 changed files with 544 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app.css Normal file
View file

@ -0,0 +1,30 @@
:root {
color-scheme: dark;
font-family:
"IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
background: #050505;
color: #f4f4f4;
text-rendering: geometricPrecision;
}
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
#050505;
background-size: 48px 48px;
}
button,
input,
textarea,
select {
font: inherit;
}
a {
color: inherit;
}

11
src/app.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

18
src/lib/server/dashboard.ts Normal file
View file

@ -0,0 +1,18 @@
export type PlaceholderStatus = "ready" | "building";
export interface PlaceholderDashboard {
title: string;
subtitle: string;
status: PlaceholderStatus;
message: string;
}
export function loadPlaceholderDashboard(): PlaceholderDashboard {
return {
title: "System Overview",
subtitle: "Dashboard runtime scaffold",
status: "building",
message:
"SvelteKit is running. Later issues will replace this placeholder with the validated dashboard model.",
};
}

7
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import "../app.css";
let { children } = $props();
</script>
{@render children()}

7
src/routes/+page.server.ts Normal file
View file

@ -0,0 +1,7 @@
import { loadPlaceholderDashboard } from "$lib/server/dashboard";
export function load() {
return {
dashboard: loadPlaceholderDashboard(),
};
}

83
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,83 @@
<script lang="ts">
import type { PageData } from "./$types";
let { data }: { data: PageData } = $props();
</script>
<svelte:head>
<title>{data.dashboard.title} | Dimension Lab</title>
<meta
name="description"
content="Standalone SvelteKit runtime for a model-driven system overview dashboard."
/>
</svelte:head>
<main class="shell" aria-labelledby="page-title">
<section class="hero">
<p class="eyebrow">{data.dashboard.subtitle}</p>
<h1 id="page-title">{data.dashboard.title}</h1>
<p class="message">{data.dashboard.message}</p>
<div class="status" data-state={data.dashboard.status}>
<span class="status__label">Runtime</span>
<strong>{data.dashboard.status}</strong>
</div>
</section>
</main>
<style>
.shell {
display: grid;
min-height: 100vh;
padding: clamp(1rem, 2vw, 2rem);
box-sizing: border-box;
}
.hero {
align-self: center;
max-width: 64rem;
border: 1px solid rgba(244, 244, 244, 0.24);
background: rgba(0, 0, 0, 0.72);
padding: clamp(1.25rem, 4vw, 3rem);
box-shadow: 0 0 0 1px rgba(207, 255, 0, 0.18) inset;
}
.eyebrow,
.status__label {
margin: 0;
color: #cfff00;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
h1 {
margin: 0.35rem 0 0;
font-size: clamp(2.6rem, 9vw, 7rem);
line-height: 0.9;
text-transform: uppercase;
}
.message {
max-width: 42rem;
margin: 1.25rem 0 0;
color: rgba(244, 244, 244, 0.72);
font-size: clamp(0.9rem, 2vw, 1.08rem);
line-height: 1.6;
}
.status {
display: inline-grid;
grid-template-columns: auto auto;
gap: 0.75rem;
align-items: center;
margin-top: 2rem;
border: 1px solid rgba(207, 255, 0, 0.6);
padding: 0.7rem 0.85rem;
text-transform: uppercase;
}
.status strong {
color: #f4f4f4;
}
</style>