Vincent Mahnke
945820ec5b
- Add local Lucide icon system (5 optimized icons) - Create Apple-style bottom navigation bar (fixed at bottom on mobile) - Add language toggle (replaces dropdown selector) - Improve theme support with proper light/dark mode colors - Add comprehensive ARIA labels and semantic HTML - Hide main menu on mobile (≤666px) when bottom nav is active - Add hreflang attributes for language switching Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
152 lines
6.9 KiB
CSS
152 lines
6.9 KiB
CSS
/* biome-ignore-all format: aligned columns for readability */
|
|
|
|
/* Theme colours. */
|
|
|
|
/* Override css variables in "assets/css/_custom.css" */
|
|
|
|
:root {
|
|
/* Brand colours. */
|
|
--color-brand: var(--color-grey-900);
|
|
--color-brand-alt: var(--color-grey-500);
|
|
|
|
/* Brand variations */
|
|
--color-brand-900: oklch(from var(--color-brand) calc(l - 0.5) c h);
|
|
--color-brand-800: oklch(from var(--color-brand) calc(l - 0.4) c h);
|
|
--color-brand-700: oklch(from var(--color-brand) calc(l - 0.3) c h);
|
|
--color-brand-600: oklch(from var(--color-brand) calc(l - 0.2) c h);
|
|
--color-brand-500: oklch(from var(--color-brand) calc(l - 0.1) c h);
|
|
--color-brand-400: oklch(from var(--color-brand) l c h);
|
|
--color-brand-300: oklch(from var(--color-brand) calc(l + 0.1) c h);
|
|
--color-brand-200: oklch(from var(--color-brand) calc(l + 0.2) c h);
|
|
--color-brand-100: oklch(from var(--color-brand) calc(l + 0.3) c h);
|
|
|
|
/* Brand alt variations */
|
|
--color-brand-alt-900: oklch(from var(--color-brand-alt) calc(l - 0.5) c h);
|
|
--color-brand-alt-800: oklch(from var(--color-brand-alt) calc(l - 0.4) c h);
|
|
--color-brand-alt-700: oklch(from var(--color-brand-alt) calc(l - 0.3) c h);
|
|
--color-brand-alt-600: oklch(from var(--color-brand-alt) calc(l - 0.2) c h);
|
|
--color-brand-alt-500: oklch(from var(--color-brand-alt) calc(l - 0.1) c h);
|
|
--color-brand-alt-400: oklch(from var(--color-brand-alt) l c h);
|
|
--color-brand-alt-300: oklch(from var(--color-brand-alt) calc(l + 0.1) c h);
|
|
--color-brand-alt-200: oklch(from var(--color-brand-alt) calc(l + 0.2) c h);
|
|
--color-brand-alt-100: oklch(from var(--color-brand-alt) calc(l + 0.3) c h);
|
|
|
|
/* Base colours. */
|
|
--color-black: oklch(1% 0.01 0);
|
|
--color-grey-900: oklch(21% 0.01 0);
|
|
--color-grey-800: oklch(28% 0.01 0);
|
|
--color-grey-700: oklch(37% 0.01 0);
|
|
--color-grey-600: oklch(45% 0.01 0);
|
|
--color-grey-500: oklch(55% 0.01 0);
|
|
--color-grey-400: oklch(71% 0.01 0);
|
|
--color-grey-300: oklch(87% 0.01 0);
|
|
--color-grey-200: oklch(93% 0.01 0);
|
|
--color-grey-100: oklch(95% 0 0);
|
|
--color-white: oklch(99% 0 0);
|
|
--color-red: oklch(65% 0.2 24);
|
|
--color-yellow: oklch(65% 0.12 80);
|
|
--color-green: oklch(65% 0.19 138);
|
|
--color-blue: oklch(65% 0.16 247);
|
|
|
|
/* Transparent colours. */
|
|
--color-black-90: oklch(1% 0.01 0 / 0.9);
|
|
--color-black-80: oklch(1% 0.01 0 / 0.8);
|
|
--color-black-70: oklch(1% 0.01 0 / 0.7);
|
|
--color-black-60: oklch(1% 0.01 0 / 0.6);
|
|
--color-black-50: oklch(1% 0.01 0 / 0.5);
|
|
--color-black-40: oklch(1% 0.01 0 / 0.4);
|
|
--color-black-30: oklch(1% 0.01 0 / 0.3);
|
|
--color-black-20: oklch(1% 0.01 0 / 0.2);
|
|
--color-black-10: oklch(1% 0.01 0 / 0.1);
|
|
--color-white-20: oklch(99% 0 0 / 0.2);
|
|
--color-white-10: oklch(99% 0 0 / 0.1);
|
|
|
|
/* Text colours. */
|
|
--color-text: light-dark(var(--color-black), var(--color-white));
|
|
--color-text-bg: light-dark(var(--color-white), var(--color-black));
|
|
--color-text-meta: light-dark(var(--color-grey-600), var(--color-grey-300));
|
|
--color-headings: light-dark(var(--color-grey-900), var(--color-grey-100));
|
|
--color-code: light-dark(var(--color-grey-900), var(--color-grey-100));
|
|
|
|
/* Link colours. */
|
|
--color-link: light-dark(var(--color-brand-500), var(--color-grey-100));
|
|
--color-link-visited: light-dark(var(--color-brand-500), var(--color-grey-100));
|
|
--color-link-hover: light-dark(var(--color-brand-200), var(--color-grey-300));
|
|
--color-link-active: light-dark(var(--color-red), var(--color-red));
|
|
|
|
/* Button colours. */
|
|
--color-button: light-dark(var(--color-brand-400), var(--color-brand-100));
|
|
--color-button-text: light-dark(var(--color-white), var(--color-white));
|
|
--color-button-hover: light-dark(var(--color-brand-200), var(--color-brand-300));
|
|
--color-button-text-hover: light-dark(var(--color-white), var(--color-white));
|
|
|
|
/* Disabled colours. */
|
|
--color-disabled: light-dark(var(--color-grey-400), var(--color-grey-600));
|
|
--color-disabled-alt: light-dark(var(--color-grey-100), var(--color-grey-800));
|
|
|
|
/* Border colours. */
|
|
--color-border: light-dark(var(--color-brand-400), var(--color-brand-200));
|
|
--color-border-light: light-dark(var(--color-brand-200), var(--color-brand-100));
|
|
--color-border-dark: light-dark(var(--color-brand-600), var(--color-brand-300));
|
|
|
|
/* Background colours. */
|
|
--color-body-bg: light-dark(var(--color-white), var(--color-black));
|
|
--color-page-bg: light-dark(transparent, transparent);
|
|
--color-header-bg: light-dark(transparent, transparent);
|
|
--color-footer-bg: light-dark(transparent, transparent);
|
|
--color-backdrop: light-dark(var(--color-black-60), var(--color-black-80));
|
|
|
|
/* Mobil menu colours. */
|
|
--color-mobile-menu: light-dark(var(--color-white), var(--color-brand-400));
|
|
--color-mobile-menu-cover: light-dark(var(--color-black-20), var(--color-black-20));
|
|
|
|
/* Form colours. */
|
|
--color-accent: light-dark(var(--color-brand-400), var(--color-brand-200));
|
|
|
|
/* Row (e.g. in table) colours. */
|
|
--color-row-header: light-dark(transparent, transparent);
|
|
--color-row-odd: light-dark(var(--color-grey-100), var(--color-grey-900));
|
|
--color-row-even: light-dark(transparent, transparent);
|
|
|
|
/* Highlight colours. */
|
|
--color-highlight: light-dark(var(--color-brand-400), var(--color-brand-100));
|
|
--color-mark-highlight: light-dark(var(--color-red), var(--color-red));
|
|
|
|
/* Status colours. */
|
|
--color-info: var(--color-blue);
|
|
--color-success: var(--color-green);
|
|
--color-warning: var(--color-yellow);
|
|
--color-error: var(--color-red);
|
|
|
|
|
|
|
|
/* Follow user system dark/light setting. */
|
|
color-scheme: light dark;
|
|
|
|
/* Initialize the theme variable */
|
|
--theme: light;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--theme: dark;
|
|
}
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@container style(--theme: light) {
|
|
[data-theme="inverted"] {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
@container style(--theme: dark) {
|
|
[data-theme="inverted"] {
|
|
color-scheme: light;
|
|
}
|
|
}
|