fix: make search button (in nav bar) usable

closes #58

views/css/style.css

@@ -102,11 +102,6 @@ textarea[readonly] {
   background-color: #222;
 }
 
-label {
-  font-weight: bold;
-  margin-bottom: 0.2rem;
-}
-
 .form-field {
   border: 1px solid #222;
   border-radius: 5px;
@@ -120,6 +115,10 @@ label {
   margin: 1.5rem 0;
   padding: 1.5rem 0;
 }
+.form-field label {
+  font-weight: bold;
+  margin-bottom: 0.2rem;
+}
 
 a b,
 a em,
@@ -257,14 +256,13 @@ nav .navigation-wrapper .navbar-entry img {
   width: 30px;
   height: 30px;
 }
+nav .navigation-wrapper form {
+  display: flex;
+  gap: 4px;
+}
 nav .navigation-wrapper .search-form input {
   margin: 0;
 }
-@media screen and (max-width: 550px) {
-  nav .navigation-wrapper .search-form {
-    display: none;
-  }
-}
 nav .navigation-wrapper .sidebar-toggler {
   display: none;
 }

views/css/style.scss

@@ -124,11 +124,6 @@ textarea[readonly] {
   background-color: $bg-secondary;
 }
 
-label {
-  font-weight: bold;
-  margin-bottom: 0.2rem;
-}
-
 .form-field {
   border: 1px solid $bg-secondary;
   border-radius: $border-radius;
@@ -142,6 +137,11 @@ label {
     margin: 1.5rem 0;
     padding: 1.5rem 0;
   }
+
+  label {
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+  }  
 }
 
 a b,
@@ -296,13 +296,18 @@ nav {
       }
     }
 
+    form {
+      display: flex;
+      gap: 4px;
+    }
+    // .navbar-entry.navbar-search-button {
+    //   display: unset;
+    // }
+
     .search-form {
       input {
         margin: 0;
       }
-      @media screen and (max-width: 550px) {
-        display: none;
-      }
     }
 
     .sidebar-toggler {

views/layout.jet.html

@@ -105,16 +105,17 @@
             <input
               type="text"
               name="name"
+              required="true"
               class="search-form-text"
               placeholder="⌕ Search artworks..."
             />
-            <input type="submit" hidden />
+            <label class="navbar-entry navbar-search-button" id="search-page-entry"
+              ><img src="/assets/search.svg" alt="Search" 
+              /><input type="submit" hidden 
+            /></label>
           </form>
         </span>
         <span>
-          <span class="navbar-entry" id="search-page-entry">
-            <img src="/assets/search.svg" alt="Search" />
-          </span>
           <span class="navbar-entry">
             <a href="/settings">
               <img src="/assets/cog.svg" alt="Settings" />