aboutsummaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
authorValentin <valentin@fricklerhandwerk.de>2025-11-07 22:21:21 +0100
committerValentin <valentin@fricklerhandwerk.de>2025-11-09 14:16:46 +0100
commit5ac5368256fdcffa29221552d0fa2bd112eaac6d (patch)
treeb704ae1d8051ef4971e92b7f23a239517659386b /www
parent56c0994925a00c90ca3376579928f049f8e85972 (diff)
Tabelle durch flexbox ersetzt
- Semantik, unabhängig von der Präsentation, klarer im Quelltext ersichtlich - Eigene Darstellung für kleine Bildschirme, besser lesbar
Diffstat (limited to 'www')
-rw-r--r--www/html/index.html256
1 files changed, 146 insertions, 110 deletions
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;
+ }
+ }
</style>
</head>
<body>
- <table width="100%" border="0" height="94%">
- <tbody>
- <tr>
- <td width="25%">
- <table width="100%" cellspacing="2"
- cellpadding="6" border="1" height="100%">
- <tbody>
- <tr>
- <th>
- Stadtteilbeirat Heimfeld
- </th>
- </tr>
- <tr>
- <td valign="top" height="25%">
- <div align="center">Tel:
- (040) 300 924 94<br>
- Di 10 - 12h &amp; Do 14 -
- 16h sonst AB<br>
- eMail: beirat (at)
- heimfeld.hamburg<br>
- <br>
- Nächste Sitzung<br>
- <b><font size="+2" color="#ff0000">19. November 2025 18:30Uhr</font></b><br>
- <font color="#ff0000">Treffpunkthaus Heimfeld</font><br>
- <a href="https://www.openstreetmap.org/node/6549438363" target="_blank">Friedrich-Naumann-Straße 9, 21075 Hamburg</a>
- </font>
- </div>
- </td>
- </tr>
- <tr>
- <td valign="middle" height="25%">
- <font size="+2" color="#ffffff">Der Stadtteilbeirat Heimfeld wird 30 Jahre alt!</font>
- </td>
- </tr>
- <tr>
- <td valign="middle" height="25%">
- <div align="center">
- <b><font size="+2" color="#ffffff">Newsletter für Heimfeld</font></b>
- </div>
- <div align="center">
- Bald wieder da
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <br>
- </td>
- <td align="center" width="50%" valign="middle">
- <p>
- <font size="6" style="color: #ff9900; font-weight: bold; font-variant-caps: small-caps;">Herzlich Willkommen</font>
- <br>
- <br>
- <font size="4" color="#ffff00">
- Dies ist die Website<br>
- für den Hamburger Stadtteil</font>
- <font size="6" color="white">Heimfeld</font>
- <font color="#ffff00">und angrenzende Bereiche
- </font>
- </p>
- </td>
- <td width="25%" valign="top">
- <table width="100%" cellspacing="2" cellpadding="6"
- border="1" height="100%">
- <tbody>
- <tr>
- <th>
- Aktuelles / Termine
- </th>
- </tr>
- <tr>
- <td valign="middle" height="25%">
- <font size="+2" color="#ffffff"><b>Stadtteilfest</b></font>
- <div align="center">
- <font size="+2" color="#ff0000"><b>6. Juni 2026</b></font>
- </div>
- </td>
- </tr>
- <tr>
- <td valign="middle" style="padding: 1em;">
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td valign="middle">
- <a style="display: inline-block;" href="https://www.cafe-rennkoppel.de">
- <img alt="Café Rennkoppel" src="img/Cafe-Rennkoppel.png" width="99" height="99">
- </a>
- </td>
- <td align="left" valign="middle" style="padding-left: 1em;">
- <a href="https://www.cafe-rennkoppel.de">Café Rennkoppel</a><br>
- Wir sind da!<br>
- Wir haben Mo. - Fr. 9:30 - 18:00 Uhr geöffnet.<br>
- <a href="https://www.openstreetmap.org/node/6374378143" target="_blank">An der Rennkoppel 3, 21075 Hamburg</a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td align="center" valign="top">
- <img src="img/construct.gif" alt="Bald geht es weiter" width="150" height="150">
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="table">
+ <div class="column welcome">
+ <div class="row welcome">
+ <h1>Herzlich Willkommen</h1>
+ <p style="color:yellow;">
+ Dies ist die Website<br>
+ für den Hamburger Stadtteil
+ <span style="color:white; font-size:2rem;">Heimfeld</span>
+ und angrenzende Bereiche
+ </p>
+ </div>
+ </div>
+ <div class="column">
+ <div class="row">
+ <h1>Stadtteilbeirat Heimfeld</h1>
+ </div>
+ <div class="row">
+ Tel: (040) 300 924 94<br>
+ Di 10 - 12h &amp; Do 14 - 16h sonst AB<br>
+ eMail: beirat (at) heimfeld.hamburg<br>
<br>
- </td>
- </tr>
- </tbody>
- </table>
+ Nächste Sitzung<br>
+ <span class="highlight"><p class="big">19. November 2025 18:30Uhr</p>
+ Treffpunkthaus Heimfeld<br>
+ <a href="https://www.openstreetmap.org/node/6549438363" target="_blank">Friedrich-Naumann-Straße 9, 21075 Hamburg</a>
+ </span>
+ </font>
+ </div>
+ <div class="row">
+ <p class="news">Der Stadtteilbeirat Heimfeld wird 30 Jahre alt!</p>
+ </div>
+ <div class="row">
+ <p class="news">Newsletter für Heimfeld</p>
+ Bald wieder da
+ </div>
+ </div>
+ <div class="column">
+ <div class="row">
+ <h1>Aktuelles / Termine</h1>
+ </div>
+ <div class="row">
+ <p class="news">Stadtteilfest</p>
+ <p class="highlight big">6. Juni 2026</p>
+ </div>
+ <div class="row">
+ <table border="0" cellpadding="0" cellspacing="0">
+ <tr>
+ <td valign="middle">
+ <a style="display: inline-block;" href="https://www.cafe-rennkoppel.de">
+ <img alt="Café Rennkoppel" src="img/Cafe-Rennkoppel.png" width="99" height="99">
+ </a>
+ </td>
+ <td align="left" valign="middle" style="padding-left: 1em;">
+ <a href="https://www.cafe-rennkoppel.de">Café Rennkoppel</a><br>
+ Wir sind da!<br>
+ Wir haben Mo. - Fr. 9:30 - 18:00 Uhr geöffnet.<br>
+ <a href="https://www.openstreetmap.org/node/6374378143" target="_blank">An der Rennkoppel 3, 21075 Hamburg</a>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="row">
+ <img src="img/construct.gif" alt="Bald geht es weiter" width="150" height="150">
+ </div>
+ </div>
+ </div>
<footer>
<nav>
<ul>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-13 19:20:37 +0000