From 47f724ed86d6c0d4419a8e06d1c58957b080d0d8 Mon Sep 17 00:00:00 2001 From: sternenseemann Date: Tue, 24 May 2022 08:22:27 +0200 Subject: fix(bahnhofshalle): prevent header overflowing, left align - Justify in the center instead of spacing around on small devices, we don't want to have an odd space between logo and text. - Use em sizes in the header. - No longer hard code the header height, instead only fix font size and image size. The header can (in practice) now be flowed to three lines on very small screens (logo, flipdot-, gschichtler) without the bottom border ending up in the wrong place. h1 is still aligned properly in the middle of its container by setting the containers min-height and making it a flex box. --- bahnhofshalle/index.html | 6 ++++-- bahnhofshalle/style.css | 33 +++++++++++++++++++++++++-------- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/bahnhofshalle/index.html b/bahnhofshalle/index.html index 3b5e85c..cd2d85c 100644 --- a/bahnhofshalle/index.html +++ b/bahnhofshalle/index.html @@ -10,8 +10,10 @@

flipdot-gschichtler

diff --git a/bahnhofshalle/style.css b/bahnhofshalle/style.css index 90e41ce..a4d5a02 100644 --- a/bahnhofshalle/style.css +++ b/bahnhofshalle/style.css @@ -12,8 +12,7 @@ header, main, footer { @media screen and (max-width: 800px) { header { - align-items: center; - justify-content: space-around; + justify-content: center; } } @@ -22,14 +21,32 @@ header { border-bottom: 5px solid #e1e1e1; display: flex; flex-wrap: wrap; - height: 30px; + align-items: center; + justify-content: left; } -header img, -#heading h1 { - max-height: 30px; - margin: auto 5px; - font-size: 20px; +header > * { + margin-right: 10px; +} + +header > .fixed-height { + height: 2.5em; +} + +header img { + max-height: 100%; +} + +header > .heading { + min-height: 2.5em; + display: flex; + align-items: center; + justify-content: center; +} + +header h1 { + font-size: 1.5em; + margin: 0; } a:visited, a:link { -- cgit 1.4.1