From 835da7ccb8a8a2d9f50e869ef19db1cc0fbc4b3c Mon Sep 17 00:00:00 2001
From: Reto Bollinger <reto.bollinger@cando-image.com>
Date: Tue, 19 Nov 2024 15:10:21 +0100
Subject: [PATCH] Responsive table on termine page! Woohoo!

---
 .../project/assets/static/style.css           | 103 +++++++++++++++++-
 1 file changed, 102 insertions(+), 1 deletion(-)

diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css
index b946c7b..c9b6cc9 100644
--- a/lektor/lektordata/project/assets/static/style.css
+++ b/lektor/lektordata/project/assets/static/style.css
@@ -134,7 +134,7 @@ div.page {
 
 .termine li {
   display: flex;
-  margin-bottom: 10px;
+  margin-bottom: 3px;
 }
 
 
@@ -214,6 +214,56 @@ div.page {
     .inner_page.bgimage .image img {
         width: 80%
     }
+
+    .termine ul {
+        display: table;
+        border-collapse: collapse;
+        padding: 0;
+        margin: 0;
+    }
+
+    .termine ul li{
+        display: table-row;
+        width: 75vw;
+        padding: 0;
+        margin: 0;
+    }
+
+    .termine ul li div{
+        width: 70vw;
+        text-align: left;
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        white-space: nowrap;
+    }
+
+    .termine ul li ul {
+        display: table-row;
+    }
+
+    .termine ul li ul div{
+        font-weight: normal;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+    }
+
+    .termine ul li ul li {
+        display: table-cell;
+    }
+
+    .termine li ul li:nth-child(1) { width: 40.5vw; }
+    .termine li ul li:nth-child(2) { width: 1.5vw; }
+    .termine li ul li:nth-child(3) { width: 33vw; }
+
+    .termine li ul li:nth-child(1) div{ width: 40.5vw; }
+    .termine li ul li:nth-child(2) div{ width: 1.5vw; }
+    .termine li ul li:nth-child(3) div{ width: 33vw; }
+
+    .termine ul > li > div, .termine ul > li > ul > li > div {
+        font-size: 4vw;
+    }
 }
 
 @media (min-width:1025px) and (max-width:1540px) {
@@ -299,4 +349,55 @@ div.page {
     .inner_page.bgimage .image img{
         width: 150px
     }
+
+
+    .termine ul {
+        display: table;
+        border-collapse: collapse;
+        padding: 0;
+        margin: 0;
+    }
+
+    .termine ul li{
+        display: table-row;
+        width: 75vw;
+        padding: 0;
+        margin: 0;
+    }
+
+    .termine ul li div{
+        width: 70vw;
+        text-align: left;
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        white-space: nowrap;
+    }
+
+    .termine ul li ul {
+        display: table-row;
+    }
+
+    .termine ul li ul div{
+        font-weight: normal;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+    }
+
+    .termine ul li ul li {
+        display: table-cell;
+    }
+
+    .termine li ul li:nth-child(1) { width: 40.5vw; }
+    .termine li ul li:nth-child(2) { width: 1.5vw; }
+    .termine li ul li:nth-child(3) { width: 33vw; }
+
+    .termine li ul li:nth-child(1) div{ width: 40.5vw; }
+    .termine li ul li:nth-child(2) div{ width: 1.5vw; }
+    .termine li ul li:nth-child(3) div{ width: 33vw; }
+
+    .termine ul > li > div, .termine ul > li > ul > li > div {
+        font-size: 2.5vw;
+    }
 }
\ No newline at end of file