Semantische CSS-Klassen eingeführt

Dies ermöglicht unabhängigere visuelle Komponenten, die nicht an den Ort im DOM-Baum gebunden sind.

1 files changed, 81 insertions, 21 deletions

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;