diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 246f8daa1..6f2de5250 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -32,6 +32,7 @@ @color-url-font: #29314d; @color-url-visited-font: #684898; @results-width: 50em; +@results-offset: 4rem; @search-width: 40em; // diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index ec67b9f1c..09ee92646 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -181,7 +181,7 @@ .category { display: block; - width: 90%; + width: 100%; label { border-bottom: 0; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index c30d3e706..84c1a201b 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -52,9 +52,17 @@ main { margin: 0; } +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; +} + main { width: 100%; - // position: absolute; + margin-bottom: 2rem; + flex: 1; } #main_preferences, @@ -65,13 +73,14 @@ main { } footer { - bottom: 0; - height: 3em; - margin: 1em 0; - padding: 1em 0; clear: both; + min-height: 4rem; + padding: 1em 0; width: 100%; text-align: center; + background-color: #f2f2f2; + border-top: 1px solid #e4e4e4; + overflow: hidden; p { font-size: 0.9em; @@ -356,12 +365,33 @@ article.result-images[data-vim-selected]::before { } #results { - margin: 2em 2em 20px 2em; + margin: 2rem 2rem 0 2rem; + display: grid; + grid-template-columns: (@results-width + @results-offset) 1fr; + grid-template-rows: min-content 1fr min-content; + gap: 0 3rem; + grid-template-areas: + "answers sidebar" + "suggestions sidebar" + "urls sidebar" + "pagination sidebar"; +} + +#results #answers *:first-child, +#results #sidebar *:first-child, +#results #urls *:first-child { + margin-top: 0; +} + +#urls { + margin: 0.5em 2em 20px 0; padding: 0; - width: @results-width; + grid-area: urls; } #suggestions { + grid-area: suggestions; + .wrapper { display: flex; flex-flow: row wrap; @@ -430,6 +460,7 @@ article.result-images[data-vim-selected]::before { } #answers { + grid-area: answers; margin: 10px 8px 10px 8px; border: 1px solid #ddd; padding: 0.9em; @@ -454,9 +485,7 @@ article.result-images[data-vim-selected]::before { } #sidebar { - position: absolute; - top: 100px; - left: 57em; + grid-area: sidebar; margin: 0 2px 5px 5px; padding: 0 2px 2px; max-width: 25em; @@ -542,7 +571,7 @@ article.result-images[data-vim-selected]::before { } #pagination { - clear: both; + grid-area: pagination; br { clear: both; @@ -574,7 +603,7 @@ article.result-images[data-vim-selected]::before { } } -@media screen and (max-width: 75em) { +@media screen and (max-width: 1250px) { #main_preferences, #main_about, #main_stats { @@ -603,7 +632,6 @@ article.result-images[data-vim-selected]::before { } #sidebar { - position: static; max-width: @results-width; margin: 0 0 2px 0; padding: 0; @@ -673,32 +701,47 @@ article.result-images[data-vim-selected]::before { } #main_results div#results.only_template_images { - flex-direction: column; - width: auto; - display: flex; - - #sidebar { - position: relative; - top: auto; - order: 2; - } + margin: 2rem 2rem 0 2rem; + display: grid; + grid-template-columns: 100%; + grid-template-rows: min-content min-content 1fr min-content min-content; + gap: 0 3rem; + grid-template-areas: + "answers" + "suggestions" + "urls" + "sidebar" + "pagination"; #urls { - position: relative; - order: 1; + width: inherit; + margin: 0 0 20px 0; } #backToTop { right: 0.5em; left: auto; } - - #pagination { - position: relative; - order: 3; - } } +/* +@media screen and (max-width: 1250px) { + #main_results div#results { + margin: 2rem 2rem 0 2rem; + display: grid; + grid-template-columns: (@results-width + @results-offset) 1fr; + grid-template-rows: min-content min-content min-content 1fr min-content min-content; + gap: 0 3rem; + grid-template-areas: + "answers empty" + "suggestions empty" + "sidebar empty" + "urls empty" + "pagination empty"; + } +} +*/ + @media screen and (max-width: @results-width) { article[data-vim-selected]::before { display: none; @@ -723,7 +766,6 @@ article.result-images[data-vim-selected]::before { #results { margin: 0; padding: 0; - width: initial; } #backToTop {