Reworking templates and starting reconstructing table CSS for termine page

lektor/lektordata/project/assets/static/style.css

@@ -180,7 +180,7 @@ div.page h2 {
     font-family: "Roboto-Black","Arial Bold",sans-serif;
     font-size:60px;
     margin: 30px 0 0 0;
-    padding: 22px 0 0 0;
+    padding: 22px 0 1em 0;
     font-weight: normal;
     line-height: 50px;
 }
@@ -244,71 +244,143 @@ div.left_footer, div.middle_footer, div.right_footer {
     padding: 28px;
 }
 
+
+
+
+.termine *{
+    box-sizing: border-box;
+}
+
+
+.termine ul {
+  list-style: none;
+  padding: 0 0 50px 50px;
+  margin: 0;
+  text-align: left;
+  width: 1100px;
+}
+
+.termine li {
+  display: flex;
+}
+
+
+.termine ul > li {
+  font-family: "Roboto-Light","Arial",sans-serif;;
+  width: 1000px;
+  max-width: 1140px;
+}
+
+.termine .inner_page > ul > li{
+  padding: 10px 10px 10px 10px;
+}
+
+.termine ul > li > div {
+  width: 470px;
+  font-size: 20px;
+}
+
+.termine .inner_page > ul > li:nth-child(odd) {
+    background: #f4f4f4;
+}
+
+.termine .inner_page > ul > li:nth-child(even) {
+    background: #fff;
+}
+
+.termine ul > li > ul {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  width: auto;
+}
+
+
+.termine ul > li > ul > li {
+  width: 155px;
+  margin-right: 0;
+}
+
+.termine ul > li > ul > li:nth-child(1){
+  width: 240px;
+}
+
+.termine ul > li > ul > li:nth-child(2){
+  width: 55px;
+}
+
+.termine ul > li > ul > li > div{
+    font-size: 20px;
+    font-weight: normal;
+    width: auto;
+} 
+
+
+
+
 @media (min-width: 769px) and (max-width: 1100px) {
     header {
-        height: calc(200vw /1100*100);
+        height: calc(200vw * 0.091);
     }
-/*    header > div.inner_header{
+
-        padding: calc(12vw /1100*100) calc(28vw /1100*100);
-    }*/
     header .left_header{
-        font-size: calc(24vw /1100*100);
+        font-size: calc(24vw * 0.091);
     }
     header .left_header img.header-logo{
-        width: calc(43vw /1100*100);
+        width: calc(43vw * 0.091);
-        margin-right: calc(12vw /1100*100);
+        margin-right: calc(12vw * 0.091);
     }
     header .right_header{
-        font-size: calc(18vw /1100*100);
+        font-size: calc(18vw * 0.091);
     }
     header .right_header .nav {
-        padding: 0 calc(20vw /1100*100);
+        padding: 0 calc(20vw * 0.091);
     }
     header .right_header .nav li {
-        margin: 0 calc(20vw /1100*100);
+        margin: 0 calc(20vw * 0.091);
     }
     div.page{
-        top: calc(150vw /1100*100);
+        top: calc(150vw * 0.091);
-        width: calc(1100vw /1100*100); /* That's actually 100% I know */
+        width: calc(1100vw * 0.091); /* That's actually 100% I know */
-        font-size:calc(20vw /1100*100);
+        font-size:calc(20vw * 0.091);
-        margin: calc(-230vw /1100*100) 0 0 0;
+        margin: calc(-230vw * 0.091) 0 0 0;
     }
     div.page.home{
-        font-size:calc(36vw /1100*100);
+        font-size:calc(36vw * 0.091);
     }    
 
     div.page h2 {
-        font-size:calc(60vw /1100*100);
+        font-size:calc(60vw * 0.091);
-        margin: calc(30vw /1100*100) 0 0 0;
+        margin: calc(30vw * 0.091) 0 0 0;
-        padding: calc(22vw /1100*100) 0 0 0;
+        padding: calc(22vw * 0.091) 0 1em 0;
-        line-height: calc(50vw /1100*100);
+        line-height: calc(50vw * 0.091);
         width: 100%;
     }
     div.page h3 {
-        font-size:calc(60vw /1100*100);
+        font-size:calc(60vw * 0.091);
-        line-height: calc(30vw /1100*100);
+        line-height: calc(30vw * 0.091);
     }
     div.page div.threecolumn{
-        padding: calc(30vw /1100*100) calc(50vw /1100*100);
+        padding: calc(30vw * 0.091) calc(50vw * 0.091);
 
     }
     div.page div.threecolumn div{
-        width: calc(300vw /1100*100);
+        width: calc(300vw * 0.091);
-        line-height: calc(50vw /1100*100);
+        line-height: calc(50vw * 0.091);
-        font-size: calc(30vw /1100*100);
+        font-size: calc(30vw * 0.091);
     }
     div.page div.threecolumn img{
-        width: calc(300vw /1100*100);
+        width: calc(300vw * 0.091);
     }
     div.inner_footer{
-        top: calc(150vw /1100*100);
+        top: calc(150vw * 0.091);
-        height: calc(200vw /1100*100);
+        height: calc(200vw * 0.091);
-        font-size: calc(18vw /1100*100);
+        font-size: calc(18vw * 0.091);
-        line-height: calc(27vw /1100*100);
+        line-height: calc(27vw * 0.091);
-        margin: calc(-50vw /1100*100)px 0 0 0;
+        margin: calc(-50vw * 0.091)px 0 0 0;
     }
     div.left_footer, div.middle_footer, div.right_footer {
-        padding: calc(28vw /1100*100);
+        padding: calc(28vw * 0.091);
     }
 }
 
@@ -344,7 +416,7 @@ div.left_footer, div.middle_footer, div.right_footer {
     div.page h2 {
         font-size:calc(60px * 0.7);
         margin: 0;
-        padding: calc(22px * 0.7) 0 0 0;
+        padding: calc(22px * 0.7) 0 1em 0;
         line-height: calc(50px * 0.7);
     }
     div.page h3 {

lektor/lektordata/project/content/termine/contents.lr

@@ -54,5 +54,5 @@ body:
   * <div>&nbsp;</div>&nbsp;
 
 ---
-_template: termine_page.html
+_template: page.html
 

lektor/lektordata/project/templates/layout.html

@@ -41,6 +41,7 @@
     </div>
   </header>
   <div class="page{% if this._path == '/' %} home{% endif
+              %}{%if this._path == '/termine' %} termine{% endif
               %}">
       {% block body %}{% endblock %}
   </div>

lektor/lektordata/project/templates/termine_page.html

@@ -1,8 +1,9 @@
 {% extends "layout.html" %}
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-  <h2>{{ this.title }}</h2>
   <div class="inner_page termine">
+    <h2>{{ this.title }}</h2>
     {{ this.body }}
+    {{ this.html }}
   </div>
 {% endblock %}

lektor/lektordata/scripts/calendar-fetcher.sh

@@ -79,5 +79,5 @@ echo "$ICS_DATA" | awk 'BEGIN{FS=":"}
 
 echo ""
 echo "---"
-echo "_template: termine_page.html"
+echo "_template: page.html"
 echo ""