[theme] optimize switching between different device types

This commit is contained in:
MrPaulBlack 2021-09-25 17:44:54 +02:00 committed by Markus Heiser
parent 385dce213b
commit 859179f0c9
3 changed files with 20 additions and 24 deletions

View File

@ -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;
//

View File

@ -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;

View File

@ -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: "";