[theme] optimize switching between different device types

3 files changed, 20 insertions, 24 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index c74358078..d8e2cfd0c 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -31,10 +31,10 @@
 
 @color-url-font: #29314d;
 @color-url-visited-font: #684898;
-@results-width: 40em;
-@results-offset: 8rem;
+@results-width: 35em;
+@results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
-@results-gap: 4em;
+@results-gap: 6em;
 @search-width: 40em;
 
 //
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index dd810de2a..d497c673f 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -104,7 +104,7 @@
   vertical-align: middle;
 }
 
-@media screen and (max-width: 1250px) {
+@media screen and (max-width: 80em) {
   #search {
     padding: 0 @results-tablet-offset;
   }
@@ -146,7 +146,7 @@
   }
 }
 
-@media screen and (max-width: @results-width) {
+@media screen and (max-width: 50em) {
   #search {
     width: 100%;
     margin: 0;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index aab913639..0a11d42a7 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -598,7 +598,7 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-@media screen and (max-width: 1250px) {
+@media screen and (max-width: 80em) {
   #main_preferences,
   #main_about,
   #main_stats {
@@ -695,6 +695,20 @@ article.result-images[data-vim-selected]::before {
   #backToTop {
     left: @results-width;
   }
+
+  #main_results div#results {
+    margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
+    display: grid;
+    grid-template-columns: 50em;
+    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
+    gap: 0;
+    grid-template-areas:
+      "answers"
+      "suggestions"
+      "sidebar"
+      "urls"
+      "pagination";
+  }
 }
 
 #main_results div#results.only_template_images {
@@ -721,29 +735,11 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-@media screen and (max-width: 1250px) {
-  #main_results div#results {
-    margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
-    display: grid;
-    grid-template-columns: 50em;
-    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
-    gap: 0;
-    grid-template-areas:
-      "answers"
-      "suggestions"
-      "sidebar"
-      "urls"
-      "pagination";
-  }
-}
-
 @media screen and (max-width: 50em) {
   #main_results div#results {
     grid-template-columns: 100%;
   }
-}
 
-@media screen and (max-width: @results-width) {
   article[data-vim-selected]::before {
     display: none;
     content: "";