2881c1200d
Konsistentes Spacing-System: Mathematische Skala basierend auf --space-unit (0.25rem) Logische Abstufungen von xxs bis xxxl Responsive Anpassungen über Container-Padding und Section-Spacing Erweiterte Typografie-Kontrolle: Skalierbare Schriftgrößen basierend auf --font-size-base Definierte Schriftgewichte und Zeilenhöhen Responsive Anpassungen der Basis-Schriftgröße Verbesserte Responsive-Struktur: Breakpoint-Referenzen in Variablen Automatische Anpassungen durch CSS-Variablen Safe-Area-Insets für moderne Geräte Layout-System: Definierte Content-Breiten Z-Index-Skala Einheitliche Border-Radius-Werte Performance-Optimierungen: Hardware-beschleunigte Transitionen Optimierte Animation-Timings Konsistente Transition-Eigenschaften Die Migration wurde schrittweise durchgeführt: variables.css: Neue Basis-Variablen definiert base.css: Grundlegende Typografie und Layout angepasst header.css & header-line.css: Navigation und Header-Elemente optimiert components.css: Alle Komponenten auf neue Variablen umgestellt responsive.css: Breakpoint-spezifische Anpassungen implementiert animations.css: Animationen vereinheitlicht footer.css: Footer-Styles optimiert Das neue System bietet: Bessere Wartbarkeit durch zentrale Steuerung Konsistente Skalierung über alle Breakpoints Flexibilität für zukünftige Anpassungen Volle Kompatibilität mit dem Theme-System
140 lines
4.2 KiB
CSS
140 lines
4.2 KiB
CSS
/* Base Theme Variables */
|
|
:root {
|
|
/* Breakpoints - for reference only, not used as variables */
|
|
--breakpoint-mobile-sm: 320px;
|
|
--breakpoint-mobile: 480px;
|
|
--breakpoint-tablet: 768px;
|
|
--breakpoint-desktop: 1200px;
|
|
|
|
/* Spacing Scale */
|
|
--space-unit: 0.25rem;
|
|
--space-xxs: calc(var(--space-unit) * 1); /* 0.25rem */
|
|
--space-xs: calc(var(--space-unit) * 2); /* 0.5rem */
|
|
--space-sm: calc(var(--space-unit) * 3); /* 0.75rem */
|
|
--space-md: calc(var(--space-unit) * 4); /* 1rem */
|
|
--space-lg: calc(var(--space-unit) * 6); /* 1.5rem */
|
|
--space-xl: calc(var(--space-unit) * 8); /* 2rem */
|
|
--space-xxl: calc(var(--space-unit) * 12); /* 3rem */
|
|
--space-xxxl: calc(var(--space-unit) * 16); /* 4rem */
|
|
|
|
/* Typography Scale */
|
|
--font-size-base: 1rem;
|
|
--font-size-xs: calc(var(--font-size-base) * 0.75); /* 12px */
|
|
--font-size-sm: calc(var(--font-size-base) * 0.875); /* 14px */
|
|
--font-size-md: var(--font-size-base); /* 16px */
|
|
--font-size-lg: calc(var(--font-size-base) * 1.25); /* 20px */
|
|
--font-size-xl: calc(var(--font-size-base) * 1.5); /* 24px */
|
|
--font-size-xxl: calc(var(--font-size-base) * 2); /* 32px */
|
|
--font-size-xxxl: calc(var(--font-size-base) * 2.5); /* 40px */
|
|
|
|
/* Line Heights */
|
|
--line-height-tight: 1.2;
|
|
--line-height-base: 1.6;
|
|
--line-height-relaxed: 1.8;
|
|
|
|
/* Font Weights */
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* Layout */
|
|
--container-padding: var(--space-md);
|
|
--section-spacing: var(--space-xxl);
|
|
--header-height: 100px;
|
|
--content-width-sm: 640px;
|
|
--content-width-md: 768px;
|
|
--content-width-lg: 1024px;
|
|
--content-width-xl: 1200px;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-speed: 0.3s;
|
|
--transition-timing: ease;
|
|
--theme-transition: color var(--transition-speed) var(--transition-timing),
|
|
background-color var(--transition-speed) var(--transition-timing);
|
|
|
|
/* Light Theme Colors (default) */
|
|
--primary: #3a7be0;
|
|
--primary-gradient-1: #112fcf;
|
|
--primary-gradient-2: #3b3bc8;
|
|
--primary-gradient-3: #5743ed;
|
|
--primary-gradient-4: #784dd9;
|
|
|
|
--bg-main: #f8f8f8;
|
|
--bg-card: #f1f1f1;
|
|
--text: #333333;
|
|
--text-muted: #666666;
|
|
--header-gradient-1: rgba(237, 237, 237, 0.9);
|
|
--header-gradient-2: rgba(228, 228, 228, 0.9);
|
|
--border-color: rgba(58, 123, 224, 0.1);
|
|
--bg-hover-rgb: 237, 237, 237;
|
|
--bg-hover-nav: 207, 207, 207;
|
|
|
|
/* Z-index Scale */
|
|
--z-below: -1;
|
|
--z-normal: 1;
|
|
--z-above: 10;
|
|
--z-header: 100;
|
|
--z-modal: 1000;
|
|
}
|
|
|
|
/* Dark Theme */
|
|
[data-theme="dark"] {
|
|
--bg-main: #0a0a0a;
|
|
--bg-card: #141414;
|
|
--text: #e0e0e0;
|
|
--text-muted: #888888;
|
|
--header-gradient-1: rgba(14, 14, 14, 0.9);
|
|
--header-gradient-2: rgba(41, 41, 41, 0.9);
|
|
--bg-hover-rgb: 17, 17, 17;
|
|
--bg-hover-nav: 20, 20, 20;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
/* Tablet Adjustments */
|
|
--font-size-base: 0.9375rem;
|
|
--header-height: 80px;
|
|
--container-padding: var(--space-lg);
|
|
--section-spacing: var(--space-xl);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
/* Mobile Adjustments */
|
|
--font-size-base: 0.875rem;
|
|
--header-height: 70px;
|
|
--container-padding: var(--space-md);
|
|
--section-spacing: var(--space-lg);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
:root {
|
|
/* Small Mobile Adjustments */
|
|
--font-size-base: 0.8125rem;
|
|
--header-height: 60px;
|
|
--container-padding: var(--space-sm);
|
|
--section-spacing: var(--space-md);
|
|
}
|
|
}
|
|
|
|
/* Safe Area Insets for Notched Devices */
|
|
@supports (padding: max(0px)) {
|
|
:root {
|
|
--safe-area-inset-top: max(0px, env(safe-area-inset-top));
|
|
--safe-area-inset-right: max(0px, env(safe-area-inset-right));
|
|
--safe-area-inset-bottom: max(0px, env(safe-area-inset-bottom));
|
|
--safe-area-inset-left: max(0px, env(safe-area-inset-left));
|
|
}
|
|
}
|