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
7SYS Website
Eine professionelle Website für IT-Lösungen und digitale Souveränität.
Projektbeschreibung
Diese Website dient als digitale Präsenz von 7SYS, einem spezialisierten IT-Dienstleister mit Fokus auf maßgeschneiderte IT-Lösungen und digitale Souveränität. Die Plattform präsentiert das Leistungsportfolio und die Expertise im Bereich IT-Infrastruktur, Systemadministration und Automatisierung.
Hauptfunktionen
- Responsive Single-Page Design
- Dynamisches Theme-System (Hell/Dunkel)
- Interaktive Service-Cards mit detaillierten Informationen
- Modulare Komponenten-Architektur
- Optimierte Performance durch CSS-Animationen
- Barrierefreie Benutzeroberfläche
Technologien
-
Frontend:
- HTML5
- CSS3 (modulare Struktur mit separaten Dateien für bessere Wartbarkeit)
- Vanilla JavaScript (components.js, theme.js)
- Font Awesome Icons
- Google Fonts (Montserrat, Open Sans)
-
Architektur:
- Komponenten-basierte Struktur
- Modulares CSS-System
- Responsive Design mit CSS Variables
- Progressive Enhancement
Setup/Installation
- Repository klonen:
git clone [repository-url]
- Projektverzeichnis öffnen:
cd web7syspub
- Einen lokalen Webserver starten, zum Beispiel mit Python:
# Python 3
python -m http.server 8000
- Website im Browser öffnen:
http://localhost:8000/public
Projektstruktur
public/
├── components/ # Wiederverwendbare HTML-Komponenten
├── css/ # Modulare CSS-Dateien
│ ├── animations.css
│ ├── base.css
│ ├── components.css
│ ├── layout.css
│ └── variables.css
├── js/ # JavaScript-Module
│ ├── components.js
│ └── theme.js
└── index.html # Hauptseite
Features im Detail
- Responsive Design: Optimierte Darstellung auf allen Geräten
- Themensystem: Automatische Anpassung an Systemeinstellungen
- Modulare CSS-Struktur: Verbesserte Wartbarkeit und Performance
- Barrierefreiheit: Semantische HTML-Struktur und ARIA-Attribute
- Performance: Optimierte Ladezeiten durch modulare Ressourcen
Kontakt
- E-Mail: info@7sys.de
- Signal: Verfügbar über Website-Link