From 09cebfe9aab89ec480f4f4484f9ecd8864a936b8 Mon Sep 17 00:00:00 2001
From: Ash Entwisle <ash.entwisle@protonmail.com>
Date: Fri, 20 Oct 2023 16:16:07 +0000
Subject: [PATCH] fixing css, redoing  build

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>
---
 src/components/Header.astro |  5 ++--
 src/styles.scss             | 52 +++++++++++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2e0a73c..27bdd36 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -4,8 +4,9 @@
 
 <header>
     <div class="header-l">
-        <a href="/" class="header-image">
-            <img src="/logo.svg" alt="HullCSS">
+        <a href="/">
+            <img src="/logo.svg" alt="HullCSS" class="header-image-1">
+            <img src="/favicon.svg" alt="HullCSS" class="header-image-2">
         </a>
     </div>
     <div class="header-r">
diff --git a/src/styles.scss b/src/styles.scss
index b87687c..2437b97 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -24,6 +24,8 @@ header {
 
     // set height
     height: 75px;
+    padding-left: 5px;
+    padding-right: 5px;
 
     // set colors
     @apply bg-mono_4;
@@ -32,14 +34,39 @@ header {
     .header-l {
         height: 100%;
 
-        .header-image {
-            img {
-                height: 90%;
-                width: 90%;
-            }   
+        .header-image-1 {
+            display: block;
+        }
+
+        .header-image-2 {
+            display: none;
+        }
+
+        // if screen is less than 800px, hide image 1 and show image 2
+        @media only screen and (max-width: 800px) {
+            .header-image-1 {
+                display: none;
+            }
+
+            .header-image-2 {
+                display: block;
+            }
+        }
+
+        img {
+            height: 90%;
+            width: 90%;
+        }   
+    }
+
+    // if screen is less than 600px hide header-l
+    @media only screen and (max-width: 600px) {
+        .header-l {
+            display: none;
         }
     }
 
+
     .header-r {
         // flex links in col
         display: flex;
@@ -68,6 +95,21 @@ header {
         }
     }
 
+    // if screen is less than 600px, center header-r and max width
+    @media only screen and (max-width: 600px) {
+        .header-r {
+            justify-content: center;
+            width: 100vw;
+            margin: 0px;
+
+            a {
+                font-size: large;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+    }
+
 }
 
 main {