[simple theme] add logo to search form on result page

* rework search form as grid layout
* remove various paddings and margins
* add logo and link to index to search form
* make categories bigger on phone

2 files changed, 36 insertions, 5 deletions

diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less
index 64bfda06a..1e3242475 100644
--- a/searx/static/themes/simple/src/less/index.less
+++ b/searx/static/themes/simple/src/less/index.less
@@ -22,6 +22,7 @@
     background: inherit;
     border: inherit;
     padding: 0;
+    display: block;
   }
 
   .search_filters {
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 5e8888f0b..239bef525 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -3,14 +3,34 @@
 */
 
 #search {
-  padding: 0 2em 0 @results-offset;
+  padding: 1.5em 2em 0 @results-offset - 4rem;
   margin: 0;
   background: var(--color-header-background);
   border-bottom: 1px solid var(--color-header-border);
+  display: grid;
+  column-gap: 1rem;
+  row-gap: 10px;
+  grid-template-columns: 3rem 1fr;
+  grid-template-areas:
+    "logo search"
+    "spacer categories";
+}
+
+#search_logo {
+  grid-area: logo;
+}
+
+.search_logo_img {
+  width: 40px;
+}
+
+.search_categories {
+  grid-area: categories;
 }
 
 #search_wrapper {
-  padding: 20px 0 10px 0;
+  padding: 0;
+  grid-area: search;
 }
 
 .search_box {
@@ -105,7 +125,8 @@
 
 @media screen and (max-width: @tablet) {
   #search {
-    padding: 0 @results-tablet-offset;
+    padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
+    column-gap: @results-tablet-offset;
   }
 
   #categories {
@@ -150,11 +171,20 @@
     width: 100%;
     margin: 0;
     padding: 0.1em 0 0 0;
+    column-gap: 0;
+    row-gap: 0;
+    grid-template-areas:
+      "logo search"
+      "categories categories";
+  }
+
+  .search_logo {
+    padding: 0;
   }
 
   #search_wrapper {
     width: 100%;
-    margin: 0 0 0.7em 0;
+    margin: 0;
     padding: 0;
   }
 
@@ -187,7 +217,7 @@
     width: 100%;
 
     label {
-      border-bottom: 0;
+      padding: 10px !important;
     }
   }
 }