From 3ce8d981b00dbb98760940d25856b7a1be1eb82b Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 22 Mar 2026 03:08:27 +0000 Subject: [PATCH] Add data_visualization/css/base.css --- data_visualization/css/base.css | 102 ++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 data_visualization/css/base.css diff --git a/data_visualization/css/base.css b/data_visualization/css/base.css new file mode 100644 index 0000000..a633688 --- /dev/null +++ b/data_visualization/css/base.css @@ -0,0 +1,102 @@ +:root { + /* Farbdefinitionen */ + --color-bg: #f9fafb; + --color-primary: #1e3a8a; + --color-secondary: #475569; + --color-accent: #2563eb; + --color-text: #111827; + --color-footer-bg: #e5e7eb; + + /* Spacing und Maße */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + + /* Typografie */ + --font-base: 'system-ui', sans-serif; + --font-size-base: 1rem; + --font-size-lg: 1.25rem; + --line-height-base: 1.5; + + /* Layout */ + --max-width: 1200px; +} + +/* RESET UND BASISSTYLES */ +html { + box-sizing: border-box; + font-size: 16px; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--color-text); + background-color: var(--color-bg); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +h1 { + font-size: var(--font-size-lg); + color: var(--color-primary); + margin-bottom: var(--spacing-md); +} + +p { + margin-bottom: var(--spacing-md); + color: var(--color-secondary); +} + +/* APP SHELL */ +.app-header { + width: 100%; + max-width: var(--max-width); + background-color: var(--color-primary); + color: #ffffff; + padding: var(--spacing-md); + text-align: center; +} + +.app-footer { + width: 100%; + max-width: var(--max-width); + background-color: var(--color-footer-bg); + text-align: center; + padding: var(--spacing-sm); + margin-top: auto; + font-size: 0.875rem; + color: var(--color-secondary); +} + +.app-footer small { + display: block; +} + +.app-footer small::after { + content: " © 2026 Donau2Space.de"; +} + +/* RESPONSIVE ANPASSUNGEN */ +@media (min-width: 640px) { + h1 { + font-size: 1.5rem; + } +} + +@media (min-width: 1024px) { + body { + font-size: 1.125rem; + } +} \ No newline at end of file