[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

4 files changed, 40 insertions, 6 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;
     }
   }
 }
diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html
index 127d55b2b..0c121eaed 100644
--- a/searx/templates/simple/categories.html
+++ b/searx/templates/simple/categories.html
@@ -1,4 +1,4 @@
-<div id="categories">{{- '' -}}
+<div id="categories" class="search_categories">{{- '' -}}
     <div id="categories_container">
         {%- for category in categories -%}
         <div class="category"><input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}"{% if category in selected_categories %} checked="checked"{% endif %}/><label for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips">{{ _(category) }}</label></div>
diff --git a/searx/templates/simple/search.html b/searx/templates/simple/search.html
index 176e7909e..f8c82cd1b 100644
--- a/searx/templates/simple/search.html
+++ b/searx/templates/simple/search.html
@@ -1,4 +1,7 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
+  <a id="search_logo" href="{{ url_for('index') }}">
+    <img class="search_logo_img" src="{{ url_for('static', filename='img/favicon.png') }}">
+  </a>
   <div id="search_wrapper">
     <div class="search_box">
       <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >