From 21a803cc21450d89423a35cda515d4808d3f3cf1 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sat, 6 Mar 2021 11:53:26 +0100
Subject: [PATCH] Slim header according to topio (now fully responsive).

---
 assets/css/style.css                        | 42 ++++++++++++++++-----
 assets/images/slim_header_top_triangles.svg | 14 +++++++
 2 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 assets/images/slim_header_top_triangles.svg

diff --git a/assets/css/style.css b/assets/css/style.css
index 317c1db8..17a2cac2 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -872,14 +872,26 @@ footer {
         display: none;
     }
 
-    .slim_box__top_bar_left {
-        margin-top: 1rem;
-        height: 1.125rem;
+    /* slim header - start */
+    .header__slim_box {
+        background-image: none;
+        padding-bottom: 0;
     }
 
-    .slim_box__top_bar_middle, .slim_box__top_bar_right {
+    .slim_box__top_bar_left {
+        margin: 1rem 0.5rem 0 0;
+        height: 1.125rem;
+        background-image: url("../images/slim_header_top_triangles.svg");
+        background-position: right;
+        background-repeat: no-repeat;
+    }
+
+    .slim_box__top_bar_middle,
+    .slim_box__unicorns,
+    .slim_box__top_bar_right {
         display: none;
     }
+    /* slim header - end */
 
     .header__claim {
         margin: 1.2rem 1.5rem 0 1.5rem;
@@ -1006,15 +1018,27 @@ footer {
         display: none;
     }
 
-    .slim_box__top_bar_left {
-        grid-column: 1 / span 5;
-        margin-top: 3rem;
-        height: 1.125rem;
+    /* slim header - start */
+    .header__slim_box {
+        background-image: none;
+        margin: 0;
+        padding: 0;
     }
 
-    .slim_box__top_bar_middle, .slim_box__top_bar_right {
+    .slim_box__top_bar_left {
+        margin: 0 0.5rem 0 0;
+        height: 1.125rem;
+        background-image: url("../images/slim_header_top_triangles.svg");
+        background-position: right;
+        background-repeat: no-repeat;
+    }
+
+    .slim_box__top_bar_middle,
+    .slim_box__top_bar_right,
+    .slim_box__unicorns {
         display: none;
     }
+    /* slim header - end */
 
     .sub_claim__box {
         padding-bottom: 2.5rem;
diff --git a/assets/images/slim_header_top_triangles.svg b/assets/images/slim_header_top_triangles.svg
new file mode 100644
index 00000000..1e008b7e
--- /dev/null
+++ b/assets/images/slim_header_top_triangles.svg
@@ -0,0 +1,14 @@
+<?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 28 18" 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,-1230,-152)">
+        <g id="blue-corner" serif:id="blue corner">
+            <path d="M1257.2,152L1230,170L1230,152L1257.2,152Z" style="fill:#2a7fff;"/>
+        </g>
+    </g>
+    <g transform="matrix(-1,0,0,-1,1257.2,170)">
+        <g id="blue-corner1" serif:id="blue corner">
+            <path d="M1257.2,152L1230,170L1229,171.249L1228.87,151.148L1230,152L1257.2,152Z" style="fill:#edefeb;"/>
+        </g>
+    </g>
+</svg>