[fix] several issues in the simple theme

- using more rem in style and definitions
- mobile width in preferences.less fix max-width: 75em to 80em (normalized with
  style.less and other)
- do not display #backToTop position on tablet (when max-width: 80em)
- fix answer box on mobile (when max-width: 50em)

3 files changed, 32 insertions, 42 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index d8e2cfd0c..946760ec1 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -31,11 +31,11 @@
 
 @color-url-font: #29314d;
 @color-url-visited-font: #684898;
-@results-width: 35em;
+@results-width: 45rem;
 @results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
-@results-gap: 6em;
-@search-width: 40em;
+@results-gap: 5rem;
+@search-width: 40rem;
 
 //
 @color-a-font: @color-base;
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index 0be6f9023..0909a6bf9 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -122,7 +122,7 @@
   }
 }
 
-@media screen and (max-width: 75em) {
+@media screen and (max-width: 80em) {
   .preferences_back {
     clear: both;
   }
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 86214ccd5..7ebdfeb88 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -75,7 +75,7 @@ main {
 footer {
   clear: both;
   min-height: 4rem;
-  padding: 1em 0;
+  padding: 1rem 0;
   width: 100%;
   text-align: center;
   background-color: @color-footer-background;
@@ -130,7 +130,7 @@ article[data-vim-selected] {
 
 article[data-vim-selected]::before {
   position: absolute;
-  left: 1em;
+  left: (@results-offset - 2rem);
   padding: 2px;
   content: ">";
   font-weight: bold;
@@ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before {
 #results {
   margin: 2rem 2rem 0 @results-offset;
   display: grid;
-  grid-template-columns: (@results-width + @results-offset) 25em;
+  grid-template-columns: @results-width 25rem;
   grid-template-rows: min-content min-content 1fr min-content;
   gap: 0 @results-gap;
   grid-template-areas:
+    "corrections sidebar"
     "answers sidebar"
-    "suggestions sidebar"
     "urls sidebar"
     "pagination sidebar";
 }
@@ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before {
 }
 
 #suggestions {
-  grid-area: suggestions;
-
   .wrapper {
     display: flex;
     flex-flow: row wrap;
@@ -404,12 +402,6 @@ article.result-images[data-vim-selected]::before {
 
 #suggestions,
 #answers,
-#corrections {
-  max-width: @results-width;
-}
-
-#suggestions,
-#answers,
 #infoboxes,
 #corrections {
   input {
@@ -435,9 +427,10 @@ article.result-images[data-vim-selected]::before {
 }
 
 #corrections {
+  grid-area: corrections;
   display: flex;
   flex-flow: row wrap;
-  margin: 1em 0;
+  margin: 0 0 1em 0;
 
   h4,
   input[type="submit"] {
@@ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before {
 
 #answers {
   grid-area: answers;
-  margin: 10px 8px 10px 8px;
   border: 1px solid #ddd;
   padding: 0.9em;
   box-shadow: 0 0 5px #ccc;
@@ -580,14 +572,14 @@ article.result-images[data-vim-selected]::before {
 
 #backToTop {
   border: 1px solid #ddd;
-  margin: 0 0 0 2em;
+  margin: 0;
   padding: 0;
   font-size: 1em;
   box-shadow: 0 0 5px #ccc;
   background: white;
   position: fixed;
-  bottom: 85px;
-  left: @results-width + @results-offset + @results-gap;
+  bottom: 8rem;
+  left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
   transition: opacity 0.5s;
   opacity: 0;
 
@@ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before {
   #main_preferences,
   #main_about,
   #main_stats {
-    margin: 2em 0.5em;
+    margin: 2rem 0.5rem;
     width: auto;
   }
 
-  #suggestions,
-  #answers {
-    margin-top: 1em;
-  }
-
   #infoboxes {
     position: inherit;
     max-width: inherit;
@@ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before {
   }
 
   #backToTop {
-    left: @results-width;
+    display: none;
+  }
+
+  #pagination {
+    margin-top: 2rem;
   }
 
   #main_results div#results {
     margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
     display: grid;
-    grid-template-columns: 50em;
+    grid-template-columns: @results-width;
     grid-template-rows: min-content min-content min-content 1fr min-content min-content;
     gap: 0;
     grid-template-areas:
+      "corrections"
       "answers"
-      "suggestions"
       "sidebar"
       "urls"
       "pagination";
   }
+
+  article[data-vim-selected]::before {
+    left: 0;
+  }
 }
 
 #main_results div#results.only_template_images {
@@ -718,9 +713,9 @@ article.result-images[data-vim-selected]::before {
   grid-template-rows: min-content min-content 1fr min-content min-content;
   gap: 0;
   grid-template-areas:
-    "answers"
-    "suggestions"
+    "corrections"
     "urls"
+    "answers"
     "sidebar"
     "pagination";
 
@@ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before {
     width: inherit;
     margin: 0;
   }
-
-  #backToTop {
-    right: 0.5em;
-    left: auto;
-  }
 }
 
 @media screen and (max-width: 50em) {
@@ -757,8 +747,9 @@ article.result-images[data-vim-selected]::before {
     margin: 0 5px 2px 5px;
   }
 
-  #corrections {
-    margin: 1em 5px 1em 5px;
+  #corrections,
+  #answers {
+    margin: 0 5px 1em 5px;
   }
 
   #results {
@@ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before {
     padding: 0;
   }
 
-  #backToTop {
-    left: 40em;
-    bottom: 35px;
+  #pagination {
+    margin: 2rem 1rem 0 1rem;
   }
 
   .result {