diff --git a/data_visualization/css/base.css b/data_visualization/css/base.css new file mode 100644 index 0000000..079707c --- /dev/null +++ b/data_visualization/css/base.css @@ -0,0 +1,90 @@ +:root { + /* Farbvariablen */ + --color-bg-dark: #0d1117; + --color-bg-light: #161b22; + --color-text-primary: #f0f6fc; + --color-text-secondary: #8b949e; + --color-accent: #58a6ff; + + /* Typografie */ + --font-family-base: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + --font-size-base: 16px; + --font-size-sm: 0.875rem; + --font-size-lg: 1.125rem; + + /* Abstände */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 2rem; + --spacing-xl: 4rem; + + /* Layout */ + --max-content-width: 1200px; +} + +/* Reset und Grundstruktur */ +html, body { + margin: 0; + padding: 0; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + background-color: var(--color-bg-dark); + color: var(--color-text-primary); + height: 100%; + min-height: 100%; +} + +body { + display: flex; + flex-direction: column; + align-items: stretch; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* App Layout */ +.app-header { + background-color: var(--color-bg-light); + padding: var(--spacing-md); + text-align: center; + border-bottom: 1px solid var(--color-text-secondary); +} + +.app-main { + flex: 1; + width: 100%; + max-width: var(--max-content-width); + margin: 0 auto; + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--color-bg-dark); +} + +.app-footer { + background-color: var(--color-bg-light); + color: var(--color-text-secondary); + text-align: center; + padding: var(--spacing-sm) var(--spacing-md); + border-top: 1px solid var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.app-footer::after { + content: "© 2026 Donau2Space.de"; + display: block; + margin-top: var(--spacing-xs); +} + +/* Responsives Verhalten */ +@media (min-width: 640px) { + .app-main { + padding: var(--spacing-xl) var(--spacing-lg); + } +} + +@media (min-width: 1024px) { + body { + font-size: 1rem; + } +} \ No newline at end of file