diff --git a/results_visualization/css/layout.css b/results_visualization/css/layout.css new file mode 100644 index 0000000..c6b0d80 --- /dev/null +++ b/results_visualization/css/layout.css @@ -0,0 +1,97 @@ +/* ============================== + App Layout + ============================== */ + +.app-shell { + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: #f7f7f7; + color: #222; + font-family: sans-serif; +} + +.app-header { + background-color: #ffffff; + border-bottom: 1px solid #ddd; + padding: 1rem 2rem; + font-size: 1.25rem; + font-weight: 600; + display: flex; + align-items: center; + justify-content: space-between; +} + +.app-main { + flex: 1; + display: flex; + flex-direction: row; + padding: 1rem 2rem; + gap: 1rem; + flex-wrap: wrap; +} + +.app-footer { + background-color: #fafafa; + border-top: 1px solid #ddd; + text-align: center; + padding: 0.75rem; + font-size: 0.875rem; + color: #555; +} + +/* ============================== + Panels + ============================== */ + +.filter-panel { + flex: 0 0 250px; + background-color: #ffffff; + border: 1px solid #ddd; + border-radius: 4px; + padding: 1rem; + box-sizing: border-box; + height: fit-content; +} + +.chart-container { + flex: 2 1 600px; + background-color: #ffffff; + border: 1px solid #ddd; + border-radius: 4px; + padding: 1rem; + box-sizing: border-box; + min-height: 400px; +} + +.stats-panel { + flex: 1 1 300px; + background-color: #ffffff; + border: 1px solid #ddd; + border-radius: 4px; + padding: 1rem; + box-sizing: border-box; + min-height: 200px; +} + +@media (max-width: 900px) { + .app-main { + flex-direction: column; + padding: 1rem; + } + + .filter-panel, .chart-container, .stats-panel { + flex: 1 1 100%; + } +} + +/* ============================== + Footer Copyright + ============================== */ +.app-footer::after { + content: "© 2026 Donau2Space.de"; + display: block; + margin-top: 0.25rem; + font-size: 0.8rem; + color: #888; +} \ No newline at end of file