mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul Bakaus
54b687d16f
Groundwork for new /skills, /anti-patterns, /tutorials sections. No user-visible changes yet — this is pure plumbing. - Split main.css into tokens.css (design tokens + reset, ~100 lines) and main.css (everything else, imports tokens.css). Lets sub-pages import only tokens without pulling in the landing-page component CSS. - Add marked as a dependency. - Add scripts/lib/render-markdown.js: marked wrapper with a custom link resolver (skill slugs, reference/*.md anchors, external rel=noopener), stable heading slugger, and terminal-style code blocks. - Add scripts/lib/render-page.js: page shell wrapper that injects the shared site header partial with aria-current marking. - Add content/site/partials/header.html: shared site header with nav (Home / Skills / Anti-Patterns / Tutorials / Gallery / GitHub). - Add public/css/sub-pages.css: shared styles for generated pages, with .site-header styling (sticky, backdrop blur, accent-underlined active nav item) and mobile collapse. Build still produces the same 104 KB landing-page CSS chunk; tests pass.
103 lines
2.4 KiB
CSS
103 lines
2.4 KiB
CSS
/*
|
|
* impeccable.style — design tokens + minimal reset
|
|
*
|
|
* Shared by every page on the site (landing + generated sub-pages).
|
|
* Keep this file small and dependency-free.
|
|
*/
|
|
|
|
/* ============================================
|
|
MINIMAL CSS RESET
|
|
============================================ */
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
img, picture, video, canvas, svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
button, input, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
/* ============================================
|
|
DESIGN TOKENS
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Typography */
|
|
--font-display: 'Cormorant Garamond', Georgia, serif;
|
|
--font-body: 'Instrument Sans', system-ui, sans-serif;
|
|
--font-mono: 'Space Grotesk', monospace;
|
|
|
|
/* Spacing Scale */
|
|
--spacing-xs: 8px;
|
|
--spacing-sm: 16px;
|
|
--spacing-md: 24px;
|
|
--spacing-lg: 32px;
|
|
--spacing-xl: 48px;
|
|
--spacing-2xl: 80px;
|
|
--spacing-3xl: 120px;
|
|
|
|
/* Width */
|
|
--width-max: 1400px;
|
|
--width-content: 900px;
|
|
|
|
/* Animation */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--duration-fast: 0.15s;
|
|
--duration-base: 0.3s;
|
|
--duration-slow: 0.6s;
|
|
--duration-slower: 0.8s;
|
|
--duration-slowest: 1.2s;
|
|
|
|
/* Core Colors - Light Mode */
|
|
--color-ink: oklch(10% 0 0);
|
|
--color-text: oklch(10% 0 0);
|
|
--color-paper: oklch(98% 0 0);
|
|
--color-cream: oklch(96% 0.005 350);
|
|
--color-charcoal: oklch(25% 0 0);
|
|
--color-ash: oklch(55% 0 0);
|
|
--color-mist: oklch(92% 0 0);
|
|
--color-bg: oklch(96% 0.005 350);
|
|
|
|
/* Accent - Vibrant Magenta/Rose (original) */
|
|
--color-accent: oklch(60% 0.25 350);
|
|
--color-accent-hover: oklch(52% 0.25 350);
|
|
--color-accent-dim: oklch(60% 0.25 350 / 0.15);
|
|
--color-accent-soft: oklch(60% 0.25 350 / 0.25);
|
|
|
|
/* Framework category colors - Light mode */
|
|
--cat-create-bg: #fdf2f8;
|
|
--cat-create-border: #ec4899;
|
|
--cat-create-text: #be185d;
|
|
|
|
--cat-evaluate-bg: #fdf4ff;
|
|
--cat-evaluate-border: #d946ef;
|
|
--cat-evaluate-text: #a21caf;
|
|
|
|
--cat-refine-bg: #eff6ff;
|
|
--cat-refine-border: #3b82f6;
|
|
--cat-refine-text: #1d4ed8;
|
|
|
|
--cat-simplify-bg: #fffbeb;
|
|
--cat-simplify-border: #f59e0b;
|
|
--cat-simplify-text: #b45309;
|
|
|
|
--cat-harden-bg: #f0fdf4;
|
|
--cat-harden-border: #22c55e;
|
|
--cat-harden-text: #15803d;
|
|
|
|
--cat-system-bg: #f5f5f4;
|
|
--cat-system-border: #78716c;
|
|
--cat-system-text: #44403c;
|
|
}
|