diff options
| author | sternenseemann <sternenseemann@systemli.org> | 2022-05-24 08:22:27 +0200 |
|---|---|---|
| committer | sternenseemann <sternenseemann@systemli.org> | 2022-05-24 09:08:34 +0200 |
| commit | 47f724ed86d6c0d4419a8e06d1c58957b080d0d8 (patch) | |
| tree | ebca15850aabf4f28b6605755ce2045617b88e8c | |
| parent | c29e29f2d059cd43a44906f6cf3dfee9e54bd626 (diff) | |
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.
| -rw-r--r-- | bahnhofshalle/index.html | 6 | ||||
| -rw-r--r-- | 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 @@ </head> <body> <header> - <img src="openlab-logo.png" id="openlab-logo"> - <div id="heading"> + <div class="fixed-height"> + <img src="openlab-logo.png" id="openlab-logo"> + </div> + <div class="heading"> <h1>flipdot-gschichtler</h1> </div> </header> 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 { |