[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)
This commit is contained in:
MrPaulBlack 2021-09-26 13:01:22 +02:00 committed by Markus Heiser
parent b6ae1f1c7a
commit 8268873701
3 changed files with 32 additions and 42 deletions

View File

@ -31,11 +31,11 @@
@color-url-font: #29314d; @color-url-font: #29314d;
@color-url-visited-font: #684898; @color-url-visited-font: #684898;
@results-width: 35em; @results-width: 45rem;
@results-offset: 10rem; @results-offset: 10rem;
@results-tablet-offset: 0.5rem; @results-tablet-offset: 0.5rem;
@results-gap: 6em; @results-gap: 5rem;
@search-width: 40em; @search-width: 40rem;
// //
@color-a-font: @color-base; @color-a-font: @color-base;

View File

@ -122,7 +122,7 @@
} }
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
.preferences_back { .preferences_back {
clear: both; clear: both;
} }

View File

@ -75,7 +75,7 @@ main {
footer { footer {
clear: both; clear: both;
min-height: 4rem; min-height: 4rem;
padding: 1em 0; padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: @color-footer-background; background-color: @color-footer-background;
@ -130,7 +130,7 @@ article[data-vim-selected] {
article[data-vim-selected]::before { article[data-vim-selected]::before {
position: absolute; position: absolute;
left: 1em; left: (@results-offset - 2rem);
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
@ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before {
#results { #results {
margin: 2rem 2rem 0 @results-offset; margin: 2rem 2rem 0 @results-offset;
display: grid; 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; grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap; gap: 0 @results-gap;
grid-template-areas: grid-template-areas:
"corrections sidebar"
"answers sidebar" "answers sidebar"
"suggestions sidebar"
"urls sidebar" "urls sidebar"
"pagination sidebar"; "pagination sidebar";
} }
@ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before {
} }
#suggestions { #suggestions {
grid-area: suggestions;
.wrapper { .wrapper {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -402,12 +400,6 @@ article.result-images[data-vim-selected]::before {
} }
} }
#suggestions,
#answers,
#corrections {
max-width: @results-width;
}
#suggestions, #suggestions,
#answers, #answers,
#infoboxes, #infoboxes,
@ -435,9 +427,10 @@ article.result-images[data-vim-selected]::before {
} }
#corrections { #corrections {
grid-area: corrections;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin: 1em 0; margin: 0 0 1em 0;
h4, h4,
input[type="submit"] { input[type="submit"] {
@ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before {
#answers { #answers {
grid-area: answers; grid-area: answers;
margin: 10px 8px 10px 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 0.9em; padding: 0.9em;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc;
@ -580,14 +572,14 @@ article.result-images[data-vim-selected]::before {
#backToTop { #backToTop {
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 0 0 0 2em; margin: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc;
background: white; background: white;
position: fixed; position: fixed;
bottom: 85px; bottom: 8rem;
left: @results-width + @results-offset + @results-gap; left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
@ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before {
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 2em 0.5em; margin: 2rem 0.5rem;
width: auto; width: auto;
} }
#suggestions,
#answers {
margin-top: 1em;
}
#infoboxes { #infoboxes {
position: inherit; position: inherit;
max-width: inherit; max-width: inherit;
@ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before {
} }
#backToTop { #backToTop {
left: @results-width; display: none;
}
#pagination {
margin-top: 2rem;
} }
#main_results div#results { #main_results div#results {
margin: 2rem @results-tablet-offset 0 @results-tablet-offset; margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
display: grid; 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; grid-template-rows: min-content min-content min-content 1fr min-content min-content;
gap: 0; gap: 0;
grid-template-areas: grid-template-areas:
"corrections"
"answers" "answers"
"suggestions"
"sidebar" "sidebar"
"urls" "urls"
"pagination"; "pagination";
} }
article[data-vim-selected]::before {
left: 0;
}
} }
#main_results div#results.only_template_images { #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; grid-template-rows: min-content min-content 1fr min-content min-content;
gap: 0; gap: 0;
grid-template-areas: grid-template-areas:
"answers" "corrections"
"suggestions"
"urls" "urls"
"answers"
"sidebar" "sidebar"
"pagination"; "pagination";
@ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before {
width: inherit; width: inherit;
margin: 0; margin: 0;
} }
#backToTop {
right: 0.5em;
left: auto;
}
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 50em) {
@ -757,8 +747,9 @@ article.result-images[data-vim-selected]::before {
margin: 0 5px 2px 5px; margin: 0 5px 2px 5px;
} }
#corrections { #corrections,
margin: 1em 5px 1em 5px; #answers {
margin: 0 5px 1em 5px;
} }
#results { #results {
@ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before {
padding: 0; padding: 0;
} }
#backToTop { #pagination {
left: 40em; margin: 2rem 1rem 0 1rem;
bottom: 35px;
} }
.result { .result {