From fab490633ad2a8b00314f7449de3cb7b9f4518fa Mon Sep 17 00:00:00 2001
From: Reto Bollinger <bolliret@MBP-von-Reto-2.localdomain>
Date: Sun, 24 Nov 2024 20:31:10 +0100
Subject: [PATCH] No clue what I'm doing4

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

diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css
index d0b79c4..c70e946 100644
--- a/lektor/lektordata/project/assets/static/style.css
+++ b/lektor/lektordata/project/assets/static/style.css
@@ -60,12 +60,15 @@
 }
 
 body {
+<<<<<<< HEAD
 <<<<<<< HEAD
     font-family: "Roboto-Regular","Arial",sans-serif;
     margin: 0px;
     padding: 0px;
     background: #f4f4f4;
 =======
+=======
+>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
     font-size: 23px;
     font-family: "Roboto-Light","Arial",sans-serif;
     margin: 50px 25px
@@ -189,9 +192,51 @@ header h1 {
     margin: 0;
     font-weight: 700;
     font-size: 38px;
+<<<<<<< HEAD
 >>>>>>> e4c4875 (Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px)
 }
 
+=======
+=======
+    font-family: "Roboto-Regular","Arial",sans-serif;
+    margin: 0px;
+    padding: 0px;
+    background: #f4f4f4;
+}
+
+a {
+    text-decoration: none;
+}
+
+header {
+    width: 100%;
+    height: 200px;
+    background-image: linear-gradient(to bottom, rgba(0.13, 0.13, 0.13, 0.80), rgba(0.13, 0.13, .13, 0.00)), url(/images/header-bg.jpg);
+    background-blend-mode: multiply;
+    background-size: 100%;
+    background-position: 0 47%;
+    background-repeat: no-repeat;
+}
+
+nav{
+    padding: 12px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.left_header{
+    font-family: "Roboto-Black","Arial Bold",sans-serif;
+    font-size: 24px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 0 0 28px;
+>>>>>>> c2e8c55 (Complete rework of CSS (and some content too))
+}
+
+>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
 .left_header ul.nav{
     padding: 0;
 }
@@ -235,6 +280,7 @@ li {
     color: #f00;
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 .right_header .nav li {
     margin: 0 20px;
@@ -460,6 +506,8 @@ div.left_footer, div.middle_footer, div.right_footer {
     div.left_footer, div.middle_footer, div.right_footer {
         padding: calc(28px * 0.7);
 =======
+=======
+>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
 
 
 .termine *{
@@ -528,6 +576,7 @@ div.left_footer, div.middle_footer, div.right_footer {
 @media (max-width:768px) {
     header h1 {
         font-size: 3.15vw
+<<<<<<< HEAD
 >>>>>>> 4a6b860 (Wooohaaa! Look! I did magic: I converted a list into a table. How beautiful ist that?)
     }
 
@@ -571,6 +620,272 @@ div.left_footer, div.middle_footer, div.right_footer {
     input[type='checkbox']:not(:checked)+ul {
         display: none;
 =======
+=======
+=======
+.right_header .nav li {
+    margin: 0 20px;
+}
+
+nav input[type='checkbox'], nav label {
+    display: none;
+}
+
+.right_header a{
+    color: #fff;
+}
+
+header .button a {
+    padding: 0.5rem 1rem;
+    background-color: #2563eb;
+    color: #fff;
+    border-radius: 4px;
+}
+
+div.page{
+    position: relative;
+    top: 150px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1100px;
+    background: #fff;
+    text-align: center;
+    color: #2563eb;
+    padding: 0;
+    font-family: "Roboto-Thin","Arial",sans-serif;
+    font-size:36px;
+    line-height: 1em;
+    margin: -230px 0 0 0;
+}
+
+div.page h2 {
+    font-family: "Roboto-Black","Arial Bold",sans-serif;
+    font-size:60px;
+    margin: 30px 0 0 0;
+    padding: 22px 0 0 0;
+    font-weight: normal;
+    line-height: 50px;
+}
+
+div.page h3 {
+    font-family: "Roboto-Thin","Arial",sans-serif;
+    font-size:60px;
+    margin: 0px;
+    padding: 0;
+    font-weight: normal;
+    line-height: 30px;
+
+}
+
+div.page strong {
+    font-family: "Roboto-Regular","Arial",sans-serif;
+    color: #1e3a8a;
+}
+
+div.page div.threecolumn{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30px 50px;
+
+}
+
+div.page div.threecolumn div{
+    display: flex;
+    align-items: center;
+    width: 300px;
+    line-height: 50px;
+    font-size:30px;
+}
+
+div.inner_footer{
+    z-index: -1;
+    position: relative;
+    top: 150px;
+    left: 0;
+    height: 200px;
+    width: 100%;
+    background: #2563eb;
+    color: #fff;
+    font-family: "Roboto-Thin","Arial",sans-serif;
+    font-size:18px;
+    line-height: 27px;
+    margin: -50px 0 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+}
+
+div.inner_footer a{
+    color: #fff;
+}
+
+div.left_footer, div.middle_footer, div.right_footer {
+    display: flex;
+    align-items: end;
+    padding: 28px;
+}
+
+@media (min-width: 769px) and (max-width: 1100px) {
+    header {
+        height: calc(200vw /1100*100);
+    }
+/*    header > div.inner_header{
+        padding: calc(12vw /1100*100) calc(28vw /1100*100);
+    }*/
+    header .left_header{
+        font-size: calc(24vw /1100*100);
+    }
+    header .left_header img.header-logo{
+        width: calc(43vw /1100*100);
+        margin-right: calc(12vw /1100*100);
+    }
+    header .right_header{
+        font-size: calc(18vw /1100*100);
+    }
+    header .right_header .nav {
+        padding: 0 calc(20vw /1100*100);
+    }
+    header .right_header .nav li {
+        margin: 0 calc(20vw /1100*100);
+    }
+    div.page{
+        top: calc(150vw /1100*100);
+        width: calc(1100vw /1100*100); /* That's actually 100% I know */
+        font-size:calc(36vw /1100*100);
+        margin: calc(-230vw /1100*100) 0 0 0;
+    }
+    div.page h2 {
+        font-size:calc(60vw /1100*100);
+        margin: calc(30vw /1100*100) 0 0 0;
+        padding: calc(22vw /1100*100) 0 0 0;
+        line-height: calc(50vw /1100*100);
+    }
+    div.page h3 {
+        font-size:calc(60vw /1100*100);
+        line-height: calc(30vw /1100*100);
+    }
+    div.page div.threecolumn{
+        padding: calc(30vw /1100*100) calc(50vw /1100*100);
+
+    }
+    div.page div.threecolumn div{
+        width: calc(300vw /1100*100);
+        line-height: calc(50vw /1100*100);
+        font-size: calc(30vw /1100*100);
+    }
+    div.page div.threecolumn img{
+        width: calc(300vw /1100*100);
+    }
+    div.inner_footer{
+        top: calc(150vw /1100*100);
+        height: calc(200vw /1100*100);
+        font-size: calc(18vw /1100*100);
+        line-height: calc(27vw /1100*100);
+        margin: calc(-50vw /1100*100)px 0 0 0;
+    }
+    div.left_footer, div.middle_footer, div.right_footer {
+        padding: calc(28vw /1100*100);
+    }
+}
+
+@media (max-width: 768px) {
+    header {
+        height: auto;
+    }
+    header .left_header{
+        font-size: calc(24px * 0.7);
+    }
+    header .left_header img.header-logo{
+        width: calc(43px * 0.7);
+        margin-right: calc(12px * 0.7);
+    }
+    header .right_header{
+        font-size: 18px;
+    }
+    header .right_header .nav {
+        padding: 0 calc(20px * 0.7);
+    }
+    header .right_header .nav li {
+        margin: 0 calc(20px * 0.7);
+    }
+    div.page{
+        top: 0;
+        width: 100%;
+        font-size:calc(36px * 0.7);
+        margin: 0;
+    }
+    div.page h2 {
+        font-size:calc(60px * 0.7);
+        margin: 0;
+        padding: calc(22px * 0.7) 0 0 0;
+        line-height: calc(50px * 0.7);
+    }
+    div.page h3 {
+        font-size:calc(60px * 0.7);
+        line-height: calc(30px * 0.7);
+    }
+    div.page div.threecolumn{
+        padding: calc(30px * 0.7) calc(50px * 0.7);
+
+    }
+    div.page div.threecolumn div{
+        width: 300px;
+        line-height: calc(50px * 0.7);
+        font-size: calc(30px * 0.7);
+    }
+    div.page div.threecolumn img{
+        width: 300px;
+    }
+    div.inner_footer{
+        top: calc(150px * 0.7);
+        height: auto;
+        font-size: calc(18px * 0.7);
+        line-height: calc(27px * 0.7);
+        margin: 0;
+    }
+    div.left_footer, div.middle_footer, div.right_footer {
+        padding: calc(28px * 0.7);
+>>>>>>> c2e8c55 (Complete rework of CSS (and some content too))
+    }
+
+
+    nav {
+        justify-content: start;
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-left: 0;
+        margin-right: 0;
+        align-items: start;
+    }
+    .left_header .nav, .right_header .nav, nav ul {
+        display: block;
+    }
+    nav ul:last-child {
+        width: 100%;
+        flex-basis: 100%;
+    }
+    nav ul li {
+        margin-bottom: 0;
+        width: 100%;
+        text-align: right;
+        padding: 0em;
+    }
+    nav .left_header ul li {
+        margin: 0;
+        padding: 0;
+    }
+    nav .right_header ul li {
+        padding: 0.5em;
+    }
+    nav label {
+        text-align: right;
+        display: block;
+        padding: 0.5em;
+        font-size: 20px;
+        align-self: self-start;
+    }
+<<<<<<< HEAD
+>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
 
     .termine ul {
         display: table;
@@ -728,7 +1043,18 @@ div.left_footer, div.middle_footer, div.right_footer {
 
     .inner_page.bgimage .image img{
         width: 150px
+<<<<<<< HEAD
 >>>>>>> e4c4875 (Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px)
+=======
+=======
+    input[type='checkbox']:not(:checked)+ul {
+        display: none;
+    }
+    .threecolumn{
+        flex-direction: column;
+        flex-wrap: wrap;
+>>>>>>> c2e8c55 (Complete rework of CSS (and some content too))
+>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
     }