[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-visited-font: #684898;
@results-width: 35em;
@results-width: 45rem;
@results-offset: 10rem;
@results-tablet-offset: 0.5rem;
@results-gap: 6em;
@search-width: 40em;
@results-gap: 5rem;
@search-width: 40rem;
//
@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 {
clear: both;
}

View File

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