From 06b89692cbc92ad7c79178b612ac2c084b3ba519 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sat, 20 Feb 2021 14:55:43 +0100
Subject: [PATCH] WIP: Pixel header (not fully responsive yet)

---
 assets/css/style.css                      | 28 +++++++++++++----------
 assets/images/header_bottom_triangles.svg | 18 ++++++---------
 assets/images/header_top_triangles.svg    | 17 ++++++++------
 assets/images/pixel_bg_lila.png           |  3 +++
 4 files changed, 36 insertions(+), 30 deletions(-)
 create mode 100644 assets/images/pixel_bg_lila.png

diff --git a/assets/css/style.css b/assets/css/style.css
index 2b675146..b4c9b369 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -50,6 +50,8 @@ body {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+
+    background-color: var(--wtf-light-grey);
 }
 
 .primary_nav__toggle {
@@ -231,11 +233,13 @@ header {
 
 .header__bg_box {
     margin-top: -0.75rem;
-    grid-row: 2 / span 1;
-    grid-column: 1 / span 5;
+
+    background-image: url("../images/pixel_bg_lila.png");
+    background-repeat: no-repeat;
+    background-size: cover;
 
     display: grid;
-    grid-template-rows: 46px 18px 15rem 8rem 55px 18px auto;
+    grid-template-rows: 46px 18px 12rem 8.5rem 55px 18px auto;
     grid-template-columns: 15% 82px auto 96px 22.5%;
     z-index: 0;
 }
@@ -252,7 +256,7 @@ header {
 .bg_box__top_bar_left {
     grid-row: 2 / span 1;
     grid-column: 1 / span 3;
-    background-color: var(--wtf-dark-blue);
+    background-color: var(--wtf-light-blue);
     z-index: 5;
 }
 
@@ -267,7 +271,7 @@ header {
 .bg_box__top_bar_right {
     grid-row: 1 / span 2;
     grid-column: 5 / span 1;
-    background-color: var(--wtf-light-blue);
+    /* background-color: var(--wtf-light-orange); */
     z-index: 5;
 }
 
@@ -276,7 +280,7 @@ header {
     grid-column: 1 / span 5;
     background-image: url("../images/white_unicorns.svg");
     background-position: top 5% left 95% ;
-    background-size: auto 60%;
+    background-size: auto 65%;
     background-repeat: no-repeat;
     z-index: 10;
 }
@@ -284,16 +288,14 @@ header {
 .bg_box__big_bg {
     grid-row: 3 / span 2;
     grid-column: 1 / span 5;
-    background-color: var(--wtf-light-blue);
-    background-image: url("../images/header_background.svg");
-    background-repeat: repeat;
+    /* 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-lila);
+    /* background-color: var(--wtf-light-orange); */
     z-index: 5;
 }
 
@@ -353,14 +355,14 @@ header {
     font-size: 1.2rem;
     line-height: 1.3em;
     margin: 0.5em 0 0 1em;
-    color: white;
+    color: #ebebeb;
 }
 
 .header__sub_claim {
     grid-row: 4 / span 4;
     grid-column: 3 / span 3;
     /*margin: 0 2rem 1.5rem 1.5rem;*/
-    margin: 0 2rem 0 1.5rem;
+    margin: 1rem 2rem -3rem 1.5rem;
     padding: 0.5rem 1.5rem 0 1.5rem;
     background-color: var(--wtf-orange);
     z-index: 15;
@@ -621,9 +623,11 @@ 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;
diff --git a/assets/images/header_bottom_triangles.svg b/assets/images/header_bottom_triangles.svg
index 4e3f6a6e..c12a3223 100644
--- a/assets/images/header_bottom_triangles.svg
+++ b/assets/images/header_bottom_triangles.svg
@@ -1,14 +1,10 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 82 55" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata>
-    <g transform="translate(-218 -477)">
-        <g transform="translate(-251 -106)">
-            <g id="bottom-left-corner" transform="translate(93 106)" serif:id="bottom left corner">
-                <path d="m458 477h-82v55l82-55z" fill="#60f"/>
-            </g>
-        
-        
-            <g transform="translate(93 106)" serif:id="bottom left corner">
-                <path d="m458 532v-55l-82 55h82z" fill="#003380"/>
+<?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 82 55" 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,-376,-477)">
+        <g>
+            <g id="bottom-left-corner" serif:id="bottom left corner">
+                <path d="M458,532L458,477L376,532L458,532Z" style="fill:rgb(0,51,128);"/>
             </g>
         </g>
     </g>
diff --git a/assets/images/header_top_triangles.svg b/assets/images/header_top_triangles.svg
index 5d1bdc74..1dc89cdd 100644
--- a/assets/images/header_top_triangles.svg
+++ b/assets/images/header_top_triangles.svg
@@ -1,11 +1,14 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 96 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><title>WTF Layout</title><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>WTF Layout</dc:title><cc:license rdf:resource="MIT License"/><dc:creator><cc:Agent><dc:title>L3D &lt;l3d@c3woc.de&gt;</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata>
-    <g transform="translate(-979)">
-        <g transform="translate(-158)">
-            <g id="blue-corner" transform="translate(-93 -106)" serif:id="blue corner">
-                <path d="m1257.2 152-27.17 18v-18h27.17z" fill="#003380"/>
+<?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,-979,0)">
+        <g transform="matrix(1,0,0,1,-251,-106)">
+            <g id="blue-corner" serif:id="blue corner">
+                <path d="M1257.2,152L1230.03,170L1230.03,152L1257.2,152Z" style="fill:#2a7fff;"/>
             </g>
-            <path id="top-right-triangle" d="m1233 0v64h-96" fill="#2a7fff" serif:id="top right triangle"/>
+        </g>
+        <g transform="matrix(1,0,0,1,979,0)">
+            <path d="M0,0L0,46L27.2,46L96,0L0,0Z" style="fill:#ebebeb;"/>
         </g>
     </g>
 </svg>
diff --git a/assets/images/pixel_bg_lila.png b/assets/images/pixel_bg_lila.png
new file mode 100644
index 00000000..974bc766
--- /dev/null
+++ b/assets/images/pixel_bg_lila.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:874c15de4aa241e7579613c8c4899aa1eab50ba6d68c094d4d2c5bb6b67f63d3
+size 675866