From 3ac79dfc92ea829d96f73adf7174eeeeaeed5d8d Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Thu, 30 May 2024 12:42:32 -0600
Subject: [PATCH] before mobile search checkpoint

---
 header.php | 21 ++++++++++++---------
 style.css  | 22 +++++++++++++++++++++-
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/header.php b/header.php
index b1e7997..7a3b2ff 100644
--- a/header.php
+++ b/header.php
@@ -27,19 +27,20 @@
         <div class="container slowtwitch-desktop-header">
             <div class="row">
                 <div class="ten columns">
-                    <div class="row text-logo-header">
+                    <div class="row text-logo-header hide-mobile">
                         <img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
                         <p>Subscribe</p>
                     </div>
                     <div class="row flex-row">
-                        <img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
-                        <img class="slowtwitch-ad-header" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
+                        <img class="slowtwitch-logo-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
+                        <img class="slowtwitch-mobile-text-logo" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
+                        <img class="slowtwitch-ad-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
                     </div>
-                    <div class="row flex-row-right">
-                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo">
-                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/vimeo.svg" alt="vimeo logo">
-                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/facebook.svg" alt="facebook logo">
-                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/youtube.svg" alt="youtube logo">
+                    <div class="row flex-row-right hide-mobile">
+                        <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo">
+                        <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/vimeo.svg" alt="vimeo logo">
+                        <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/facebook.svg" alt="facebook logo">
+                        <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/youtube.svg" alt="youtube logo">
                         <form method="get" action="">
                             <div class="searchBarContainer">
                                 <input type="text" class="searchBox" name="s" id="s" placeholder="Search" />
@@ -47,8 +48,10 @@
                                     <img src="/wp-content/themes/slowtwitch-wp/assets/images/search.svg">
                                 </button>
                             </div>
+                        </form>
                     </div>
                 </div>
+                <label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>
                 <div class="two columns desktop-tag-logos">
                     <div class="row">
                         <img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim">
@@ -70,7 +73,7 @@
                         'menu' => 'primary',
                         'container' => '',
                         'theme_location' => 'primary',
-                        'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul><label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>'
+                        'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul>'
                     )
                 );
                 ?>
diff --git a/style.css b/style.css
index 739a06a..57620c0 100644
--- a/style.css
+++ b/style.css
@@ -11,6 +11,15 @@
     font-family: Oswald;
 }
 
+.hide-desktop {
+    display: none;
+}
+
+.slowtwitch-mobile-text-logo {
+    display: none;
+    margin-top: 15px;
+}
+
 .slowtwitch-desktop-header {
     width: 100%;
 }
@@ -164,6 +173,7 @@ nav {
 
 #open-btn {
     display: none;
+    margin-left: 5px;
 }
 
 #cancel-btn {
@@ -239,7 +249,17 @@ nav {
         background-color: #0b4fa0;
     }
 
-    .slowtwitch-desktop-header {
+    .desktop-tag-logos img {
         display: none;
     }
+}
+
+@media screen and (max-width: 550px) {
+    .hide-mobile {
+        display: none;
+    }
+
+    .slowtwitch-mobile-text-logo {
+        display: block;
+    }
 }
\ No newline at end of file