makes termine table responsive

pages/termine/index.php

@@ -2,21 +2,33 @@
 <p>Hier findest du die Termine für unsere Veranstaltungen und Ausflüge!</p>
 <p>Bei Fragen könnt ihr euch gerne euch bei einem/-r Oberministrant*in melden.</p>
 <h2>Termine für 2023</h2>
-<div class="termine-grid" id="termine-2023">
-    <div class="kopfzeile-datum">
-    <span>Datum</span>
-    </div>
-    <div class="kopfzeile-beschreibung">
-    <span>Beschreibung</span>
-    </div>
-    <span>02.01.2023 bis 05.01.2023</span>
-    <span>Sternsingeraktion</span>
-    <span>10.02.2023</span>
-    <span>Faschingsfeier</span>
-    <span>24.06.2023</span>
-    <span>Sommerausflug</span>
-    <span>16.07.2023</span>
-    <span>Mini-Aufnahme</span>
-    <span>22.09.2023 bis 24.09.2023</span>
-    <span>Herbstwochenende</span>
+<table role="table" class="termine-table" id="termine-2023">
+    <thead role="rowgroup">
+        <tr role="row">
+            <th role="columnheader">Datum:</th>
+            <th role="columnheader">Beschreibung:</th>
+        </tr>
+    </thead>
+    <tbody role="rowgroup">
+        <tr role="row">
+            <td role="cell">02.01.2023 bis 05.01.2023</td>
+            <td role="cell">Sternsingeraktion</td>
+        </tr>
+        <tr role="row">
+            <td role="cell">10.02.2023</td>
+            <td role="cell">Faschingsfeier</td>
+        </tr>
+        <tr role="row">
+            <td role="cell">24.06.2023</td>
+            <td role="cell">Sommerausflug</td>
+        </tr>
+        <tr role="row">
+            <td role="cell">16.07.2023</td>    
+            <td role="cell">Mini-Aufnahme</td>
+        </tr>
+        <tr role="row">
+            <td role="cell">22.09.2023 bis 24.09.2023</td>
+            <td role="cell">Herbstwochenende</td>
+        </tr>
+    </tbody>
 </table>

src/style/_termine.scss

@@ -1,22 +1,87 @@
-.termine-grid {
-    margin: auto;
-    width: 66.6666%;
-    display: grid; 
-    grid-template-columns: repeat(2, 1fr); 
-    grid-template-rows: repeat(6, 1fr); 
-    gap: 0px 0px; 
-    grid-template-areas: 
-      "kopfzeile-datum kopfzeile-beschreibung"
-      ". ."
-      ". ."
-      ". ."
-      ". ."
-      ". ."; 
-    .kopfzeile-datum { grid-area: kopfzeile-datum; }
-    .kopfzeile-beschreibung { grid-area: kopfzeile-beschreibung; }
-    .kopfzeile-datum,
-    .kopfzeile-beschreibung {
-        @include geologica-font(normal,600);
+@media
+only screen 
+and (min-device-width: 500px) {
+  .termine-table {
+    width: 66.666%;
+    th {
+      @include geologica-font(normal,600);
+      width: 50%;
+      &:nth-of-type(1){
+        text-align: right;
+          padding-right: 2em;
+      }
+      &:nth-of-type(2){
+        text-align: left;
+        padding-left: 2em;
+      }
+    }
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background: #ccc;
+        }
+        td:nth-of-type(1) {
+          text-align: right;
+          padding-right: 2em;
+        }
+        td:nth-of-type(2){
+          text-align: left;
+          padding-left: 2em;
+        }
+      }
     }
   }
+}
+
+
+@media
+only screen 
+and (max-width: 420px), (min-device-width: 428px) 
+and (max-device-width: 500px)  {
+
+/* Force table to not be like tables anymore */
+table, thead, tbody, th, td, tr {
+  display: block;
+}
+
+/* Hide table headers (but not display: none;, for accessibility) */
+thead tr {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+tr {
+  margin: 0 0 1rem 0;
+}
   
+tr:nth-child(odd) {
+  background: #ccc;
+}
+
+td {
+  /* Behave  like a "row" */
+  border: none;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  padding-left: 50%;
+}
+
+td:before {
+  /* Now like a table header */
+  position: absolute;
+  /* Top/left values mimic padding */
+  top: 0;
+  left: 6px;
+  width: 45%;
+  padding-right: 10px;
+  white-space: nowrap;
+}
+
+/*
+Label the data
+You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
+*/
+td:nth-of-type(1):before { content: "Datum: "; }
+td:nth-of-type(2):before { content: "Beschreibung: "; }
+}

src/style/main.css

@@ -262,29 +262,82 @@ main {
   width: 15em;
 }
 
-.termine-grid {
-  margin: auto;
-  width: 66.6666%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(6, 1fr);
-  gap: 0px 0px;
-  grid-template-areas: "kopfzeile-datum kopfzeile-beschreibung" ". ." ". ." ". ." ". ." ". .";
-}
-.termine-grid .kopfzeile-datum {
-  grid-area: kopfzeile-datum;
-}
-.termine-grid .kopfzeile-beschreibung {
-  grid-area: kopfzeile-beschreibung;
-}
-.termine-grid .kopfzeile-datum,
-.termine-grid .kopfzeile-beschreibung {
-  font-family: "geologica";
-  font-style: normal;
-  font-weight: 600;
-  font-variation-settings: "SHRP" 50;
+@media only screen and (min-device-width: 500px) {
+  .termine-table {
+    width: 66.666%;
+  }
+  .termine-table th {
+    font-family: "geologica";
+    font-style: normal;
+    font-weight: 600;
+    font-variation-settings: "SHRP" 50;
+    width: 50%;
+  }
+  .termine-table th:nth-of-type(1) {
+    text-align: right;
+    padding-right: 2em;
+  }
+  .termine-table th:nth-of-type(2) {
+    text-align: left;
+    padding-left: 2em;
+  }
+  .termine-table tbody tr:nth-child(odd) {
+    background: #ccc;
+  }
+  .termine-table tbody tr td:nth-of-type(1) {
+    text-align: right;
+    padding-right: 2em;
+  }
+  .termine-table tbody tr td:nth-of-type(2) {
+    text-align: left;
+    padding-left: 2em;
+  }
+}
+@media only screen and (max-width: 420px), (min-device-width: 428px) and (max-device-width: 500px) {
+  /* Force table to not be like tables anymore */
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  /* Hide table headers (but not display: none;, for accessibility) */
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  tr {
+    margin: 0 0 1rem 0;
+  }
+  tr:nth-child(odd) {
+    background: #ccc;
+  }
+  td {
+    /* Behave  like a "row" */
+    border: none;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    padding-left: 50%;
+  }
+  td:before {
+    /* Now like a table header */
+    position: absolute;
+    /* Top/left values mimic padding */
+    top: 0;
+    left: 6px;
+    width: 45%;
+    padding-right: 10px;
+    white-space: nowrap;
+  }
+  /*
+  Label the data
+  You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
+  */
+  td:nth-of-type(1):before {
+    content: "Datum: ";
+  }
+  td:nth-of-type(2):before {
+    content: "Beschreibung: ";
+  }
 }
-
 .bilder-container {
   display: flex;
   flex-direction: column;