From e2d312f6ae69d8bf7a36d4809b3f8544a92bb6b2 Mon Sep 17 00:00:00 2001
From: Alexandre Flament <alex@al-f.net>
Date: Thu, 28 Oct 2021 16:14:34 +0200
Subject: [PATCH] [mod] simple theme: adjust margins

* index page: margin top is 24% of the view port.
  avoid to scroll a small screen,
  center the content in the middle of the screen

* link to preferences at the same height same the input fields

* increase the category tab heighs

* increase the margin bottom of the query field

* in the results, change the h3 margin top and bottom to 0.4rem (6px)

* move the back to top button slightly on the right when the results are only images
---
 searx/static/themes/simple/src/less/definitions.less | 2 ++
 searx/static/themes/simple/src/less/detail.less      | 2 +-
 searx/static/themes/simple/src/less/index.less       | 6 +++++-
 searx/static/themes/simple/src/less/search.less      | 9 ++++-----
 searx/static/themes/simple/src/less/style.less       | 7 +++----
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 6a199b56b..529eb2b81 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -211,6 +211,8 @@ html {
 @results-gap: 5rem;
 @results-margin: 2rem;
 @search-width: 40rem;
+// heigh of #search, see detail.less
+@search-height: 7.5rem;
 
 /// Device Size
 /// @desktop > @tablet
diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
index 6c4022765..c12883c12 100644
--- a/searx/static/themes/simple/src/less/detail.less
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -17,7 +17,7 @@ article.result-images .detail {
   position: fixed;
   left: 60rem;
   right: 0;
-  top: 7rem;
+  top: @search-height;
   bottom: 0;
   background: var(--color-result-detail-background);
   border: 1px solid var(--color-result-detail-background);
diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less
index 1e3242475..6d9e530f9 100644
--- a/searx/static/themes/simple/src/less/index.less
+++ b/searx/static/themes/simple/src/less/index.less
@@ -1,5 +1,9 @@
 #main_index {
-  margin-top: 16em;
+  margin-top: 24vh;
+
+  #linkto_preferences {
+    right: 1.8rem;
+  }
 }
 
 .index {
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 239bef525..88a8626f2 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -9,7 +9,7 @@
   border-bottom: 1px solid var(--color-header-border);
   display: grid;
   column-gap: 1rem;
-  row-gap: 10px;
+  row-gap: 1rem;
   grid-template-columns: 3rem 1fr;
   grid-template-areas:
     "logo search"
@@ -120,7 +120,7 @@
 
 .search_filters {
   display: inline-block;
-  vertical-align: middle;
+  margin: 0.8rem 0 0 0;
 }
 
 @media screen and (max-width: @tablet) {
@@ -184,7 +184,6 @@
 
   #search_wrapper {
     width: 100%;
-    margin: 0;
     padding: 0;
   }
 
@@ -204,7 +203,7 @@
 
   .search_filters {
     display: block;
-    margin: 0.5em;
+    margin: 0.8em 0;
   }
 
   .language,
@@ -244,7 +243,7 @@
 
   label {
     cursor: pointer;
-    padding: 4px 10px;
+    padding: 0.3rem 0.75rem 0.5rem 0.75rem;
     margin: 0;
     display: block;
     text-transform: capitalize;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index ea95e3682..d2c3bba92 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -157,9 +157,8 @@ article.result-images[data-vim-selected]::before {
   h3 {
     font-size: 1.1em;
     word-wrap: break-word;
-    margin: 8px 0 8px 0 !important;
+    margin: 0.4rem 0 0.4rem 0;
     padding: 0;
-    margin-bottom: 0;
 
     a {
       color: var(--color-result-link-font);
@@ -526,7 +525,7 @@ article.result-images[data-vim-selected]::before {
 #linkto_preferences {
   position: absolute;
   right: 10px;
-  top: 0.9em;
+  top: 2rem;
   padding: 0;
   border: 0;
   display: block;
@@ -703,7 +702,7 @@ article.result-images[data-vim-selected]::before {
 
   #backToTop {
     left: auto;
-    right: 2rem;
+    right: 1rem;
   }
 
   #pagination {