ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Das CSS-Variables-System wurde erfolgreich überarbeitet und implementiert. Die wichtigsten Verbesserungen sind:

Browse Source 
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
This commit is contained in:
ben7sys
2024-11-17 12:28:20 +01:00
parent ac328d8b3e
commit 2881c1200d
10 changed files with 361 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/animations.css
View File

@@ -1,4 +1,8 @@
@keyframes fadeIn { @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(var(--space-md));
}
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);

56
public/css/base.css
View File

@@ -6,15 +6,15 @@
html { html {
height: 100%; height: 100%;
transition: color var(--transition-speed) ease, font-size: var(--font-size-base);
background-color var(--transition-speed) ease; transition: var(--theme-transition);
} }
body { body {
font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
background: var(--bg-main); background: var(--bg-main);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: var(--line-height-base);
min-height: 100vh; min-height: 100vh;
transition: var(--theme-transition); transition: var(--theme-transition);
will-change: background-color, color; will-change: background-color, color;
@@ -25,46 +25,50 @@ h1, h2, h3 {
} }
h1 { h1 {
font-size: 2rem; font-size: var(--font-size-xxl);
margin-bottom: var(--spacing-lg); margin-bottom: var(--space-lg);
color: var(--text); color: var(--text);
opacity: 0.85; opacity: 0.85;
font-weight: 600; font-weight: var(--font-weight-semibold);
transition: var(--theme-transition); transition: var(--theme-transition);
} }
h2 { h2 {
font-size: 2rem; font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg); margin-bottom: var(--space-lg);
color: var(--text); color: var(--text);
font-weight: var(--font-weight-medium);
transition: var(--theme-transition); transition: var(--theme-transition);
} }
h3 { h3 {
font-size: var(--font-size-lg);
color: var(--text); color: var(--text);
margin-bottom: var(--spacing-md); margin-bottom: var(--space-md);
font-weight: var(--font-weight-medium);
transition: var(--theme-transition); transition: var(--theme-transition);
} }
h1.h1-hero { h1.h1-hero {
font-size: 2.5rem; font-size: var(--font-size-xxxl);
margin: var(--spacing-xl); margin: var(--space-xl);
padding: var(--spacing-xl); padding: var(--space-xl);
color: var(--text); color: var(--text);
opacity: 0.85; opacity: 0.85;
font-weight: 100; font-weight: var(--font-weight-light);
text-align: center; text-align: center;
} }
p { p {
margin-bottom: var(--spacing-md); margin-bottom: var(--space-md);
font-size: var(--font-size-md);
transition: var(--theme-transition); transition: var(--theme-transition);
} }
a { a {
color: var(--primary); color: var(--primary);
text-decoration: none; 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 { a:hover {
@@ -76,13 +80,13 @@ main {
} }
.container { .container {
max-width: 1200px; max-width: var(--content-width-xl);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--spacing-md); padding: 0 var(--container-padding);
} }
section { section {
padding: var(--spacing-xl) 0; padding: var(--section-spacing) 0;
} }
/* Utility classes */ /* Utility classes */
@@ -90,12 +94,12 @@ section {
text-align: center; text-align: center;
} }
.mb-1 { margin-bottom: var(--spacing-sm); } .mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--spacing-md); } .mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--spacing-lg); } .mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); } .mb-4 { margin-bottom: var(--space-xl); }
.mt-1 { margin-top: var(--spacing-sm); } .mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--spacing-md); } .mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--spacing-lg); } .mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--spacing-xl); } .mt-4 { margin-top: var(--space-xl); }

104
public/css/components.css
View File

@@ -1,28 +1,28 @@
/* Card Base Styles */ /* Card Base Styles */
.card-base { .card-base {
background: var(--bg-card); background: var(--bg-card);
padding: var(--spacing-xl); padding: var(--space-xl);
border-radius: var(--border-radius); border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
transition: transform var(--transition-speed) ease, transition: transform var(--transition-speed) var(--transition-timing),
border-color var(--transition-speed) ease; border-color var(--transition-speed) var(--transition-timing);
} }
/* Mission Vision Cards */ /* Mission Vision Cards */
.mission-vision { .mission-vision {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg); gap: var(--space-lg);
margin: var(--spacing-xl) 0; margin: var(--space-xl) 0;
} }
.tooltip-container { .tooltip-container {
background: var(--bg-card); background: var(--bg-card);
padding: var(--spacing-xl); padding: var(--space-xl);
border-radius: var(--border-radius); border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
cursor: pointer; cursor: pointer;
transition: border-color 0.3s ease; transition: border-color var(--transition-speed) var(--transition-timing);
} }
.tooltip-container:hover { .tooltip-container:hover {
@@ -31,12 +31,14 @@
.tooltip-container h3 { .tooltip-container h3 {
color: var(--primary); 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 { .tooltip-header {
position: relative; position: relative;
padding-right: 30px; padding-right: var(--space-xl);
} }
.tooltip-header::after { .tooltip-header::after {
@@ -45,7 +47,7 @@
right: 0; right: 0;
top: 0; top: 0;
color: var(--primary); color: var(--primary);
transition: transform 0.3s ease; transition: transform var(--transition-speed) var(--transition-timing);
} }
.tooltip-container.active .tooltip-header::after { .tooltip-container.active .tooltip-header::after {
@@ -56,26 +58,30 @@
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
opacity: 0; 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; margin-top: 0;
font-size: var(--font-size-md);
line-height: var(--line-height-base);
} }
.tooltip-container.active .tooltip-content { .tooltip-container.active .tooltip-content {
max-height: 500px; max-height: 500px;
opacity: 1; opacity: 1;
margin-top: var(--spacing-lg); margin-top: var(--space-lg);
padding-top: var(--spacing-lg); padding-top: var(--space-lg);
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
/* Service Cards */ /* Service Cards */
.service-card { .service-card {
background: var(--bg-card); background: var(--bg-card);
padding: var(--spacing-xl); padding: var(--space-xl);
border-radius: var(--border-radius); border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
margin: var(--spacing-lg) 0; margin: var(--space-lg) 0;
transition: border-color 0.3s ease; transition: border-color var(--transition-speed) var(--transition-timing);
} }
.service-card:hover { .service-card:hover {
@@ -84,14 +90,18 @@
.service-card h3 { .service-card h3 {
color: var(--primary); 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 { .service-card li {
list-style: none; list-style: none;
margin-bottom: var(--spacing-sm); margin-bottom: var(--space-sm);
position: relative; 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 { .service-card li::before {
@@ -104,12 +114,12 @@
/* Contact Info Card */ /* Contact Info Card */
.contact-info { .contact-info {
background: var(--bg-card); background: var(--bg-card);
padding: var(--spacing-xl); padding: var(--space-xl);
border-radius: var(--border-radius); border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
margin: var(--spacing-xl) 0; margin: var(--space-xl) 0;
text-align: center; text-align: center;
transition: border-color 0.3s ease; transition: border-color var(--transition-speed) var(--transition-timing);
} }
.contact-info:hover { .contact-info:hover {
@@ -117,15 +127,17 @@
} }
.contact-info p { .contact-info p {
margin-bottom: var(--spacing-lg); margin-bottom: var(--space-lg);
color: var(--text); color: var(--text);
font-size: var(--font-size-md);
line-height: var(--line-height-base);
} }
.contact-links { .contact-links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--spacing-md); gap: var(--space-md);
} }
.contact-link { .contact-link {
@@ -133,11 +145,12 @@
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: var(--space-sm);
padding: var(--spacing-sm) var(--spacing-md); padding: var(--space-sm) var(--space-md);
border-radius: var(--border-radius); border-radius: var(--radius-md);
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
border: 1px solid transparent; border: 1px solid transparent;
font-size: var(--font-size-md);
} }
.contact-link:hover { .contact-link:hover {
@@ -146,47 +159,48 @@
} }
.contact-link i { .contact-link i {
font-size: 1.2em; font-size: var(--font-size-lg);
color: var(--primary); color: var(--primary);
} }
/* Signal Icon Styles */ /* Signal Icon Styles */
.signal-icon { .signal-icon {
color: var(--primary); color: var(--primary);
width: 1.2em; width: var(--font-size-lg);
height: 1.2em; height: var(--font-size-lg);
} }
/* Quote Styles */ /* Quote Styles */
.welcome-quote { .welcome-quote {
font-size: 1.1rem; font-size: var(--font-size-lg);
text-align: center; text-align: center;
padding: var(--spacing-xl); padding: var(--space-xl);
line-height: var(--line-height-relaxed);
} }
.logo-sub { .logo-sub {
display: block; display: block;
text-align: center; text-align: center;
font-size: 0.9rem; font-size: var(--font-size-sm);
color: var(--text-muted); color: var(--text-muted);
margin: var(--spacing-xl) auto; margin: var(--space-xl) auto;
max-width: 800px; max-width: var(--content-width-md);
line-height: 1.4; line-height: var(--line-height-relaxed);
font-style: italic; font-style: italic;
} }
/* Mobile Optimizations */ /* Mobile Optimizations */
@media (max-width: 768px) { @media (max-width: 768px) {
.tooltip-container { .tooltip-container {
padding: var(--spacing-lg); padding: var(--space-lg);
} }
.tooltip-content { .tooltip-content {
font-size: 1rem; font-size: var(--font-size-md);
line-height: 1.6; line-height: var(--line-height-base);
} }
.service-card { .service-card {
padding: var(--spacing-lg); padding: var(--space-lg);
} }
} }

54
public/css/footer.css
View File

@@ -1,46 +1,47 @@
footer { footer {
background: var(--bg-card); background: var(--bg-card);
padding: var(--spacing-xl) var(--spacing-md); padding: var(--space-xl) var(--container-padding);
margin-top: calc(2 * var(--spacing-xl)); margin-top: var(--space-xxl);
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--spacing-lg); gap: var(--space-lg);
} }
.contact-block { .contact-block {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: var(--spacing-lg); gap: var(--space-lg);
margin-bottom: var(--spacing-sm); margin-bottom: var(--space-sm);
} }
.contact-item { .contact-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: var(--space-sm);
} }
.contact-item i { .contact-item i {
color: var(--primary); color: var(--primary);
font-size: 1.2rem; font-size: var(--font-size-lg);
} }
.contact-item .signal-icon { .contact-item .signal-icon {
color: var(--primary); color: var(--primary);
width: 1.2rem; width: var(--font-size-lg);
height: 1.2rem; height: var(--font-size-lg);
} }
.contact-item a { .contact-item a {
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
padding: 0.3rem 0.5rem; padding: var(--space-xxs) var(--space-xs);
border-radius: var(--border-radius); border-radius: var(--radius-sm);
background-color: rgba(var(--bg-hover-rgb), 0.4); background-color: rgba(var(--bg-hover-rgb), 0.4);
font-size: var(--font-size-md);
} }
.contact-item a:hover { .contact-item a:hover {
@@ -55,17 +56,17 @@ footer {
.social-links { .social-links {
display: flex; display: flex;
gap: var(--spacing-lg); gap: var(--space-lg);
justify-content: center; justify-content: center;
} }
.social-links a { .social-links a {
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
padding: 0.5rem; padding: var(--space-xs);
border-radius: var(--border-radius); border-radius: var(--radius-sm);
font-size: 1.5rem; font-size: var(--font-size-xl);
background-color: rgba(var(--bg-hover-rgb), 0.4); background-color: rgba(var(--bg-hover-rgb), 0.4);
} }
@@ -77,21 +78,21 @@ footer {
.legal-links { .legal-links {
text-align: center; text-align: center;
font-size: 0.95rem; font-size: var(--font-size-sm);
color: var(--text-muted); color: var(--text-muted);
padding-top: var(--spacing-md); padding-top: var(--space-md);
} }
.legal-links a { .legal-links a {
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
margin: 0 var(--spacing-sm); margin: 0 var(--space-sm);
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
padding: 0.4rem 0.8rem; padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius); border-radius: var(--radius-sm);
position: relative; position: relative;
background-color: rgba(var(--bg-hover-rgb), 0.4); background-color: rgba(var(--bg-hover-rgb), 0.4);
font-weight: 500; font-weight: var(--font-weight-medium);
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
@@ -103,7 +104,7 @@ footer {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
background-color: var(--primary); background-color: var(--primary);
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
transform: translateX(-50%); transform: translateX(-50%);
} }
@@ -114,5 +115,6 @@ footer {
} }
.legal-links a:hover::after { .legal-links a:hover::after {
width: calc(100% - 1.6rem); width: calc(100% - var(--space-xl));
} }

2
public/css/header-line.css
View File

@@ -4,6 +4,8 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
z-index: var(--z-above);
transition: opacity var(--transition-speed) var(--transition-timing);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--primary-gradient-1), var(--primary-gradient-1),

56
public/css/header.css
View File

@@ -5,36 +5,38 @@ header {
background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2)); background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2));
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
height: var(--header-height); height: var(--header-height);
z-index: 1000; z-index: var(--z-header);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
left: 0; left: 0;
right: 0; right: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 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); transform: var(--gpu-accelerated);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1100px; max-width: var(--content-width-lg);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--spacing-md); padding: 0 var(--container-padding);
height: 100%; height: 100%;
} }
.logo-container { .logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: var(--space-sm);
} }
.logo-text { .logo-text {
font-size: 1.7rem; font-size: var(--font-size-xl);
font-weight: bold; font-weight: var(--font-weight-bold);
text-align: center; text-align: center;
line-height: 1; line-height: var(--line-height-tight);
} }
.logo-text span:nth-child(1) { color: var(--primary-gradient-1); } .logo-text span:nth-child(1) { color: var(--primary-gradient-1); }
@@ -44,19 +46,19 @@ header {
.nav-menu { .nav-menu {
display: flex; display: flex;
gap: var(--spacing-lg); gap: var(--space-lg);
align-items: center; align-items: center;
padding-top: 16px; padding-top: var(--space-md);
} }
.nav-menu a { .nav-menu a {
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
font-size: 1.05rem; font-size: var(--font-size-md);
font-weight: 500; font-weight: var(--font-weight-medium);
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
padding: 0.5rem 0.8rem; padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius); border-radius: var(--radius-md);
position: relative; position: relative;
background-color: rgba(var(--bg-hover-nav)); background-color: rgba(var(--bg-hover-nav));
letter-spacing: 0.3px; letter-spacing: 0.3px;
@@ -70,7 +72,7 @@ header {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
background-color: var(--primary); background-color: var(--primary);
transition: all 0.3s ease; transition: all var(--transition-speed) var(--transition-timing);
transform: translateX(-50%); transform: translateX(-50%);
} }
@@ -81,7 +83,7 @@ header {
} }
.nav-menu a:hover::after { .nav-menu a:hover::after {
width: calc(100% - 1.6rem); width: calc(100% - var(--space-xl));
} }
.theme-toggle { .theme-toggle {
@@ -89,16 +91,16 @@ header {
border: none; border: none;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
padding: var(--spacing-sm); padding: var(--space-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: var(--theme-transition); transition: var(--theme-transition);
border-radius: var(--border-radius); border-radius: var(--radius-md);
position: relative; position: relative;
width: 40px; width: calc(var(--space-xl) * 1.25);
height: 40px; height: calc(var(--space-xl) * 1.25);
margin-left: var(--spacing-sm); margin-left: var(--space-sm);
} }
.theme-toggle:hover { .theme-toggle:hover {
@@ -109,14 +111,14 @@ header {
.theme-toggle:focus-visible { .theme-toggle:focus-visible {
outline: 2px solid var(--primary); outline: 2px solid var(--primary);
outline-offset: 2px; outline-offset: 2px;
border-radius: var(--border-radius); border-radius: var(--radius-md);
} }
.theme-toggle i { .theme-toggle i {
font-size: 1.2rem; font-size: var(--font-size-lg);
position: absolute; position: absolute;
transition: opacity var(--transition-speed) ease, transition: opacity var(--transition-speed) var(--transition-timing),
transform var(--transition-speed) ease; transform var(--transition-speed) var(--transition-timing);
transform: var(--gpu-accelerated); transform: var(--gpu-accelerated);
} }
@@ -153,5 +155,5 @@ header {
border: none; border: none;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
padding: var(--spacing-sm); padding: var(--space-sm);
} }

29
public/css/layout.css
View File

@@ -1,24 +1,35 @@
.container { .container {
max-width: 800px; max-width: var(--content-width-lg);
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 0 var(--container-padding);
} }
main { main {
margin-top: 2rem; margin-top: var(--space-xl);
padding: 2rem 0; padding: var(--space-xl) 0;
} }
section { section {
margin: 4rem 0; margin: var(--space-xxl) 0;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(var(--space-lg));
animation: fadeIn 0.6s ease forwards; animation: fadeIn var(--transition-speed) var(--transition-timing) forwards;
} }
.mission-vision { .mission-vision {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 2rem; gap: var(--space-xl);
margin: 2rem 0; margin: var(--space-xl) 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(var(--space-lg));
}
to {
opacity: 1;
transform: translateY(0);
}
} }

140
public/css/responsive.css
View File

@@ -1,7 +1,7 @@
/* Tablet Devices */ /* Tablet Devices */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
padding: 0 1.5rem; padding: 0 var(--container-padding);
} }
header { header {
@@ -9,47 +9,47 @@
} }
.logo-text { .logo-text {
font-size: 1.8rem; font-size: var(--font-size-lg);
} }
h1 { h1 {
font-size: 2rem; font-size: var(--font-size-xl);
} }
h2 { h2 {
font-size: 1.5rem; font-size: var(--font-size-lg);
} }
.h1-hero { .h1-hero {
font-size: 2rem !important; font-size: var(--font-size-xxl) !important;
margin: 1rem !important; margin: var(--space-md) !important;
padding: 1rem !important; padding: var(--space-md) !important;
} }
.mission-vision { .mission-vision {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: var(--space-md);
} }
.service-card { .service-card {
padding: 1.5rem; padding: var(--space-lg);
} }
.welcome-quote { .welcome-quote {
font-size: 1rem; font-size: var(--font-size-md);
padding: 1rem; padding: var(--space-md);
} }
.logo-sub { .logo-sub {
font-size: 0.85rem; font-size: var(--font-size-sm);
padding: 1.5rem; padding: var(--space-lg);
margin: 0; margin: 0;
} }
.mobile-menu-toggle { .mobile-menu-toggle {
display: block; display: block;
padding: 0.5rem; padding: var(--space-xs);
transition: opacity 0.3s ease; transition: opacity var(--transition-speed) var(--transition-timing);
} }
.mobile-menu-toggle:active { .mobile-menu-toggle:active {
@@ -67,43 +67,59 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: 2rem 1rem; padding: var(--space-xl) var(--space-md);
gap: 1.5rem; gap: var(--space-lg);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
z-index: var(--z-header);
} }
.nav-menu.active { .nav-menu.active {
display: flex; display: flex;
animation: fadeIn 0.3s ease-in-out; animation: fadeIn var(--transition-speed) var(--transition-timing);
} }
.nav-menu a { .nav-menu a {
padding: 0.75rem 1.5rem; padding: var(--space-sm) var(--space-lg);
width: 100%; width: 100%;
text-align: center; text-align: center;
border-radius: 0.25rem; border-radius: var(--radius-sm);
transition: background-color 0.3s ease; transition: background-color var(--transition-speed) var(--transition-timing);
} }
.nav-menu a:hover { .nav-menu a:hover {
background-color: var(--hover-color); background-color: var(--bg-hover-rgb);
} }
.contact-block { .contact-block {
flex-direction: column; flex-direction: column;
align-items: center; 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 */ /* Mobile Devices */
@media (max-width: 480px) { @media (max-width: 480px) {
:root {
--header-height: 80px;
}
.container { .container {
padding: 0 1rem; padding: 0 var(--container-padding);
} }
header { header {
@@ -111,90 +127,86 @@
} }
.logo-text { .logo-text {
font-size: 1.6rem; font-size: var(--font-size-lg);
} }
main { main {
margin-top: 1rem; margin-top: var(--space-md);
padding: 1rem 0; padding: var(--space-md) 0;
} }
section { section {
margin: 2rem 0; margin: var(--space-xl) 0;
} }
h1.h1-hero { h1.h1-hero {
font-size: 1.75rem !important; font-size: var(--font-size-xl) !important;
margin: 0.5rem !important; margin: var(--space-xs) !important;
padding: 0.5rem !important; padding: var(--space-xs) !important;
} }
.welcome-quote { .welcome-quote {
font-size: 0.95rem; font-size: var(--font-size-sm);
padding: 0.5rem; padding: var(--space-xs);
line-height: 1.5; line-height: var(--line-height-base);
} }
.service-card { .service-card {
padding: 1.25rem; padding: var(--space-md);
margin: 1rem 0; margin: var(--space-md) 0;
} }
.service-card h3 { .service-card h3 {
font-size: 1.2rem; font-size: var(--font-size-lg);
} }
.contact-info { .contact-info {
padding: 1.5rem; padding: var(--space-lg);
margin: 1rem 0; margin: var(--space-md) 0;
} }
.contact-info a { .contact-info a {
padding: 0.5rem 0; padding: var(--space-xs) 0;
font-size: 0.95rem; font-size: var(--font-size-sm);
} }
.logo-sub { .logo-sub {
font-size: 0.8rem; font-size: var(--font-size-xs);
line-height: 1.4; line-height: var(--line-height-base);
padding: 1.5rem; padding: var(--space-lg);
margin: 0; margin: 0;
} }
} }
/* Small Mobile Devices */ /* Small Mobile Devices */
@media (max-width: 320px) { @media (max-width: 320px) {
:root {
--header-height: 60px;
}
header { header {
height: var(--header-height); height: var(--header-height);
} }
.logo-text { .logo-text {
font-size: 1.4rem; font-size: var(--font-size-md);
} }
h1.h1-hero { h1.h1-hero {
font-size: 1.5rem !important; font-size: var(--font-size-lg) !important;
} }
.service-card { .service-card {
padding: 1rem; padding: var(--space-md);
} }
.contact-info { .contact-info {
padding: 1rem; padding: var(--space-md);
} }
.welcome-quote { .welcome-quote {
font-size: 0.9rem; font-size: var(--font-size-xs);
} }
.logo-sub { .logo-sub {
font-size: 0.75rem; font-size: var(--font-size-xs);
padding: 0.75rem; padding: var(--space-sm);
} }
} }
@@ -202,7 +214,7 @@
@media (hover: none) { @media (hover: none) {
.contact-info a, .contact-info a,
.nav-menu a { .nav-menu a {
padding: 0.75rem; padding: var(--space-sm);
min-height: 44px; min-height: 44px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -225,14 +237,14 @@
/* Fix for notched phones */ /* Fix for notched phones */
@supports (padding: max(0px)) { @supports (padding: max(0px)) {
header { header {
padding-left: max(1rem, env(safe-area-inset-left)); padding-left: var(--safe-area-inset-left);
padding-right: max(1rem, env(safe-area-inset-right)); padding-right: var(--safe-area-inset-right);
} }
.nav-menu { .nav-menu {
padding-left: max(1rem, env(safe-area-inset-left)); padding-left: var(--safe-area-inset-left);
padding-right: max(1rem, env(safe-area-inset-right)); padding-right: var(--safe-area-inset-right);
padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-bottom: var(--safe-area-inset-bottom);
} }
} }

124
public/css/variables.css
View File

@@ -1,5 +1,66 @@
/* Base Theme Variables */
:root { :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: #3a7be0;
--primary-gradient-1: #112fcf; --primary-gradient-1: #112fcf;
--primary-gradient-2: #3b3bc8; --primary-gradient-2: #3b3bc8;
@@ -15,8 +76,16 @@
--border-color: rgba(58, 123, 224, 0.1); --border-color: rgba(58, 123, 224, 0.1);
--bg-hover-rgb: 237, 237, 237; --bg-hover-rgb: 237, 237, 237;
--bg-hover-nav: 207, 207, 207; --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"] { [data-theme="dark"] {
--bg-main: #0a0a0a; --bg-main: #0a0a0a;
--bg-card: #141414; --bg-card: #141414;
@@ -28,18 +97,43 @@
--bg-hover-nav: 20, 20, 20; --bg-hover-nav: 20, 20, 20;
} }
/* Common tokens */ /* Responsive Adjustments */
:root { @media (max-width: 768px) {
--spacing-sm: 0.5rem; :root {
--spacing-md: 1rem; /* Tablet Adjustments */
--spacing-lg: 1.5rem; --font-size-base: 0.9375rem;
--spacing-xl: 2rem; --header-height: 80px;
--border-radius: 8px; --container-padding: var(--space-lg);
--transition-speed: 0.3s; --section-spacing: var(--space-xl);
--header-height: 100px; }
}
/* Theme transition with GPU acceleration */
--theme-transition: color var(--transition-speed) ease, @media (max-width: 480px) {
background-color var(--transition-speed) ease; :root {
--gpu-accelerated: translate3d(0, 0, 0); /* 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));
}
} }

10
public/impressum.html
View File

@@ -28,11 +28,11 @@
<h2>Angaben gemäß § 5 TMG</h2> <h2>Angaben gemäß § 5 TMG</h2>
<p>7SYS<br> <p>7SYS<br>
<p>Benjamin Bader<br> <p>Benjamin Bader<br>
[hidden]<br> Baden-Württemberg<br>
[hidden]</p> Germany</p>
<h3>Kontakt</h3> <h3>Kontakt</h3>
<p>Telefon: [hidden]<br> <p>Signal Messenger<br>
E-Mail: info@7sys.de</p> E-Mail: info@7sys.de</p>
<h3>Umsatzsteuer-ID</h3> <h3>Umsatzsteuer-ID</h3>
@@ -40,9 +40,7 @@
DE[hidden]</p> DE[hidden]</p>
<h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3> <h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
<p>Benjamin Bader<br> <p>Benjamin Bader<br></p>
[hidden]<br>
[hidden]</p>
</div> </div>
</section> </section>
</div> </div>