From 97a3c2196b2107336417246d39ea26c336a72754 Mon Sep 17 00:00:00 2001 From: "s0wlz (Matthias Puchstein)" Date: Tue, 28 Apr 2026 15:01:22 +0200 Subject: [PATCH] feat(frontend): add paper design tokens and Google Fonts --- frontend/src/app.css | 151 +++++++++++++++++++++++++++++ frontend/src/app.html | 3 + frontend/src/routes/+layout.svelte | 3 + 3 files changed, 157 insertions(+) create mode 100644 frontend/src/app.css diff --git a/frontend/src/app.css b/frontend/src/app.css new file mode 100644 index 0000000..9aa2a9a --- /dev/null +++ b/frontend/src/app.css @@ -0,0 +1,151 @@ +/* Academic / paper-inspired design system for Tutormanager */ + +:root { + --paper: #f4efe6; + --paper-2: #ebe4d6; + --paper-3: #ded4c0; + --rule: #c9bfa9; + --rule-soft: #d9d0bb; + --ink: #1f1b16; + --ink-2: #3a342b; + --ink-3: #6b6356; + --ink-4: #968b7a; + --accent: #8a2c1f; /* oxblood */ + --accent-soft: #c66a5b; + --highlight: #f1d36a; /* highlighter yellow */ + --highlight-soft: #f5e3a4; + --green: #4a6b3a; /* present */ + --red: #8a2c1f; /* absent / lock */ + --amber: #b07d2a; /* open */ + + --serif: "Source Serif 4", "Source Serif Pro", "EB Garamond", Georgia, serif; + --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; + --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; +} + +/* Paper grain — subtle SVG noise overlay */ +.paper-bg { + background-color: var(--paper); + background-image: + radial-gradient(circle at 25% 15%, rgba(160,140,110,0.05) 0, transparent 40%), + radial-gradient(circle at 80% 70%, rgba(160,140,110,0.04) 0, transparent 50%), + url("data:image/svg+xml;utf8,"); +} + +/* Ruled lines — like a notebook */ +.ruled { + background-image: repeating-linear-gradient( + to bottom, + transparent 0, + transparent 27px, + var(--rule-soft) 27px, + var(--rule-soft) 28px + ); +} + +* { box-sizing: border-box; } + +body, .ui { + font-family: var(--sans); + color: var(--ink); + font-feature-settings: "ss01", "cv11"; +} + +.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } +.mono { font-family: var(--mono); } + +.h1 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } +.h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } +.h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); } +.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } +.body { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); } +.small { font-family: var(--sans); font-size: 12px; color: var(--ink-3); } +.tiny { font-family: var(--sans); font-size: 11px; color: var(--ink-3); } + +/* Underline marker — looks like a hand drawn highlight stroke */ +.marker { + background: linear-gradient(180deg, transparent 60%, var(--highlight-soft) 60%, var(--highlight-soft) 92%, transparent 92%); + padding: 0 2px; +} + +/* Status pills */ +.pill { + display: inline-flex; align-items: center; gap: 6px; + font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; + padding: 3px 9px; border-radius: 999px; + border: 1px solid currentColor; + background: transparent; +} +.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } + +.pill.open { color: var(--amber); background: rgba(176,125,42,0.08); } +.pill.closed { color: var(--ink-3); } +.pill.locked { color: var(--accent); background: rgba(138,44,31,0.06); } +.pill.present { color: var(--green); background: rgba(74,107,58,0.08); } +.pill.absent { color: var(--accent); } + +/* Buttons */ +.btn { + font-family: var(--sans); font-size: 13px; font-weight: 500; + padding: 8px 14px; border-radius: 6px; + border: 1px solid var(--ink); background: var(--ink); color: var(--paper); + cursor: pointer; display: inline-flex; align-items: center; gap: 6px; +} +.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); } +.btn.ghost:hover { background: rgba(0,0,0,0.04); } +.btn.accent { background: var(--accent); border-color: var(--accent); color: #f7eedc; } +.btn.sm { padding: 5px 10px; font-size: 12px; } + +/* Card */ +.card { + background: #fbf7ee; + border: 1px solid var(--rule); + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0,0,0,0.03); +} + +/* Marginalia — handwritten look. Use Caveat as marginal handwriting. */ +.handwritten { + font-family: "Caveat", "Kalam", cursive; + color: var(--accent); + font-size: 18px; + line-height: 1; +} + +/* Custom scrollbars */ +.scroll::-webkit-scrollbar { width: 8px; height: 8px; } +.scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; } +.scroll::-webkit-scrollbar-track { background: transparent; } + +/* hand-drawn underline svg accent under section titles */ +.underline-stroke { display: inline-block; margin-top: 2px; } + +/* Stamp — for "PRÄSENT" mark */ +.stamp { + display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 11px; + letter-spacing: 0.15em; text-transform: uppercase; + color: var(--accent); border: 2px solid var(--accent); + padding: 3px 8px; border-radius: 3px; + transform: rotate(-4deg); + background: rgba(138,44,31,0.04); +} + +/* Subtle hover row */ +.row-hover:hover { background: rgba(0,0,0,0.025); } + +/* Tab bar */ +.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); } +.tab { font-family: var(--sans); font-size: 13px; padding: 10px 14px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } +.tab.active { color: var(--ink); border-bottom-color: var(--ink); } + +/* Input */ +.input { + font-family: var(--sans); font-size: 13px; + padding: 8px 11px; border: 1px solid var(--rule); + background: #fbf7ee; border-radius: 4px; + color: var(--ink); +} +.input:focus { outline: none; border-color: var(--ink); } + +/* Inline divider */ +.div-h { height: 1px; background: var(--rule); width: 100%; } diff --git a/frontend/src/app.html b/frontend/src/app.html index 6769ed5..9ec39e9 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -4,6 +4,9 @@ + + + %sveltekit.head% diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 4fa864c..aa75f7e 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1 +1,4 @@ +