From 73617dec818facc1107b25308e57929e09465c07 Mon Sep 17 00:00:00 2001 From: Mika Date: Thu, 5 Mar 2026 15:47:58 +0000 Subject: [PATCH] Add visualization_tool/css/base.css --- visualization_tool/css/base.css | 111 ++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 visualization_tool/css/base.css diff --git a/visualization_tool/css/base.css b/visualization_tool/css/base.css new file mode 100644 index 0000000..4c46e58 --- /dev/null +++ b/visualization_tool/css/base.css @@ -0,0 +1,111 @@ +/* ============================ + CSS Reset & Variablen + ============================ */ + +:root { + --color-primary: #1e88e5; + --color-accent: #e53935; + --color-success: #43a047; + --color-warning: #fbc02d; + --color-text: #212121; + --color-text-light: #fafafa; + --bg-light: #f5f5f5; + --bg-dark: #212121; + --font-base: 'Segoe UI', Arial, sans-serif; + --font-size-base: 16px; + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 2rem; + --max-content-width: 1200px; + --transition-fast: 0.2s ease; + --transition-base: 0.3s ease; +} + +html { + box-sizing: border-box; + font-size: 100%; + scroll-behavior: smooth; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; + font-family: var(--font-base); + font-size: var(--font-size-base); + color: var(--color-text); + background-color: var(--bg-light); + line-height: 1.5; + display: flex; + flex-direction: column; +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; +} + +a { + text-decoration: none; + color: inherit; + transition: color var(--transition-fast); +} + +a:hover, a:focus { + color: var(--color-primary); +} + +/* ============================ + Body & Grundlayout + ============================ */ + +.app-header { + background-color: var(--bg-dark); + color: var(--color-text-light); + padding: var(--spacing-md); + text-align: center; +} + +.app-footer { + background-color: var(--bg-dark); + color: var(--color-text-light); + padding: var(--spacing-sm) var(--spacing-md); + text-align: center; + margin-top: auto; + font-size: 0.875rem; +} + +.app-footer::after { + content: '© 2026 Donau2Space.de'; + display: block; + margin-top: var(--spacing-xs); +} + +main { + width: 100%; + max-width: var(--max-content-width); + margin: 0 auto; + padding: var(--spacing-md); + flex: 1; +} + +@media (min-width: 640px) { + body { + font-size: 1.0625rem; + } +} + +@media (min-width: 1024px) { + body { + font-size: 1.125rem; + } +} \ No newline at end of file