From fed874892387087e931d63aac8afd7f7e130f0e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zo=C3=AB?= <code@moiety.me>
Date: Fri, 2 May 2025 17:49:46 +0200
Subject: [PATCH] refactor: rework the search form with CSS Grid

---
 public/assets/css/front/index.css | 62 ++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/public/assets/css/front/index.css b/public/assets/css/front/index.css
index 36b1194..496a9c5 100644
--- a/public/assets/css/front/index.css
+++ b/public/assets/css/front/index.css
@@ -18,38 +18,57 @@ section.start a.search-link {
 }
 
 form.index-search-form {
+  display: grid;
+  grid-template-columns: auto max-content;
+  gap: 15px;
   width: 80%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 30px 0;
 }
 
+form.index-search-form > input,
+form.index-search-form > button {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 60px;
+  box-sizing: border-box;
+}
+
+form.index-search-form > input:focus {
+  color: var(--white);
+}
+
 form.index-search-form > input[type="text"] {
-  width: 88%;
-  height: 50px;
   font: 44px var(--base-type);
 }
 
+form.index-search-form > input[type="hidden"] {
+  /* This removes it from the grid calculations */
+  position: absolute;
+}
+
 form.index-search-form > button {
-  height: 60px;
+  display: grid;
+  grid-template-columns: auto;
+  align-items: center;
+  padding: 0;
   width: 60px;
-  position: relative;
-  top: 9px;
-  right: 0;
   text-transform: uppercase;
 }
 
 form.index-search-form > button > svg {
+  justify-self: center;
   width: 48px;
   height: 48px;
 }
 
-form.index-search-form > button > label {
-  font-weight: 500;
-  top: 15px;
-  position: relative;
-  font-size: 1.5em;
+form.index-search-form > button > span {
   display: none;
+  margin-top: 3px;
+  font-weight: 500;
+  font-size: 1.5em;
 }
 
 ::placeholder {
@@ -89,33 +108,34 @@ table.index-meta td {
 
 @media only screen and (max-width: 800px) {
   form.index-search-form > input[type="text"] {
-    width: 85%;
-    height: 50px;
     font: 34px var(--base-type);
   }
 }
 
 @media only screen and (max-width: 650px) {
   form.index-search-form > input[type="text"] {
-    width: 80%;
-    height: 50px;
     font: 34px var(--base-type);
   }
 }
 
 @media only screen and (max-width: 480px) {
+  form.index-search-form {
+    grid-template-columns: auto;
+  }
   form.index-search-form > input[type="text"] {
-    width: 99%;
-    height: 50px;
     font: 27px var(--base-type);
   }
 
+  form.index-search-form > input[type="text"],
   form.index-search-form > button {
-    width: 99%;
-    top: 15px;
+    width: 100%;
   }
 
-  form.index-search-form > button > label {
-    display: inline;
+  form.index-search-form > button {
+    grid-template-columns: auto 60px;
+  }
+
+  form.index-search-form > button span {
+    display: block;
   }
 }