mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 07:36:50 +03:00
Paul Bakaus
1bdb3ea17a
- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design) - Implement tabbed demo navigation for skills with multiple examples - Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js) - Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css) - Redesign commands section with sidebar nav matching skills layout - Replace large download buttons with compact icon buttons - Fix gray-on-pink color clashing throughout UI - Remove frontend-design skill (Anthropic's work, not ours) - Format skill names properly (e.g., 'UX Writing' not 'ux-writing') - Remove redundant 'Combines Well With' from skills - Add 'The Problem' and 'The Solution' sections to homepage - Various CSS fixes for buttons, backgrounds, and spacing
67 lines
2.1 KiB
CSS
67 lines
2.1 KiB
CSS
/* Design Tokens — Single Source of Truth */
|
|
|
|
:root {
|
|
/* Typography Scale */
|
|
--font-display: 'Cormorant Garamond', Georgia, serif;
|
|
--font-body: 'Instrument Sans', system-ui, sans-serif;
|
|
|
|
/* Base Colors — Refined Monochrome + Electric Accent */
|
|
--c-ink: oklch(10% 0 0);
|
|
--c-paper: oklch(98% 0 0);
|
|
--c-charcoal: oklch(25% 0 0);
|
|
--c-ash: oklch(55% 0 0);
|
|
--c-mist: oklch(92% 0 0);
|
|
|
|
/* Semantic aliases for common use */
|
|
--c-text: var(--c-ink);
|
|
--c-bg: oklch(96% 0.005 350); /* Very subtle pink tint */
|
|
|
|
/* Accent — Vibrant Electric Pink using OKLCH for perceptual uniformity */
|
|
--c-accent: oklch(60% 0.25 350);
|
|
--c-accent-hover: oklch(from var(--c-accent) calc(l - 8%) c h);
|
|
--c-accent-dim: color-mix(in oklch, var(--c-accent), transparent 85%);
|
|
|
|
/* Spacing Scale — 8px base unit */
|
|
--s-unit: 8px;
|
|
--s-xs: calc(var(--s-unit) * 1); /* 8px */
|
|
--s-sm: calc(var(--s-unit) * 2); /* 16px */
|
|
--s-md: calc(var(--s-unit) * 3); /* 24px */
|
|
--s-lg: calc(var(--s-unit) * 6); /* 48px */
|
|
--s-xl: calc(var(--s-unit) * 10); /* 80px */
|
|
--s-2xl: calc(var(--s-unit) * 16); /* 128px */
|
|
--s-3xl: calc(var(--s-unit) * 24); /* 192px */
|
|
|
|
/* Layout Constraints */
|
|
--max-width: 1280px;
|
|
--content-width: 840px;
|
|
|
|
/* Animation Curves */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--duration-fast: 0.2s;
|
|
--duration-base: 0.3s;
|
|
--duration-slow: 0.6s;
|
|
--duration-slower: 0.8s;
|
|
--duration-slowest: 1.2s;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px color-mix(in oklch, var(--c-ink), transparent 90%);
|
|
--shadow-md: 0 4px 8px color-mix(in oklch, var(--c-ink), transparent 85%);
|
|
}
|
|
|
|
/* Dark Mode — Automatic via prefers-color-scheme */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--c-ink: oklch(98% 0 0);
|
|
--c-paper: oklch(10% 0 0);
|
|
--c-charcoal: oklch(92% 0 0);
|
|
--c-ash: oklch(65% 0 0);
|
|
--c-mist: oklch(20% 0 0);
|
|
--c-accent: oklch(68% 0.23 350);
|
|
--c-accent-hover: oklch(from var(--c-accent) calc(l + 8%) c h);
|
|
--c-text: var(--c-ink);
|
|
--c-bg: oklch(12% 0.005 350);
|
|
}
|
|
}
|
|
|