From 3ec6218b90c7605f1f2758932e8fe89bd211cfa4 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sun, 21 Feb 2021 11:37:22 +0100
Subject: [PATCH] Slim header and pixel header now in full working condition.

---
 assets/css/style.css                          | 105 ++++++-----
 .../images/header_top_triangles_dark_blue.svg |  12 ++
 templates/header_slim.html                    | 132 ++++++-------
 templates/header_with_logo.html               | 178 +++++++++---------
 templates/homepage.html                       |   2 +-
 5 files changed, 229 insertions(+), 200 deletions(-)
 create mode 100644 assets/images/header_top_triangles_dark_blue.svg

diff --git a/assets/css/style.css b/assets/css/style.css
index 35cbaf8..5cfa1c3 100644
--- a/assets/css/style.css
+++ b/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 {
-        margin-top: 0;
+    .slim_box__top_bar_left {
+        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;
     }
 }
diff --git a/assets/images/header_top_triangles_dark_blue.svg b/assets/images/header_top_triangles_dark_blue.svg
new file mode 100644
index 0000000..a08cad2
--- /dev/null
+++ b/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>
diff --git a/templates/header_slim.html b/templates/header_slim.html
index 78cea5d..6f25de3 100644
--- a/templates/header_slim.html
+++ b/templates/header_slim.html
@@ -1,72 +1,72 @@
 {% extends "layout.html" %}
 {% block header %}
     <div class="header__top_box">
-            <div class="header__logo_box">
-                <a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
-                    {% if '/images/wtf_logo.svg'|asseturl is defined -%}
-                        <img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
-                    {%- endif %}
-                </a>
-            </div>
-            <nav class="header__secondary_nav">
-                <ul class="secondary_nav__navlist">
-                {% for alt in get_alts(this) %}
-                  {%- if this.alt != alt %}
-                    <li class="secondary_nav__navitem">
-                        <a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
-                    </li>
-                  {% endif -%}
-                  {% endfor %}
-                    <li class="secondary_nav__navitem">
-                        <a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
-                    </li>
-                </ul>
-            </nav>
+        <div class="header__logo_box">
+            <a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
+                {% if '/images/wtf_logo.svg'|asseturl is defined -%}
+                    <img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
+                {%- endif %}
+            </a>
         </div>
-        <div class="header__slim_box">
-            <nav class="header__primary_nav">
-                <div class="primary_nav__toggle">
-                    <svg viewBox="0 0 100 80" width="32" height="32">
-                      <rect width="100" height="15"></rect>
-                      <rect y="30" width="100" height="15"></rect>
-                      <rect y="60" width="100" height="15"></rect>
-                    </svg>
-                    <p>menu</p>
-                </div>
+        <nav class="header__secondary_nav">
+            <ul class="secondary_nav__navlist">
+            {% for alt in get_alts(this) %}
+              {%- if this.alt != alt %}
+                <li class="secondary_nav__navitem">
+                    <a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
+                </li>
+              {% endif -%}
+              {% endfor %}
+                <li class="secondary_nav__navitem">
+                    <a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="header__slim_box">
+        <nav class="header__primary_nav">
+            <div class="primary_nav__toggle">
+                <svg viewBox="0 0 100 80" width="32" height="32">
+                  <rect width="100" height="15"></rect>
+                  <rect y="30" width="100" height="15"></rect>
+                  <rect y="60" width="100" height="15"></rect>
+                </svg>
+                <p>menu</p>
+            </div>
 
-                <ul class="primary_nav__navlist">
-                    {% for title, mapping in bag("navigation").items() %}
-                      {% if mapping.visible|default(true) %}
-                        <li class="primary_nav__navitem
-                            {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-                                -active
-                            {%- endif -%}
-                            {%- if loop.index == 1 %}
-                                -first
-                            {%- endif -%}
-                        ">
-                            <a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
-                                {{ title }}
-                            </a>
-                            {% if mapping.list_childs %}
-                                <ul class="primary_nav__sub_navlist">
-                                    {% set sub_menu = mapping['items'].items() %}
-                                    {% for sub_title, href in sub_menu %}
-                                        <li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
-                                            <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
-                                                {{ sub_title }}
-                                            </a>
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            {% endif %}
-                        </li>
-                      {% endif %}
-                    {% endfor %}
-                </ul>
-            </nav>
-            <!-- background for header box - start -->
-            <div class="bg_box__top_bar_left"></div>
-            <div class="bg_box__top_bar_middle"></div>
-            <div class="bg_box__top_bar_right"></div>
+            <ul class="primary_nav__navlist">
+                {% for title, mapping in bag("navigation").items() %}
+                  {% if mapping.visible|default(true) %}
+                    <li class="primary_nav__navitem
+                        {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
+                            -active
+                        {%- endif -%}
+                        {%- if loop.index == 1 %}
+                            -first
+                        {%- endif -%}
+                    ">
+                        <a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
+                            {{ title }}
+                        </a>
+                        {% if mapping.list_childs %}
+                            <ul class="primary_nav__sub_navlist">
+                                {% set sub_menu = mapping['items'].items() %}
+                                {% for sub_title, href in sub_menu %}
+                                    <li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
+                                        <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
+                                            {{ sub_title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+            </ul>
+        </nav>
+        <div class="slim_box__top_bar_left"></div>
+        <div class="slim_box__top_bar_middle"></div>
+        <div class="slim_box__top_bar_right"></div>
+    </div>
 {% endblock %}
diff --git a/templates/header_with_logo.html b/templates/header_with_logo.html
index 06d758a..dee2f93 100644
--- a/templates/header_with_logo.html
+++ b/templates/header_with_logo.html
@@ -1,95 +1,95 @@
 {% extends "layout.html" %}
 {% block header %}
     <div class="header__top_box">
-            <div class="header__logo_box">
-                <a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
-                    {% if '/images/wtf_logo.svg'|asseturl is defined -%}
-                        <img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
-                    {%- endif %}
-                </a>
+        <div class="header__logo_box">
+            <a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
+                {% if '/images/wtf_logo.svg'|asseturl is defined -%}
+                    <img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
+                {%- endif %}
+            </a>
+        </div>
+        <nav class="header__secondary_nav">
+            <ul class="secondary_nav__navlist">
+            {% for alt in get_alts(this) %}
+              {%- if this.alt != alt %}
+                <li class="secondary_nav__navitem">
+                    <a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
+                </li>
+              {% endif -%}
+              {% endfor %}
+                <li class="secondary_nav__navitem">
+                    <a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="header__bg_box">
+        <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>
+                  <rect y="30" width="100" height="15"></rect>
+                  <rect y="60" width="100" height="15"></rect>
+                </svg>
+                <p>menu</p>
             </div>
-            <nav class="header__secondary_nav">
-                <ul class="secondary_nav__navlist">
-                {% for alt in get_alts(this) %}
-                  {%- if this.alt != alt %}
-                    <li class="secondary_nav__navitem">
-                        <a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
-                    </li>
-                  {% endif -%}
-                  {% endfor %}
-                    <li class="secondary_nav__navitem">
-                        <a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-        <div class="header__bg_box">
-            <nav class="header__primary_nav">
-                <div class="primary_nav__toggle">
-                    <svg viewBox="0 0 100 80" width="32" height="32">
-                      <rect width="100" height="15"></rect>
-                      <rect y="30" width="100" height="15"></rect>
-                      <rect y="60" width="100" height="15"></rect>
-                    </svg>
-                    <p>menu</p>
-                </div>
 
-                <ul class="primary_nav__navlist">
-                    {% for title, mapping in bag("navigation").items() %}
-                      {% if mapping.visible|default(true) %}
-                        <li class="primary_nav__navitem
-                            {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-                                -active
-                            {%- endif -%}
-                            {%- if loop.index == 1 %}
-                                -first
-                            {%- endif -%}
-                        ">
-                            <a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
-                                {{ title }}
-                            </a>
-                            {% if mapping.list_childs %}
-                                <ul class="primary_nav__sub_navlist">
-                                    {% set sub_menu = mapping['items'].items() %}
-                                    {% for sub_title, href in sub_menu %}
-                                        <li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
-                                            <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
-                                                {{ sub_title }}
-                                            </a>
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            {% endif %}
-                        </li>
-                      {% endif %}
-                    {% endfor %}
-                </ul>
-            </nav>
-            <!-- background for header box - start -->
-            <div class="bg_box__top_bar_left"></div>
-            <div class="bg_box__top_bar_middle"></div>
-            <div class="bg_box__top_bar_right"></div>
-            <div class="bg_box__unicorns"></div>
-            <div class="bg_box__big_bg"></div>
-            <div class="bg_box__bottom_bar_left"></div>
-            <div class="bg_box__bottom_bar_middle"></div>
-            <div class="bg_box__bottom_bar_right"></div>
-            <div class="bg_box__very_bottom_bar"></div>
-            <!-- background for header box - end -->
-            <section class="header__claim">
-                <!-- TODO: Claims in Lektor editierbar. -->
-                {{ this.claim_heading }}
-                {{ this.claim_content }}
-            </section>
-            <section class="header__sub_claim">
-                <div class="sub_claim__box">
-                    {{ this.subclaim_heading }}
-                    {{ this.subclaim_content }}
-                </div>
-                <!-- TODO: Zielseite für "MEMBER WERDEN"-Button -->
-                <button class="header__button sub_claim__button">
-                    <a class="header__button_link" href={{ '/mitglieder'|url }}>MEMBER WERDEN</a>
-                </button>
-            </section>
-        </div>
+            <ul class="primary_nav__navlist">
+                {% for title, mapping in bag("navigation").items() %}
+                  {% if mapping.visible|default(true) %}
+                    <li class="primary_nav__navitem
+                        {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
+                            -active
+                        {%- endif -%}
+                        {%- if loop.index == 1 %}
+                            -first
+                        {%- endif -%}
+                    ">
+                        <a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
+                            {{ title }}
+                        </a>
+                        {% if mapping.list_childs %}
+                            <ul class="primary_nav__sub_navlist">
+                                {% set sub_menu = mapping['items'].items() %}
+                                {% for sub_title, href in sub_menu %}
+                                    <li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
+                                        <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
+                                            {{ sub_title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+            </ul>
+        </nav>
+        <!-- background for header box - start -->
+        <div class="bg_box__top_bar_left"></div>
+        <div class="bg_box__top_bar_middle"></div>
+        <div class="bg_box__top_bar_right"></div>
+        <div class="bg_box__unicorns"></div>
+        <div class="bg_box__big_bg"></div>
+        <div class="bg_box__bottom_bar_left"></div>
+        <div class="bg_box__bottom_bar_middle"></div>
+        <div class="bg_box__bottom_bar_right"></div>
+        <div class="bg_box__very_bottom_bar"></div>
+        <!-- background for header box - end -->
+        <section class="header__claim">
+            <!-- TODO: Claims in Lektor editierbar. -->
+            {{ this.claim_heading }}
+            {{ this.claim_content }}
+        </section>
+        <section class="header__sub_claim">
+            <div class="sub_claim__box">
+                {{ this.subclaim_heading }}
+                {{ this.subclaim_content }}
+            </div>
+            <!-- TODO: Zielseite für "MEMBER WERDEN"-Button -->
+            <button class="header__button sub_claim__button">
+                <a class="header__button_link" href={{ '/mitglieder'|url }}>MEMBER WERDEN</a>
+            </button>
+        </section>
+    </div>
 {% endblock %}
diff --git a/templates/homepage.html b/templates/homepage.html
index 95dbc48..0909236 100644
--- a/templates/homepage.html
+++ b/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>