[theme] cleanup grid layout and remove various margins and paddings from elements

4 files changed, 52 insertions, 37 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 6f2de5250..c74358078 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -31,8 +31,10 @@
 
 @color-url-font: #29314d;
 @color-url-visited-font: #684898;
-@results-width: 50em;
-@results-offset: 4rem;
+@results-width: 40em;
+@results-offset: 8rem;
+@results-tablet-offset: 0.5rem;
+@results-gap: 4em;
 @search-width: 40em;
 
 //
@@ -41,6 +43,16 @@
 
 /// Start-Screen
 
+/// Header
+
+@color-header-background: #f7f7f7;
+@color-header-border: #d7d7d7;
+
+/// Footer
+
+@color-footer-background: #f7f7f7;
+@color-footer-border: #d7d7d7;
+
 /// Search-Input
 
 @color-search-border: @color-base;
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 09ee92646..dd810de2a 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -3,10 +3,10 @@
 */
 
 #search {
-  padding: 0 2em;
+  padding: 0 2em 0 @results-offset;
   margin: 0;
-  background: #f7f7f7;
-  border-bottom: 1px solid #d7d7d7;
+  background: @color-header-background;
+  border-bottom: 1px solid @color-header-border;
 }
 
 #search_wrapper {
@@ -104,7 +104,11 @@
   vertical-align: middle;
 }
 
-@media screen and (max-width: 75em) {
+@media screen and (max-width: 1250px) {
+  #search {
+    padding: 0 @results-tablet-offset;
+  }
+
   #categories {
     font-size: 90%;
     clear: both;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 84c1a201b..aab913639 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -78,8 +78,8 @@ footer {
   padding: 1em 0;
   width: 100%;
   text-align: center;
-  background-color: #f2f2f2;
-  border-top: 1px solid #e4e4e4;
+  background-color: @color-footer-background;
+  border-top: 1px solid @color-footer-border;
   overflow: hidden;
 
   p {
@@ -102,7 +102,6 @@ footer {
 input[type="submit"],
 #results button[type="submit"] {
   padding: 0.5rem;
-  margin: 2px 4px;
   display: inline-block;
   background: @color-download-button-background;
   color: @color-download-button-font;
@@ -365,11 +364,11 @@ article.result-images[data-vim-selected]::before {
 }
 
 #results {
-  margin: 2rem 2rem 0 2rem;
+  margin: 2rem 2rem 0 @results-offset;
   display: grid;
-  grid-template-columns: (@results-width + @results-offset) 1fr;
-  grid-template-rows: min-content 1fr min-content;
-  gap: 0 3rem;
+  grid-template-columns: (@results-width + @results-offset) 25em;
+  grid-template-rows: min-content min-content 1fr min-content;
+  gap: 0 @results-gap;
   grid-template-areas:
     "answers sidebar"
     "suggestions sidebar"
@@ -384,7 +383,6 @@ article.result-images[data-vim-selected]::before {
 }
 
 #urls {
-  margin: 0.5em 2em 20px 0;
   padding: 0;
   grid-area: urls;
 }
@@ -486,9 +484,6 @@ article.result-images[data-vim-selected]::before {
 
 #sidebar {
   grid-area: sidebar;
-  margin: 0 2px 5px 5px;
-  padding: 0 2px 2px;
-  max-width: 25em;
   word-wrap: break-word;
 
   .infobox {
@@ -592,7 +587,7 @@ article.result-images[data-vim-selected]::before {
   background: white;
   position: fixed;
   bottom: 85px;
-  left: @results-width;
+  left: @results-width + @results-offset + @results-gap;
   transition: opacity 0.5s;
   opacity: 0;
 
@@ -632,8 +627,6 @@ article.result-images[data-vim-selected]::before {
   }
 
   #sidebar {
-    max-width: @results-width;
-    margin: 0 0 2px 0;
     padding: 0;
     float: none;
     border: none;
@@ -698,14 +691,18 @@ article.result-images[data-vim-selected]::before {
       max-width: 98%;
     }
   }
+
+  #backToTop {
+    left: @results-width;
+  }
 }
 
 #main_results div#results.only_template_images {
-  margin: 2rem 2rem 0 2rem;
+  margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content min-content 1fr min-content min-content;
-  gap: 0 3rem;
+  gap: 0;
   grid-template-areas:
     "answers"
     "suggestions"
@@ -715,7 +712,7 @@ article.result-images[data-vim-selected]::before {
 
   #urls {
     width: inherit;
-    margin: 0 0 20px 0;
+    margin: 0;
   }
 
   #backToTop {
@@ -724,23 +721,27 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-/*
 @media screen and (max-width: 1250px) {
   #main_results div#results {
-    margin: 2rem 2rem 0 2rem;
+    margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
     display: grid;
-    grid-template-columns: (@results-width + @results-offset) 1fr;
+    grid-template-columns: 50em;
     grid-template-rows: min-content min-content min-content 1fr min-content min-content;
-    gap: 0 3rem;
+    gap: 0;
     grid-template-areas:
-      "answers empty"
-      "suggestions empty"
-      "sidebar empty"
-      "urls empty"
-      "pagination empty";
-    }
+      "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 {
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index f56a0edd0..7299e2574 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -107,7 +107,6 @@ div.selectable_url {
   border: 1px solid @color-result-search-url-border;
   padding: 4px;
   color: @color-result-search-url-font;
-  width: 100%;
   margin: 0.1em;
   overflow: hidden;
   height: 1.2em;
@@ -121,9 +120,8 @@ div.selectable_url {
 // dialog
 .dialog() {
   position: relative;
-  width: 70%;
   padding: 1em 1em 1em 2.7em;
-  margin: 0 8% 1em 8%;
+  margin: 0 0 1em 0;
   border: 1px solid black;
   border-radius: 4px;
   text-align: left;