From 7a9c287e4600b0d9960d90dab0fc3bd27b49401e Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Tue, 2 Mar 2021 22:40:11 +0100
Subject: [PATCH] WIP: Slim header according to topio

Broken below 789px responsive magic missing.
---
 assets/css/style.css       | 21 ++++++++++++++++-----
 templates/header_slim.html |  1 +
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6774e85c..317c1db8 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -248,6 +248,10 @@ header {
 
 .header__slim_box {
     margin-top: -0.75rem;
+    padding-bottom: 6em;
+    background-image: url("../images/wtf-header-bg.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
 
     display: grid;
     grid-template-rows: 46px 18px;
@@ -271,7 +275,7 @@ header {
 }
 
 .slim_box__top_bar_middle {
-        background-image: url("../images/header_top_triangles_dark_blue.svg");
+        background-image: url("../images/header_top_triangles.svg");
 }
 
 .bg_box__top_bar_right, .slim_box__top_bar_right {
@@ -281,10 +285,6 @@ header {
     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;
@@ -295,6 +295,17 @@ header {
     z-index: 10;
 }
 
+.slim_box__unicorns {
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 5;
+    background-image: url("../images/translucent_unicorns.svg");
+    background-position: top 1rem left 95% ;
+    background-size: auto 115%;
+    background-repeat: no-repeat;
+    z-index: 10;
+    margin-bottom: -6em;
+}
+
 .bg_box__big_bg {
     grid-row: 3 / span 2;
     grid-column: 1 / span 5;
diff --git a/templates/header_slim.html b/templates/header_slim.html
index 6f25de3c..28418d10 100644
--- a/templates/header_slim.html
+++ b/templates/header_slim.html
@@ -68,5 +68,6 @@
         <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 class="slim_box__unicorns"></div>
     </div>
 {% endblock %}