From 2881c1200d9ca43c07d64e10cc7a13721dcd2166 Mon Sep 17 00:00:00 2001 From: ben7sys Date: Sun, 17 Nov 2024 12:28:20 +0100 Subject: [PATCH] =?UTF-8?q?Das=20CSS-Variables-System=20wurde=20erfolgreic?= =?UTF-8?q?h=20=C3=BCberarbeitet=20und=20implementiert.=20Die=20wichtigste?= =?UTF-8?q?n=20Verbesserungen=20sind:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- public/css/animations.css | 4 ++ public/css/base.css | 56 ++++++++------- public/css/components.css | 104 +++++++++++++++------------ public/css/footer.css | 54 +++++++------- public/css/header-line.css | 2 + public/css/header.css | 56 ++++++++------- public/css/layout.css | 29 +++++--- public/css/responsive.css | 140 ++++++++++++++++++++----------------- public/css/variables.css | 124 ++++++++++++++++++++++++++++---- public/impressum.html | 10 ++- 10 files changed, 361 insertions(+), 218 deletions(-) diff --git a/public/css/animations.css b/public/css/animations.css index 685e6c2..5b57a17 100644 --- a/public/css/animations.css +++ b/public/css/animations.css @@ -1,4 +1,8 @@ @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(var(--space-md)); + } to { opacity: 1; transform: translateY(0); diff --git a/public/css/base.css b/public/css/base.css index 6f61284..120b941 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -6,15 +6,15 @@ html { height: 100%; - transition: color var(--transition-speed) ease, - background-color var(--transition-speed) ease; + font-size: var(--font-size-base); + transition: var(--theme-transition); } body { font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg-main); color: var(--text); - line-height: 1.6; + line-height: var(--line-height-base); min-height: 100vh; transition: var(--theme-transition); will-change: background-color, color; @@ -25,46 +25,50 @@ h1, h2, h3 { } h1 { - font-size: 2rem; - margin-bottom: var(--spacing-lg); + font-size: var(--font-size-xxl); + margin-bottom: var(--space-lg); color: var(--text); opacity: 0.85; - font-weight: 600; + font-weight: var(--font-weight-semibold); transition: var(--theme-transition); } h2 { - font-size: 2rem; - margin-bottom: var(--spacing-lg); + font-size: var(--font-size-xl); + margin-bottom: var(--space-lg); color: var(--text); + font-weight: var(--font-weight-medium); transition: var(--theme-transition); } h3 { + font-size: var(--font-size-lg); color: var(--text); - margin-bottom: var(--spacing-md); + margin-bottom: var(--space-md); + font-weight: var(--font-weight-medium); transition: var(--theme-transition); } h1.h1-hero { - font-size: 2.5rem; - margin: var(--spacing-xl); - padding: var(--spacing-xl); + font-size: var(--font-size-xxxl); + margin: var(--space-xl); + padding: var(--space-xl); color: var(--text); opacity: 0.85; - font-weight: 100; + font-weight: var(--font-weight-light); text-align: center; } p { - margin-bottom: var(--spacing-md); + margin-bottom: var(--space-md); + font-size: var(--font-size-md); transition: var(--theme-transition); } a { color: var(--primary); text-decoration: none; - transition: var(--theme-transition), opacity var(--transition-speed) ease; + transition: var(--theme-transition), opacity var(--transition-speed) var(--transition-timing); } a:hover { @@ -76,13 +80,13 @@ main { } .container { - max-width: 1200px; + max-width: var(--content-width-xl); margin: 0 auto; - padding: 0 var(--spacing-md); + padding: 0 var(--container-padding); } section { - padding: var(--spacing-xl) 0; + padding: var(--section-spacing) 0; } /* Utility classes */ @@ -90,12 +94,12 @@ section { text-align: center; } -.mb-1 { margin-bottom: var(--spacing-sm); } -.mb-2 { margin-bottom: var(--spacing-md); } -.mb-3 { margin-bottom: var(--spacing-lg); } -.mb-4 { margin-bottom: var(--spacing-xl); } +.mb-1 { margin-bottom: var(--space-xs); } +.mb-2 { margin-bottom: var(--space-md); } +.mb-3 { margin-bottom: var(--space-lg); } +.mb-4 { margin-bottom: var(--space-xl); } -.mt-1 { margin-top: var(--spacing-sm); } -.mt-2 { margin-top: var(--spacing-md); } -.mt-3 { margin-top: var(--spacing-lg); } -.mt-4 { margin-top: var(--spacing-xl); } +.mt-1 { margin-top: var(--space-xs); } +.mt-2 { margin-top: var(--space-md); } +.mt-3 { margin-top: var(--space-lg); } +.mt-4 { margin-top: var(--space-xl); } diff --git a/public/css/components.css b/public/css/components.css index f9c01c1..ff4d0db 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -1,28 +1,28 @@ /* Card Base Styles */ .card-base { background: var(--bg-card); - padding: var(--spacing-xl); - border-radius: var(--border-radius); + padding: var(--space-xl); + border-radius: var(--radius-md); border: 1px solid var(--border-color); - transition: transform var(--transition-speed) ease, - border-color var(--transition-speed) ease; + transition: transform var(--transition-speed) var(--transition-timing), + border-color var(--transition-speed) var(--transition-timing); } /* Mission Vision Cards */ .mission-vision { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--spacing-lg); - margin: var(--spacing-xl) 0; + gap: var(--space-lg); + margin: var(--space-xl) 0; } .tooltip-container { background: var(--bg-card); - padding: var(--spacing-xl); - border-radius: var(--border-radius); + padding: var(--space-xl); + border-radius: var(--radius-md); border: 1px solid var(--border-color); cursor: pointer; - transition: border-color 0.3s ease; + transition: border-color var(--transition-speed) var(--transition-timing); } .tooltip-container:hover { @@ -31,12 +31,14 @@ .tooltip-container h3 { color: var(--primary); - margin-bottom: var(--spacing-md); + margin-bottom: var(--space-md); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); } .tooltip-header { position: relative; - padding-right: 30px; + padding-right: var(--space-xl); } .tooltip-header::after { @@ -45,7 +47,7 @@ right: 0; top: 0; color: var(--primary); - transition: transform 0.3s ease; + transition: transform var(--transition-speed) var(--transition-timing); } .tooltip-container.active .tooltip-header::after { @@ -56,26 +58,30 @@ max-height: 0; overflow: hidden; opacity: 0; - transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out; + transition: max-height var(--transition-speed) var(--transition-timing), + opacity var(--transition-speed) var(--transition-timing), + margin var(--transition-speed) var(--transition-timing); margin-top: 0; + font-size: var(--font-size-md); + line-height: var(--line-height-base); } .tooltip-container.active .tooltip-content { max-height: 500px; opacity: 1; - margin-top: var(--spacing-lg); - padding-top: var(--spacing-lg); + margin-top: var(--space-lg); + padding-top: var(--space-lg); border-top: 1px solid var(--border-color); } /* Service Cards */ .service-card { background: var(--bg-card); - padding: var(--spacing-xl); - border-radius: var(--border-radius); + padding: var(--space-xl); + border-radius: var(--radius-md); border: 1px solid var(--border-color); - margin: var(--spacing-lg) 0; - transition: border-color 0.3s ease; + margin: var(--space-lg) 0; + transition: border-color var(--transition-speed) var(--transition-timing); } .service-card:hover { @@ -84,14 +90,18 @@ .service-card h3 { color: var(--primary); - margin-bottom: var(--spacing-md); + margin-bottom: var(--space-md); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); } .service-card li { list-style: none; - margin-bottom: var(--spacing-sm); + margin-bottom: var(--space-sm); position: relative; - padding-left: 1.5em; + padding-left: var(--space-lg); + font-size: var(--font-size-md); + line-height: var(--line-height-base); } .service-card li::before { @@ -104,12 +114,12 @@ /* Contact Info Card */ .contact-info { background: var(--bg-card); - padding: var(--spacing-xl); - border-radius: var(--border-radius); + padding: var(--space-xl); + border-radius: var(--radius-md); border: 1px solid var(--border-color); - margin: var(--spacing-xl) 0; + margin: var(--space-xl) 0; text-align: center; - transition: border-color 0.3s ease; + transition: border-color var(--transition-speed) var(--transition-timing); } .contact-info:hover { @@ -117,15 +127,17 @@ } .contact-info p { - margin-bottom: var(--spacing-lg); + margin-bottom: var(--space-lg); color: var(--text); + font-size: var(--font-size-md); + line-height: var(--line-height-base); } .contact-links { display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-md); + gap: var(--space-md); } .contact-link { @@ -133,11 +145,12 @@ text-decoration: none; display: flex; align-items: center; - gap: var(--spacing-sm); - padding: var(--spacing-sm) var(--spacing-md); - border-radius: var(--border-radius); - transition: all 0.3s ease; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + transition: all var(--transition-speed) var(--transition-timing); border: 1px solid transparent; + font-size: var(--font-size-md); } .contact-link:hover { @@ -146,47 +159,48 @@ } .contact-link i { - font-size: 1.2em; + font-size: var(--font-size-lg); color: var(--primary); } /* Signal Icon Styles */ .signal-icon { color: var(--primary); - width: 1.2em; - height: 1.2em; + width: var(--font-size-lg); + height: var(--font-size-lg); } /* Quote Styles */ .welcome-quote { - font-size: 1.1rem; + font-size: var(--font-size-lg); text-align: center; - padding: var(--spacing-xl); + padding: var(--space-xl); + line-height: var(--line-height-relaxed); } .logo-sub { display: block; text-align: center; - font-size: 0.9rem; + font-size: var(--font-size-sm); color: var(--text-muted); - margin: var(--spacing-xl) auto; - max-width: 800px; - line-height: 1.4; + margin: var(--space-xl) auto; + max-width: var(--content-width-md); + line-height: var(--line-height-relaxed); font-style: italic; } /* Mobile Optimizations */ @media (max-width: 768px) { .tooltip-container { - padding: var(--spacing-lg); + padding: var(--space-lg); } .tooltip-content { - font-size: 1rem; - line-height: 1.6; + font-size: var(--font-size-md); + line-height: var(--line-height-base); } .service-card { - padding: var(--spacing-lg); + padding: var(--space-lg); } } diff --git a/public/css/footer.css b/public/css/footer.css index 33c154c..688ee89 100644 --- a/public/css/footer.css +++ b/public/css/footer.css @@ -1,46 +1,47 @@ footer { background: var(--bg-card); - padding: var(--spacing-xl) var(--spacing-md); - margin-top: calc(2 * var(--spacing-xl)); + padding: var(--space-xl) var(--container-padding); + margin-top: var(--space-xxl); border-top: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-lg); + gap: var(--space-lg); } .contact-block { display: flex; flex-wrap: wrap; justify-content: center; - gap: var(--spacing-lg); - margin-bottom: var(--spacing-sm); + gap: var(--space-lg); + margin-bottom: var(--space-sm); } .contact-item { display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--space-sm); } .contact-item i { color: var(--primary); - font-size: 1.2rem; + font-size: var(--font-size-lg); } .contact-item .signal-icon { color: var(--primary); - width: 1.2rem; - height: 1.2rem; + width: var(--font-size-lg); + height: var(--font-size-lg); } .contact-item a { color: var(--text); text-decoration: none; - transition: all 0.3s ease; - padding: 0.3rem 0.5rem; - border-radius: var(--border-radius); + transition: all var(--transition-speed) var(--transition-timing); + padding: var(--space-xxs) var(--space-xs); + border-radius: var(--radius-sm); background-color: rgba(var(--bg-hover-rgb), 0.4); + font-size: var(--font-size-md); } .contact-item a:hover { @@ -55,17 +56,17 @@ footer { .social-links { display: flex; - gap: var(--spacing-lg); + gap: var(--space-lg); justify-content: center; } .social-links a { color: var(--text); text-decoration: none; - transition: all 0.3s ease; - padding: 0.5rem; - border-radius: var(--border-radius); - font-size: 1.5rem; + transition: all var(--transition-speed) var(--transition-timing); + padding: var(--space-xs); + border-radius: var(--radius-sm); + font-size: var(--font-size-xl); background-color: rgba(var(--bg-hover-rgb), 0.4); } @@ -77,21 +78,21 @@ footer { .legal-links { text-align: center; - font-size: 0.95rem; + font-size: var(--font-size-sm); color: var(--text-muted); - padding-top: var(--spacing-md); + padding-top: var(--space-md); } .legal-links a { color: var(--text); text-decoration: none; - margin: 0 var(--spacing-sm); - transition: all 0.3s ease; - padding: 0.4rem 0.8rem; - border-radius: var(--border-radius); + margin: 0 var(--space-sm); + transition: all var(--transition-speed) var(--transition-timing); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-sm); position: relative; background-color: rgba(var(--bg-hover-rgb), 0.4); - font-weight: 500; + font-weight: var(--font-weight-medium); letter-spacing: 0.2px; } @@ -103,7 +104,7 @@ footer { bottom: 0; left: 50%; background-color: var(--primary); - transition: all 0.3s ease; + transition: all var(--transition-speed) var(--transition-timing); transform: translateX(-50%); } @@ -114,5 +115,6 @@ footer { } .legal-links a:hover::after { - width: calc(100% - 1.6rem); + width: calc(100% - var(--space-xl)); } + diff --git a/public/css/header-line.css b/public/css/header-line.css index dfebf3b..9321f6f 100644 --- a/public/css/header-line.css +++ b/public/css/header-line.css @@ -4,6 +4,8 @@ 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), diff --git a/public/css/header.css b/public/css/header.css index eb66ebb..a528040 100644 --- a/public/css/header.css +++ b/public/css/header.css @@ -5,36 +5,38 @@ header { background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2)); backdrop-filter: blur(10px); height: var(--header-height); - z-index: 1000; + z-index: var(--z-header); border-bottom: 1px solid var(--border-color); left: 0; right: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transition: var(--theme-transition), transform 0.7s ease, box-shadow 0.7s ease; + transition: var(--theme-transition), transform 0.7s var(--transition-timing), box-shadow 0.7s var(--transition-timing); transform: var(--gpu-accelerated); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); } .header-content { display: flex; justify-content: space-between; align-items: center; - max-width: 1100px; + max-width: var(--content-width-lg); margin: 0 auto; - padding: 0 var(--spacing-md); + padding: 0 var(--container-padding); height: 100%; } .logo-container { display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--space-sm); } .logo-text { - font-size: 1.7rem; - font-weight: bold; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); text-align: center; - line-height: 1; + line-height: var(--line-height-tight); } .logo-text span:nth-child(1) { color: var(--primary-gradient-1); } @@ -44,19 +46,19 @@ header { .nav-menu { display: flex; - gap: var(--spacing-lg); + gap: var(--space-lg); align-items: center; - padding-top: 16px; + padding-top: var(--space-md); } .nav-menu a { color: var(--text); text-decoration: none; - font-size: 1.05rem; - font-weight: 500; - transition: all 0.3s ease; - padding: 0.5rem 0.8rem; - border-radius: var(--border-radius); + font-size: var(--font-size-md); + font-weight: var(--font-weight-medium); + transition: all var(--transition-speed) var(--transition-timing); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-md); position: relative; background-color: rgba(var(--bg-hover-nav)); letter-spacing: 0.3px; @@ -70,7 +72,7 @@ header { bottom: 0; left: 50%; background-color: var(--primary); - transition: all 0.3s ease; + transition: all var(--transition-speed) var(--transition-timing); transform: translateX(-50%); } @@ -81,7 +83,7 @@ header { } .nav-menu a:hover::after { - width: calc(100% - 1.6rem); + width: calc(100% - var(--space-xl)); } .theme-toggle { @@ -89,16 +91,16 @@ header { border: none; color: var(--text); cursor: pointer; - padding: var(--spacing-sm); + padding: var(--space-sm); display: flex; align-items: center; justify-content: center; transition: var(--theme-transition); - border-radius: var(--border-radius); + border-radius: var(--radius-md); position: relative; - width: 40px; - height: 40px; - margin-left: var(--spacing-sm); + width: calc(var(--space-xl) * 1.25); + height: calc(var(--space-xl) * 1.25); + margin-left: var(--space-sm); } .theme-toggle:hover { @@ -109,14 +111,14 @@ header { .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; - border-radius: var(--border-radius); + border-radius: var(--radius-md); } .theme-toggle i { - font-size: 1.2rem; + font-size: var(--font-size-lg); position: absolute; - transition: opacity var(--transition-speed) ease, - transform var(--transition-speed) ease; + transition: opacity var(--transition-speed) var(--transition-timing), + transform var(--transition-speed) var(--transition-timing); transform: var(--gpu-accelerated); } @@ -153,5 +155,5 @@ header { border: none; color: var(--text); cursor: pointer; - padding: var(--spacing-sm); + padding: var(--space-sm); } diff --git a/public/css/layout.css b/public/css/layout.css index 613450b..ab0d6a7 100644 --- a/public/css/layout.css +++ b/public/css/layout.css @@ -1,24 +1,35 @@ .container { - max-width: 800px; + max-width: var(--content-width-lg); margin: 0 auto; - padding: 0 1rem; + padding: 0 var(--container-padding); } main { - margin-top: 2rem; - padding: 2rem 0; + margin-top: var(--space-xl); + padding: var(--space-xl) 0; } section { - margin: 4rem 0; + margin: var(--space-xxl) 0; opacity: 0; - transform: translateY(20px); - animation: fadeIn 0.6s ease forwards; + transform: translateY(var(--space-lg)); + animation: fadeIn var(--transition-speed) var(--transition-timing) forwards; } .mission-vision { display: grid; grid-template-columns: 1fr 1fr; - gap: 2rem; - margin: 2rem 0; + gap: var(--space-xl); + margin: var(--space-xl) 0; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(var(--space-lg)); + } + to { + opacity: 1; + transform: translateY(0); + } } diff --git a/public/css/responsive.css b/public/css/responsive.css index 5231d03..09dac3a 100644 --- a/public/css/responsive.css +++ b/public/css/responsive.css @@ -1,7 +1,7 @@ /* Tablet Devices */ @media (max-width: 768px) { .container { - padding: 0 1.5rem; + padding: 0 var(--container-padding); } header { @@ -9,47 +9,47 @@ } .logo-text { - font-size: 1.8rem; + font-size: var(--font-size-lg); } h1 { - font-size: 2rem; + font-size: var(--font-size-xl); } h2 { - font-size: 1.5rem; + font-size: var(--font-size-lg); } .h1-hero { - font-size: 2rem !important; - margin: 1rem !important; - padding: 1rem !important; + font-size: var(--font-size-xxl) !important; + margin: var(--space-md) !important; + padding: var(--space-md) !important; } .mission-vision { grid-template-columns: 1fr; - gap: 1rem; + gap: var(--space-md); } .service-card { - padding: 1.5rem; + padding: var(--space-lg); } .welcome-quote { - font-size: 1rem; - padding: 1rem; + font-size: var(--font-size-md); + padding: var(--space-md); } .logo-sub { - font-size: 0.85rem; - padding: 1.5rem; + font-size: var(--font-size-sm); + padding: var(--space-lg); margin: 0; } .mobile-menu-toggle { display: block; - padding: 0.5rem; - transition: opacity 0.3s ease; + padding: var(--space-xs); + transition: opacity var(--transition-speed) var(--transition-timing); } .mobile-menu-toggle:active { @@ -67,43 +67,59 @@ flex-direction: column; align-items: center; border-bottom: 1px solid var(--border-color); - padding: 2rem 1rem; - gap: 1.5rem; + padding: var(--space-xl) var(--space-md); + gap: var(--space-lg); overflow-y: auto; -webkit-overflow-scrolling: touch; + z-index: var(--z-header); } .nav-menu.active { display: flex; - animation: fadeIn 0.3s ease-in-out; + animation: fadeIn var(--transition-speed) var(--transition-timing); } .nav-menu a { - padding: 0.75rem 1.5rem; + padding: var(--space-sm) var(--space-lg); width: 100%; text-align: center; - border-radius: 0.25rem; - transition: background-color 0.3s ease; + border-radius: var(--radius-sm); + transition: background-color var(--transition-speed) var(--transition-timing); } .nav-menu a:hover { - background-color: var(--hover-color); + background-color: var(--bg-hover-rgb); } .contact-block { flex-direction: column; align-items: center; } + + footer { + padding: var(--space-lg) var(--container-padding); + gap: var(--space-md); + } + + .contact-block { + flex-direction: column; + gap: var(--space-md); + } + + .social-links { + gap: var(--space-md); + } + + .legal-links a { + display: block; + margin: var(--space-xs) 0; + } } /* Mobile Devices */ @media (max-width: 480px) { - :root { - --header-height: 80px; - } - .container { - padding: 0 1rem; + padding: 0 var(--container-padding); } header { @@ -111,90 +127,86 @@ } .logo-text { - font-size: 1.6rem; + font-size: var(--font-size-lg); } main { - margin-top: 1rem; - padding: 1rem 0; + margin-top: var(--space-md); + padding: var(--space-md) 0; } section { - margin: 2rem 0; + margin: var(--space-xl) 0; } h1.h1-hero { - font-size: 1.75rem !important; - margin: 0.5rem !important; - padding: 0.5rem !important; + font-size: var(--font-size-xl) !important; + margin: var(--space-xs) !important; + padding: var(--space-xs) !important; } .welcome-quote { - font-size: 0.95rem; - padding: 0.5rem; - line-height: 1.5; + font-size: var(--font-size-sm); + padding: var(--space-xs); + line-height: var(--line-height-base); } .service-card { - padding: 1.25rem; - margin: 1rem 0; + padding: var(--space-md); + margin: var(--space-md) 0; } .service-card h3 { - font-size: 1.2rem; + font-size: var(--font-size-lg); } .contact-info { - padding: 1.5rem; - margin: 1rem 0; + padding: var(--space-lg); + margin: var(--space-md) 0; } .contact-info a { - padding: 0.5rem 0; - font-size: 0.95rem; + padding: var(--space-xs) 0; + font-size: var(--font-size-sm); } .logo-sub { - font-size: 0.8rem; - line-height: 1.4; - padding: 1.5rem; + font-size: var(--font-size-xs); + line-height: var(--line-height-base); + padding: var(--space-lg); margin: 0; } } /* Small Mobile Devices */ @media (max-width: 320px) { - :root { - --header-height: 60px; - } - header { height: var(--header-height); } .logo-text { - font-size: 1.4rem; + font-size: var(--font-size-md); } h1.h1-hero { - font-size: 1.5rem !important; + font-size: var(--font-size-lg) !important; } .service-card { - padding: 1rem; + padding: var(--space-md); } .contact-info { - padding: 1rem; + padding: var(--space-md); } .welcome-quote { - font-size: 0.9rem; + font-size: var(--font-size-xs); } .logo-sub { - font-size: 0.75rem; - padding: 0.75rem; + font-size: var(--font-size-xs); + padding: var(--space-sm); } } @@ -202,7 +214,7 @@ @media (hover: none) { .contact-info a, .nav-menu a { - padding: 0.75rem; + padding: var(--space-sm); min-height: 44px; display: flex; align-items: center; @@ -225,14 +237,14 @@ /* Fix for notched phones */ @supports (padding: max(0px)) { header { - padding-left: max(1rem, env(safe-area-inset-left)); - padding-right: max(1rem, env(safe-area-inset-right)); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); } .nav-menu { - padding-left: max(1rem, env(safe-area-inset-left)); - padding-right: max(1rem, env(safe-area-inset-right)); - padding-bottom: max(1rem, env(safe-area-inset-bottom)); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + padding-bottom: var(--safe-area-inset-bottom); } } diff --git a/public/css/variables.css b/public/css/variables.css index 2da77f4..c70ac64 100644 --- a/public/css/variables.css +++ b/public/css/variables.css @@ -1,5 +1,66 @@ +/* Base Theme Variables */ :root { - /* Light theme (default) */ + /* 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; @@ -15,8 +76,16 @@ --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; @@ -28,18 +97,43 @@ --bg-hover-nav: 20, 20, 20; } -/* Common tokens */ -:root { - --spacing-sm: 0.5rem; - --spacing-md: 1rem; - --spacing-lg: 1.5rem; - --spacing-xl: 2rem; - --border-radius: 8px; - --transition-speed: 0.3s; - --header-height: 100px; - - /* Theme transition with GPU acceleration */ - --theme-transition: color var(--transition-speed) ease, - background-color var(--transition-speed) ease; - --gpu-accelerated: translate3d(0, 0, 0); +/* 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)); + } } diff --git a/public/impressum.html b/public/impressum.html index 964d2c9..b1d3b22 100644 --- a/public/impressum.html +++ b/public/impressum.html @@ -28,11 +28,11 @@

Angaben gemäß § 5 TMG

7SYS

Benjamin Bader
- [hidden]
- [hidden]

+ Baden-Württemberg
+ Germany

Kontakt

-

Telefon: [hidden]
+

Signal Messenger
E-Mail: info@7sys.de

Umsatzsteuer-ID

@@ -40,9 +40,7 @@ DE[hidden]

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV

-

Benjamin Bader
- [hidden]
- [hidden]

+

Benjamin Bader