From 96882aef1234101a3a3b9f6a7745e90ed3297e9a Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sun, 2 Aug 2020 23:02:25 +0200
Subject: [PATCH] Optimized header for small viewports

---
 components/03_Organisms/header/_header.scss | 35 +++++++++++++++++----
 components/03_Organisms/header/header.hbs   |  2 +-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/components/03_Organisms/header/_header.scss b/components/03_Organisms/header/_header.scss
index 2add0b5..86bba8b 100644
--- a/components/03_Organisms/header/_header.scss
+++ b/components/03_Organisms/header/_header.scss
@@ -3,14 +3,37 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: 70px;
-
+    height: 60px;
+    
     &__Logo {
-        max-width: 300px;
-        width: 35%;
-        object-fit:contain;
+        height: 60px;
+        margin: 25px;
+        object-fit:cover;
+        max-height: 100%;
+        overflow: hidden;
+
+        .LP-Image{
+            height: 60px;
+        }
+    }
+}
+
+@media(max-width: $-viewport-medium){
+    .LP-Header__Logo{
+        width: 60px;
+        .LP-Image{
+            object-position: 0 0;
+            object-fit: cover;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Header__Logo{
+        display: none;
     }
 
-    .LP-Header__Logo{
-        margin: 25px;
+    .LP-Header__Navigation{
+        width: 100%;
     }
 }
\ No newline at end of file
diff --git a/components/03_Organisms/header/header.hbs b/components/03_Organisms/header/header.hbs
index b7b40e5..d103bc1 100644
--- a/components/03_Organisms/header/header.hbs
+++ b/components/03_Organisms/header/header.hbs
@@ -1,6 +1,6 @@
 <header class="LP-Header">
     <div class="LP-Header__Logo">
-        {{render '@logo'}}
+        {{> @image source='/images/logo.png'}}
     </div>
     <div class="LP-Header__Navigation">
         {{> @navigation}}