Update shared header to be mobile friendly.

views/shared/header.ejs

@@ -1,10 +1,17 @@
 <div class="header">
     <a class="headerStart" href="/" >
         <img src="/shared/images/logo.png" alt="Subline">
-        <div class='headerLogo'>THE SUBLINE</div>
+        <div class='headerLogo mobileHide'>THE SUBLINE</div>
     </a>
 
-    <div class="headerEnd">
+    <a class="mobileHomeButton" href="/">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+            <polyline points="9 22 9 12 15 12 15 22"></polyline>
+        </svg>
+    </a>
+
+    <div class="headerEnd mobileHide">
         <a id="helpLink" class="headerHide" href="/help">HELP</a>
 
         <a id="privacyPolicyLink" class="headerHide" href="/privacy">PRIVACY POLICY</a>

views/shared/shared.css

@@ -270,6 +270,10 @@ form{
             margin-left: 10px;
         }
 
+        .mobileHomeButton{
+            display: none;
+        }
+
     .headerEnd{
         display: flex;
         align-items: center;
@@ -371,6 +375,30 @@ Banner
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    .mobileHide{
+        display: none;
+    }
+
+    .headerStart{
+        width: 0;
+    }
+
+        .mobileHomeButton{
+            display: flex;
+            align-items: center;
+            margin: auto 25px auto 0;
+            background: rgb(255, 99, 107);
+            box-shadow: 0 0 10px rgb(255, 99, 107);
+            border-radius: 25px;
+            border: none;
+            color: white;
+            padding: 15px;
+        }
+
+            .mobileHomeButton svg{
+                margin: auto;
+            }
 }
 
 label {