From 5ac5368256fdcffa29221552d0fa2bd112eaac6d Mon Sep 17 00:00:00 2001 From: Valentin Date: Fri, 7 Nov 2025 22:21:21 +0100 Subject: Tabelle durch flexbox ersetzt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Semantik, unabhängig von der Präsentation, klarer im Quelltext ersichtlich - Eigene Darstellung für kleine Bildschirme, besser lesbar --- www/html/index.html | 256 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 146 insertions(+), 110 deletions(-) (limited to 'www') diff --git a/www/html/index.html b/www/html/index.html index 2c6564b..c3bd4c2 100644 --- a/www/html/index.html +++ b/www/html/index.html @@ -15,11 +15,13 @@ --background-secondary: #99ee99; --background-highlight: #ffcc00; --highlight: #ff0000; + --big-font: 1.5rem; } body { font-family: sans-serif; color: var(--primary); background-color: var(--background-primary); + margin: 1rem; } body::before { content: ''; @@ -53,14 +55,15 @@ th { color: var(--highlight); background-color: var(--background-highlight); - height: 1.5rem; - font-size: 1.5rem; + height: var(--big-font); + font-size: var(--big-font); } footer { text-align: center; } footer nav ul { display: flex; + flex-wrap: wrap; gap: 2rem; padding: 0; justify-content: center; @@ -70,118 +73,151 @@ background-color: var(--background-secondary); padding: 0.5rem; } + div.table { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; + } + div.column { + margin: 2pt; + padding: 1.5pt; + border: 1pt outset red; + flex-basis: 25%; + background-color: var(--background-secondary); + display: flex; + flex-direction: column; + gap: 1.5pt; + } + div.row { + padding: 1rem 0.5rem; + border: 1pt inset red; + text-align: center; + } + div.row:last-child { + flex-grow: 1; + } + div.row h1 { + color: var(--highlight); + font-size: var(--big-font); + background-color: var(--background-highlight); + padding: 0.5rem; + margin: -1rem -0.5rem; + } + div.welcome { + background-color: initial; + border: initial; + flex-basis: 50%; + align-self: center; + } + div.welcome h1 { + background-color: initial; + font-variant: small-caps; + font-size: 2rem; + color: #ff9900; + } + .highlight { + color: var(--highlight); + } + .big, .news { + font-size: var(--big-font); + font-weight: bold; + margin: 0; + } + .news { + color: white; + } + @media (width < 50rem) { + body { + margin: 0 0.5rem; + } + div.table { + flex-wrap: wrap; + } + div.column { + flex-basis: 100%; + }; + } + @media (width > 50rem) { + div.column { + order: 3; + } + div.column:nth-child(2) { + order: 1; + } + div.column.welcome { + order: 2; + } + } - - - - - - - - -

- - - - - - - - - - - - - - - -

- Stadtteilbeirat Heimfeld -
- Tel: - (040) 300 924 94 - Di 10 - 12h & Do 14 - - 16h sonst AB - eMail: beirat (at) - heimfeld.hamburg - - Nächste Sitzung - 19. November 2025 18:30Uhr - Treffpunkthaus Heimfeld - Friedrich-Naumann-Straße 9, 21075 Hamburg - - -
- Der Stadtteilbeirat Heimfeld wird 30 Jahre alt! -
- - Newsletter für Heimfeld - - - Bald wieder da - -

-
-

- Herzlich Willkommen -
-
- - Dies ist die Website
- für den Hamburger Stadtteil - Heimfeld - und angrenzende Bereiche - -

- - - - - - - - - - - - - - - -

- Aktuelles / Termine -

- Stadtteilfest -

- 6. Juni 2026 -

- - - - - -

- -

- Café Rennkoppel
- Wir sind da!
- Wir haben Mo. - Fr. 9:30 - 18:00 Uhr geöffnet.
- An der Rennkoppel 3, 21075 Hamburg -

Herzlich Willkommen

+ Dies ist die Website
+ für den Hamburger Stadtteil + Heimfeld + und angrenzende Bereiche +

Stadtteilbeirat Heimfeld

+ Tel: (040) 300 924 94
+ Di 10 - 12h & Do 14 - 16h sonst AB
+ eMail: beirat (at) heimfeld.hamburg

-

+ Nächste Sitzung
+

19. November 2025 18:30Uhr

+ Treffpunkthaus Heimfeld
+ Friedrich-Naumann-Straße 9, 21075 Hamburg + + + +

Der Stadtteilbeirat Heimfeld wird 30 Jahre alt!

Newsletter für Heimfeld

+ Bald wieder da +

+ +

Aktuelles / Termine

Stadtteilfest

6. Juni 2026

+ + + + + +

+ +

+ Café Rennkoppel
+ Wir sind da!
+ Wir haben Mo. - Fr. 9:30 - 18:00 Uhr geöffnet.
+ An der Rennkoppel 3, 21075 Hamburg +