dave-dmg/blog_legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial tool setup and basic styles

Browse Source
This commit is contained in:
Dave
2025-09-04 14:13:55 +02:00
parent b212b4f596
commit fc8b07185d
19 changed files with 9016 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
src/styles/base/variables.css Normal file
View File

@@ -0,0 +1,293 @@
:root {
/* === TYPOGRAPHY === */
/* == Font Families == */
--font-display: 'Geist Variable';
--font-body: 'Iosevka Aile';
--font-mono: 'Iosevka';
/* == Font Sizes == */
--typo-size-base: 16px;
--typo-size-6xl: 4em; /* 64px */
--typo-size-5xl: 3.1875em; /* 51px */
--typo-size-4xl: 2.5em; /* 40px */
--typo-size-3xl: 2em; /* 32px */
--typo-size-2xl: 1.5625em; /* 25px */
--typo-size-xl: 1.25em; /* 20px */
--typo-size-lg: 1.125em; /* 18px */
--typo-size-md: 1em; /* 16px */
--typo-size-sm: 0.875em; /* 14px */
--typo-size-xs: 0.8125em; /* 13px */
--typo-size-2xs: 0.625em; /* 10px */
/* == Line Height == */
--typo-leading-compressed: 1.0; /* 1.0 - very tight */
--typo-leading-tight: 1.125; /* 1.125 - tight */
--typo-leading-snug: 1.25; /* 1.25 - snug */
--typo-leading-cozy: 1.375; /* 1.375 - cozy */
--typo-leading-normal: 1.5; /* 1.5 - normal */
--typo-leading-relaxed: 1.625; /* 1.625 - relaxed */
--typo-leading-comfortable: 1.75; /* 1.75 - comfortable */
--typo-leading-loose: 1.875; /* 1.875 - loose */
--typo-leading-spacious: 2.0; /* 2.0 - very loose */
/* == Letter Spacing == */
--typo-spacing-tightest: -0.05em; /* -0.05em - very tight */
--typo-spacing-tighter: -0.025em; /* -0.025em - tight */
--typo-spacing-tight: -0.0125em; /* -0.0125em - slightly tight */
--typo-spacing-normal: 0em; /* 0 - normal */
--typo-spacing-relaxed: 0.025em; /* 0.025em - slightly loose */
--typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
--typo-spacing-loose: 0.1em; /* 0.1em - loose */
--typo-spacing-looser: 0.15em; /* 0.15em - very loose */
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
/* == Font Weight == */
--typo-weight-thin: 100;
--typo-weight-extralight: 200;
--typo-weight-light: 300;
--typo-weight-regular: 400;
--typo-weight-medium: 500;
--typo-weight-semibold: 600;
--typo-weight-bold: 700;
--typo-weight-extrabold: 800;
--typo-weight-black: 900;
/* === SPACING === */
/* == Base Size Units == */
--size-0: 0;
--size-px: 1px;
--size-05: 0.125rem; /* 2px */
--size-1: 0.25rem; /* 4px */
--size-2: 0.5rem; /* 8px */
--size-3: 0.75rem; /* 12px */
--size-4: 1rem; /* 16px */
--size-5: 1.25rem; /* 20px */
--size-6: 1.5rem; /* 24px */
--size-8: 2rem; /* 32px */
--size-10: 2.5rem; /* 40px */
--size-12: 3rem; /* 48px */
--size-16: 4rem; /* 64px */
--size-20: 5rem; /* 80px */
--size-24: 6rem; /* 96px */
--size-32: 8rem; /* 128px */
--size-40: 10rem; /* 160px */
--size-48: 12rem; /* 192px */
--size-64: 16rem; /* 256px */
--size-80: 20rem; /* 320px */
--size-96: 24rem; /* 384px */
--size-128: 32rem; /* 512px */
--size-160: 40rem; /* 640px */
--size-192: 48rem; /* 768px */
--size-256: 64rem; /* 1024px */
--size-320: 80rem; /* 1280px */
--size-384: 96rem; /* 1536px */
--size-360: 90rem; /* 1440px */
--size-400: 100rem; /* 1600px */
--size-480: 120rem; /* 1920px */
/* == Semantic Spacing == */
--spacing-none: var(--size-0);
--spacing-hairline: var(--size-px);
--spacing-tight: var(--size-1);
--spacing-snug: var(--size-2);
--spacing-cozy: var(--size-4);
--spacing-comfortable: var(--size-6);
--spacing-relaxed: var(--size-8);
--spacing-spacious: var(--size-12);
--spacing-generous: var(--size-16);
--spacing-luxurious: var(--size-24);
--spacing-expansive: var(--size-32);
/* === LIST STYLING === */
/* == List Indentation Levels == */
--element-list-indent-l1: var(--spacing-cozy);
--element-list-indent-l2: var(--spacing-cozy);
--element-list-indent-l3: var(--spacing-cozy);
--element-list-indent-l4: var(--spacing-cozy);
/* == Unordered List Symbols == */
--element-ul-symbol-l1: '⯃';
--element-ul-symbol-l2: '⯁';
--element-ul-symbol-l3: '⯆';
--element-ul-symbol-l4: '⯀';
/* == Ordered List Styling == */
--element-ol-prefix-l1: '';
--element-ol-style-l1: decimal;
--element-ol-suffix-l1: '.)';
--element-ol-prefix-l2: '';
--element-ol-style-l2: lower-alpha;
--element-ol-suffix-l2: '.)';
--element-ol-prefix-l3: '';
--element-ol-style-l3: decimal-leading-zero;
--element-ol-suffix-l3: '';
--element-ol-prefix-l4: '';
--element-ol-style-l4: lower-greek;
--element-ol-suffix-l4: '.)';
/* === COLORS === */
/* == Default Palette == */
/* Blacks, Grays & Off-Whites */
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
--color-palette-smoky-mauve: oklch(50% 0.054 308.622deg); /* Smoky: #6C5B7B */
/* Reds */
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
/* Pinks & Magentas */
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
/* Oranges & Browns */
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
/* Yellows */
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
/* Greens */
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
/* Blues & Teals */
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
/* == Semantic Colors == */
/* Primary Colors */
--color-primary: var(--color-palette-lava);
--color-primary-surface: var(--color-palette-sweet-pink);
--color-primary-emphasis: var(--color-palette-cherry-red);
/* Secondary Colors */
--color-secondary: var(--color-palette-seafoam);
--color-secondary-surface: var(--color-palette-olive-drab);
--color-secondary-emphasis: var(--color-palette-mint-green);
/* Tertiary Colors */
--color-tertiary: var(--color-palette-bright-canary);
--color-tertiary-surface: var(--color-palette-pale-lemon);
--color-tertiary-emphasis: var(--color-palette-ripe-lemon);
/* Quartenary Colors */
--color-quarternary: var(--color-palette-powder-blue);
--color-quarternary-surface: var(--color-palette-aqua);
--color-quarternary-emphasis: var(--color-palette-slate-blue);
/* Text Base Colors */
--color-text-primary: var(--color-palette-black-ink); /* Main Body Texts, headlines */
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
/* Surface Base Colors */
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
/* Border Base Colors */
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
/* State Colors */
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
/* Link Colors */
--color-text-link: var(--color-text-tertiary);
--color-text-link-hover: var(--color-secondary);
--color-text-link-visited: var(--color-palette-fuchsia);
/* Focus States */
--color-focus-ring: var(--color-primary);
--color-focus-ring-offset: var(--color-primary);
--color-focus-indicator: var(--color-primary-emphasis)
/* Overlays */;
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
/* Loading/Skeleton */
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
/* Dividers */
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
/* Shadows */
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
/* Highlights */
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
}