Slim header and pixel header now in full working condition.

assets/css/style.css

@@ -249,19 +249,19 @@ header {
     margin-top: -0.75rem;
 
     display: grid;
-    grid-template-rows: 46px 18px 0rem 1rem 55px 18px auto;
+    grid-template-rows: 46px 18px;
     grid-template-columns: 15% 82px auto 96px 22.5%;
     z-index: 0;
 }
 
-.bg_box__top_bar_left {
+.bg_box__top_bar_left, .slim_box__top_bar_left {
     grid-row: 2 / span 1;
     grid-column: 1 / span 3;
     background-color: var(--wtf-light-blue);
     z-index: 5;
 }
 
-.bg_box__top_bar_middle {
+.bg_box__top_bar_middle, .slim_box__top_bar_middle {
     grid-row: 1 / span 2;
     grid-column: 4 / span 1;
     background-image: url("../images/header_top_triangles.svg");
@@ -269,13 +269,21 @@ header {
     z-index: 5;
 }
 
-.bg_box__top_bar_right {
+.slim_box__top_bar_middle {
+        background-image: url("../images/header_top_triangles_dark_blue.svg");
+}
+
+.bg_box__top_bar_right, .slim_box__top_bar_right {
     grid-row: 1 / span 2;
     grid-column: 5 / span 1;
-    /* background-color: var(--wtf-light-orange); */
+    background-color: transparent;
     z-index: 5;
 }
 
+.slim_box__top_bar_right {
+    background-color: var(--wtf-dark-blue);
+}
+
 .bg_box__unicorns {
     grid-row: 2 / span 6;
     grid-column: 1 / span 5;
@@ -289,14 +297,12 @@ header {
 .bg_box__big_bg {
     grid-row: 3 / span 2;
     grid-column: 1 / span 5;
-    /* background-color: var(--wtf-light-orange); */
     z-index: 5;
 }
 
 .bg_box__bottom_bar_left {
     grid-row: 5 / span 1;
     grid-column: 1 / span 3;
-    /* background-color: var(--wtf-light-orange); */
     z-index: 5;
 }
 
@@ -362,7 +368,6 @@ header {
 .header__sub_claim {
     grid-row: 4 / span 4;
     grid-column: 3 / span 3;
-    /*margin: 0 2rem 1.5rem 1.5rem;*/
     margin: 1rem 2rem -3rem 1.5rem;
     padding: 0.5rem 1.5rem 0 1.5rem;
     background-color: var(--wtf-orange);
@@ -415,7 +420,7 @@ header {
 
 /* main - Start */
 main {
-    margin: 0.75rem 0 0 0;
+    margin: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -523,8 +528,12 @@ li {
     padding: 0;
 }
 
+.content__inner_box.-logo_header {
+    margin: 3.5rem 1.5rem 0 1.5rem;
+}
+
 .content__inner_box {
-    margin: 2.5rem 1.5rem 0 1.5rem;
+    margin: -0.5rem 1.5rem 0 1.5rem;
 }
 
 .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
@@ -583,12 +592,6 @@ footer {
 /* footer - Ende */
 
 @media screen and (min-width: 1200px) {
-    /*
-    .header__bg_box {
-        grid-template-columns: 15% 82px auto 96px 22.5%;
-    }
-    */
-
     .primary_nav__members, .primary_nav__lang_switch {
         display: none;
     }
@@ -600,6 +603,10 @@ footer {
     .primary_nav__navlist {
         display: flex !important;
     }
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (min-width: 1100px) and (max-width: 1200px) {
@@ -622,6 +629,10 @@ footer {
     .primary_nav__navlist {
         display: flex !important;
     }
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (max-width: 1099px) and (min-width: 910px) {
@@ -654,7 +665,7 @@ footer {
     }
 
     .content__inner_box {
-        margin-top: 2.5rem;
+        margin: -0.5rem 1.5rem 0 1.5rem;
     }
 }
 
@@ -688,6 +699,10 @@ footer {
     .secondary_nav__navlist {
         margin-right: 0.5rem;
     }
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (max-width: 959px) and (min-width: 790px) {
@@ -710,18 +725,9 @@ footer {
     .header__sub_claim {
         grid-column: 1 / span 5;
         padding: 0;
-        /*margin: 0 1.5rem;*/
         margin: 2rem 1.5rem -3rem 1.5rem;
     }
 
-    .content__inner_box {
-        margin-top: 2.5rem;
-    }
-
-    main {
-        margin-top: 0.75rem;
-    }
-
     .header__top_box .header__button {
         display: auto;
     }
@@ -741,6 +747,10 @@ footer {
     .secondary_nav__navlist {
         margin-right: 0.5rem;
     }
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (max-width: 850px) and (min-width: 790px) {
@@ -775,10 +785,6 @@ footer {
     .secondary_nav__navlist {
         margin-right: 0.5rem;
     }
-
-    .content__inner_box {
-        margin: 2.5rem 1.5rem 0 1.5rem;
-    }
 }
 
 @media screen and (max-width: 789px) and (min-width: 596px) {
@@ -786,7 +792,7 @@ footer {
         --column-count: 2
     }
 
-    header, .header__bg_box {
+    header, .header__bg_box, .header__slim_box {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -796,10 +802,6 @@ footer {
         background-image: none;
     }
 
-    main {
-        margin: 0;
-    }
-
     .bg_box__top_bar_left,
     .bg_box__top_bar_middle,
     .bg_box__top_bar_right,
@@ -812,6 +814,15 @@ footer {
         display: none;
     }
 
+    .slim_box__top_bar_left {
+        margin-top: 1rem;
+        height: 1.125rem;
+    }
+
+    .slim_box__top_bar_middle, .slim_box__top_bar_right {
+        display: none;
+    }
+
     .header__claim {
         margin: 1.2rem 1.5rem 0 1.5rem;
         grid-row: 3 / span 1;
@@ -862,7 +873,7 @@ footer {
         display: flex !important;
     }
 
-    .content__inner_box {
+    .content__inner_box.-logo_header {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
 }
@@ -884,7 +895,7 @@ footer {
         display: block;
     }
 
-    header, .header__bg_box {
+    header, .header__bg_box, .header__slim_box {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -894,6 +905,10 @@ footer {
         background-image: none;
     }
 
+    .header__slim_box {
+        margin-top: -3rem;
+    }
+
     .header__claim {
         margin: 0.5rem 0.5rem 0 0.5rem;
         grid-row: 3 / span 1;
@@ -921,10 +936,6 @@ footer {
         font-size: 2rem;
     }
 
-    main {
-        margin-top: 0.75rem;
-    }
-
     .bg_box__top_bar_left,
     .bg_box__top_bar_middle,
     .bg_box__top_bar_right,
@@ -937,8 +948,14 @@ footer {
         display: none;
     }
 
-    main {
+    .slim_box__top_bar_left {
-        margin-top: 0;
+        grid-column: 1 / span 5;
+        margin-top: 3rem;
+        height: 1.125rem;
+    }
+
+    .slim_box__top_bar_middle, .slim_box__top_bar_right {
+        display: none;
     }
 
     .sub_claim__box {
@@ -1014,7 +1031,7 @@ footer {
     }
     /* mobile nav - Ende */
 
-    .content__inner_box {
+    .content__inner_box.-logo_header {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
 }

assets/images/header_top_triangles_dark_blue.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 96 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1137,0)">
+        <g>
+            <g id="blue-corner" serif:id="blue corner" transform="matrix(1,0,0,1,-93,-106)">
+                <path d="M1257.2,152L1230,170L1230,152L1257.2,152Z" style="fill:#2a7fff;"/>
+            </g>
+            <path id="top-right-triangle" serif:id="top right triangle" d="M1233,0L1233,64L1137,64" style="fill:#003380;"/>
+        </g>
+    </g>
+</svg>

templates/header_slim.html

@@ -65,8 +65,8 @@
                 {% endfor %}
             </ul>
         </nav>
-            <!-- background for header box - start -->
+        <div class="slim_box__top_bar_left"></div>
-            <div class="bg_box__top_bar_left"></div>
+        <div class="slim_box__top_bar_middle"></div>
-            <div class="bg_box__top_bar_middle"></div>
+        <div class="slim_box__top_bar_right"></div>
-            <div class="bg_box__top_bar_right"></div>
+    </div>
 {% endblock %}

templates/header_with_logo.html

@@ -24,7 +24,7 @@
         </nav>
     </div>
     <div class="header__bg_box">
-            <nav class="header__primary_nav">
+        <nav class="header__primary_nav -logo_header">
             <div class="primary_nav__toggle">
                 <svg viewBox="0 0 100 80" width="32" height="32">
                   <rect width="100" height="15"></rect>

templates/homepage.html

@@ -1,7 +1,7 @@
 {% extends "header_with_logo.html" %}
 {% block body %}
     <div class="content__box">
-        <div class="content__inner_box">
+        <div class="content__inner_box -logo_header">
             <h1>{{ this.title }}</h1>
         </div>
     </div>