Semantische CSS-Klassen eingeführt

Dies ermöglicht unabhängigere visuelle Komponenten, die nicht an den Ort im DOM-Baum gebunden sind.
author: Valentin <valentin@fricklerhandwerk.de> 2026-01-18 23:26:40 +0100
committer: Valentin <valentin@fricklerhandwerk.de> 2026-01-18 23:35:23 +0100
commit: 1c5c2041c8696febd165b22f546fd4ad47d3b8f7 (patch)
tree: baa0f4cf3aa2bf8e4f054181b1b4d71ae4afeda4 /www
parent: ebbf8ba883844c352b2614d16dd3070e0caa9c51 (diff)
9 files changed, 106 insertions, 43 deletions
diff --git a/www/html/datenschutz.html b/www/html/datenschutz.html
index c1a55fc..c298ea3 100644
--- a/www/html/datenschutz.html
+++ b/www/html/datenschutz.html
@@ -13,7 +13,7 @@
         </ul>
       </nav>
     </header>
-    <table border="0" cellspacing="2" cellpadding="2" width="100%">
+    <table class="vertical-margin" border="0" cellspacing="2" cellpadding="2" width="100%">
       <tbody>
         <tr>
           <td valign="top" width="15%"><br>
diff --git a/www/html/impressum.html b/www/html/impressum.html
index e07ddf0..931c0a1 100644
--- a/www/html/impressum.html
+++ b/www/html/impressum.html
@@ -14,7 +14,7 @@
       </nav>
     </header>
     <br>
-    <table border="0" cellspacing="2" cellpadding="2" width="100%">
+    <table class="vertical-margin" border="0" cellspacing="2" cellpadding="2" width="100%">
       <tbody>
         <tr>
           <td valign="top" width="15%"><br>
diff --git a/www/html/index.html b/www/html/index.html
index 3b713b9..68fa58a 100644
--- a/www/html/index.html
+++ b/www/html/index.html
@@ -8,7 +8,7 @@
   <body>
     <div class="table">
       <div class="column welcome">
-        <div class="row welcome">
+        <div class="row centered welcome">
           <h1>Herzlich Willkommen</h1>
           <p style="color:yellow;">
             Dies ist die Website<br>
@@ -19,10 +19,10 @@
         </div>
       </div>
       <div class="column">
-        <div class="row">
+        <div class="row centered">
           <h1>Stadtteilbeirat Heimfeld</h1>
         </div>
-        <div class="row">
+        <div class="row centered">
             Tel: (040) 300 924 94<br>
             Di 10 - 12h &amp; Do 14 - 16h sonst AB<br>
             eMail: beirat (at) heimfeld.hamburg<br>
@@ -34,19 +34,19 @@
             </span>
           </font>
         </div>
-        <div class="row">
+        <div class="row centered">
             <p class="news">Der Stadtteilbeirat Heimfeld wird 30 Jahre alt!</p>
         </div>
-        <div class="row">
+        <div class="row centered">
           <p class="news">Newsletter für Heimfeld</p>
           Bald wieder da
         </div>
       </div>
       <div class="column">
-        <div class="row">
+        <div class="row centered">
           <h1>Aktuelles</h1>
         </div>
-        <div class="row">
+        <div class="row centered">
           <p class="news">Stadtteilfest</p>
           <p class="highlight big">Samstag, 13. Juni 2026</p>
         </div>
@@ -67,7 +67,7 @@
             </tr>
           </table>
         </div>
-        <div class="row">
+        <div class="row centered">
           <img src="img/construct.gif" alt="Bald geht es weiter" width="150" height="150">
           <p>Letzte Änderung: @published@</p>
         </div>
diff --git a/www/html/style.css b/www/html/style.css
index 8f3f338..f006ad0 100644
--- a/www/html/style.css
+++ b/www/html/style.css
@@ -1,3 +1,54 @@
+/* Style zurücksetzen
+ *
+ * Das macht einheitliche Darstellung auf allen Browsern wahrscheinlicher.
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+figure,
+blockquote,
+pre,
+dl,
+dd,
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+p {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+}
+
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+/* Ende Style zurücksetzen */
+
 :root {
   --primary: #330033;
   --background-primary: #77cc77;
@@ -54,9 +105,7 @@ header nav ul, footer nav ul {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
-  padding: 0;
   justify-content: center;
-  list-style: none;
 }
 header nav a, footer nav a {
   background-color: var(--background-secondary);
@@ -87,7 +136,7 @@ div.column, section {
   padding: 1rem;
   border: 1pt inset red;
 }
-div.row {
+.centered {
   text-align: center;
 }
 p.row {
@@ -96,8 +145,9 @@ p.row {
 div.row:last-child {
   flex-grow: 1;
 }
-div.row h1, section h1 {
+div.table h1, section h1 {
   color: var(--highlight);
+  font-weight: bold;
   font-size: var(--big-font);
   background-color: var(--background-highlight);
   padding: 0.5rem 1rem;
@@ -140,13 +190,7 @@ section {
   max-width: 50rem;
   margin: 1em auto;
 }
-section dd, section dt {
-  text-align: left;
-}
-section > dl {
-  margin: 0;
-}
-section > dl > dt {
+dt.event-title {
   font-size: var(--big-font);
   font-weight: bold;
   margin-top: 1.5pt;
@@ -155,40 +199,56 @@ section > dl > dt {
   padding: 1rem;
   padding-bottom: 0;
 }
-section > dl > dt:first-of-type {
+dt.event-title:first-of-type {
   margin-top: 0;
 }
-section > dl > dd {
+dt.event-title a {
+  text-decoration: none;
+}
+dd.event-body {
   margin: 0;
   border: 1pt inset red;
   border-top: none;
   padding: 1rem;
   padding-left: 2rem;
 }
-section > dl > dt a {
-  text-decoration: none;
+dl.event-data {
+  margin: 1rem 0;
 }
-section > dl > dd dt {
+dl.event-data dt {
   display: inline;
 }
-section > dl > dd dt:before {
+dl.event-data dt:before {
   content: "";
   display: block;
   margin-top: 1rem;
 }
-section > dl > dd dd {
+dl.event-data dd {
   display: inline;
   margin: 0;
 }
-section > dl > dd dd + dd::before {
+dl.event-data dd + dd::before {
   content: ", ";
 }
-section > dl > dd dt:after {
-  content: ":";
+ul.default li {
+  margin-left: 1rem;
+  list-style-type: disc;
+}
+.vertical-margin {
+  margin: 1rem 0;
 }
 details {
   margin: 1rem 0;
 }
+dl.default dd {
+  margin-left: 1rem;
+}
+dl.default dd:has(+ dt) {
+  margin-bottom: 0.3rem;
+}
+dl.with-colons dt:after {
+  content: ":";
+}
 @media (width < 50rem) {
   body {
     margin: 0 0.5rem;
diff --git a/www/index.nix b/www/index.nix
index 65f7ddb..f999cc0 100644
--- a/www/index.nix
+++ b/www/index.nix
@@ -40,7 +40,7 @@
                 <script async src="redirects.js"></script>
               '';
               "@past-events@" = ''
-                <dl>
+                <dl class="events">
                 ${
                   with lib;
                   concatMapStringsSep "\n" (event: event.value) (
@@ -50,7 +50,7 @@
                 </dl>
               '';
               "@future-events@" = ''
-                <dl>
+                <dl class="events">
                 ${
                   with lib;
                   concatMapStringsSep "\n" (event: event.value) (
diff --git a/www/termine.nix b/www/termine.nix
index e631afc..a9ebd5f 100644
--- a/www/termine.nix
+++ b/www/termine.nix
@@ -27,8 +27,8 @@
                         type = functionTo str;
                         readOnly = true;
                         default = self: ''
-                          <dt id="${self.name}"><a href="#${self.name}">${self.title}</a></dt>
-                          <dd>
+                          <dt class="event-title" id="${self.name}"><a href="#${self.name}">${self.title}</a></dt>
+                          <dd class="event-body">
                             <time datetime="${self.date.start} ${self.time.start}">${
                               # TODO: Lokalisierte Zeitdarstellung
                               self.datetime-range-text
@@ -48,13 +48,15 @@
                             ${
                               if !isNull self.summary then
                                 ''
-                                  <details><summary>${self.summary}</summary>
+                                  <details class="vertical-margin"><summary>${self.summary}</summary>
                                   ${self.description}
                                   </details>
                                 ''
                               else if !isNull self.description then
                                 ''
+                                  <div class="vertical-margin">
                                   ${self.description}
+                                  </div>
                                 ''
                               else
                                 ""
@@ -65,7 +67,7 @@
                             ${
                               with lib;
                               optionalString (self.data != [ ]) ''
-                                <dl>
+                                <dl class="event-data with-colons">
                                   ${concatMapStringsSep "\n" (entry: ''
                                     <dt>${entry.name}</dt>
                                     <dd>${entry.value}</dd>
@@ -88,7 +90,7 @@
                               else
                                 ''
                                   <p>Veranstalter:
-                                  <ul>
+                                  <ul class="default">
                                     ${concatMapStringsSep "\n" (host: ''
                                       <li>${print-host host}</li>
                                     '') self.hosts}
@@ -113,7 +115,7 @@
                               else
                                 ''
                                   <p>Weitere Informationen:
-                                  <ul>
+                                  <ul class="default">
                                     ${concatMapStringsSep "\n" (link: ''
                                       <li>${print-link link}</li>
                                     '') self.links}
diff --git a/www/termine/2025-11-stadtteilbeirat-heimfeld.nix b/www/termine/2025-11-stadtteilbeirat-heimfeld.nix
index dbdc3b1..81baf36 100644
--- a/www/termine/2025-11-stadtteilbeirat-heimfeld.nix
+++ b/www/termine/2025-11-stadtteilbeirat-heimfeld.nix
@@ -26,7 +26,7 @@
     </p>
     <p>
       Wir werden unsere übliche Agenda (im Schnelldurchgang) abhandeln:
-      <ul>
+      <ul class="default">
         <li>
           Neues und Anliegen aus Heimfeld
         </li>
diff --git a/www/termine/2026-02-07-symphoning.nix b/www/termine/2026-02-07-symphoning.nix
index 71f40e3..2b0374f 100644
--- a/www/termine/2026-02-07-symphoning.nix
+++ b/www/termine/2026-02-07-symphoning.nix
@@ -15,11 +15,12 @@
   #summary = "Brahms trifft Avantgarde";
   description = ''
     <p>Brahms trifft Avantgarde</p>
-    <dl>
+    <dl class="default with-colons vertical-margin">
       <dt>Johannes Brahms</dt>
         <dd>Die Symphonien 1 bis 4 – leicht gekürzt</dd>
       <dt>Dmitri Schostakowitsch</dt>
-        <dd>2. Satz aus dem 2. Klavierkonzert F-Dur</dd><dd>Filmmusik aus „The Gadfly“</dd>
+        <dd>2. Satz aus dem 2. Klavierkonzert F-Dur</dd>
+        <dd>Filmmusik aus „The Gadfly“</dd>
       <dt>Alfred Schnittke</dt>
         <dd>Filmmusik aus „Die Geschichte Eines Unbekannten Schauspielers“</dd>
       <dt>Mauricio Kagel</dt>
diff --git a/www/termine/2026-02-08-symphoning.nix b/www/termine/2026-02-08-symphoning.nix
index 23dd111..d7017ef 100644
--- a/www/termine/2026-02-08-symphoning.nix
+++ b/www/termine/2026-02-08-symphoning.nix
@@ -15,7 +15,7 @@
   #summary = "Brahms trifft Avantgarde";
   description = ''
     <p>Brahms trifft Avantgarde</p>
-    <dl>
+    <dl class="default with-colons vertical-margin">
       <dt>Johannes Brahms</dt>
         <dd>Die Symphonien 1 bis 4 – leicht gekürzt</dd>
       <dt>Dmitri Schostakowitsch</dt>
author	Valentin <valentin@fricklerhandwerk.de>	2026-01-18 23:26:40 +0100
committer	Valentin <valentin@fricklerhandwerk.de>	2026-01-18 23:35:23 +0100
commit	1c5c2041c8696febd165b22f546fd4ad47d3b8f7 (patch)
tree	baa0f4cf3aa2bf8e4f054181b1b4d71ae4afeda4 /www
parent	ebbf8ba883844c352b2614d16dd3070e0caa9c51 (diff)