Files
web7sys/public/css/header-line.css
ben7sys 2881c1200d Das CSS-Variables-System wurde erfolgreich überarbeitet und implementiert. Die wichtigsten Verbesserungen sind:
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
2024-11-17 12:28:20 +01:00

17 lines
411 B
CSS

.header-horizontal-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
z-index: var(--z-above);
transition: opacity var(--transition-speed) var(--transition-timing);
background: linear-gradient(
90deg,
var(--primary-gradient-1),
var(--primary-gradient-2),
var(--primary-gradient-3),
var(--primary-gradient-4)
);
}