[mod] simple theme: adjust margins

* index page: margin top is 24% of the view port.
  avoid to scroll a small screen,
  center the content in the middle of the screen

* link to preferences at the same height same the input fields

* increase the category tab heighs

* increase the margin bottom of the query field

* in the results, change the h3 margin top and bottom to 0.4rem (6px)

* move the back to top button slightly on the right when the results are only images
This commit is contained in:
Alexandre Flament 2021-10-28 16:14:34 +02:00
parent 8985d3e6ef
commit e2d312f6ae
5 changed files with 15 additions and 11 deletions

View File

@ -211,6 +211,8 @@ html {
@results-gap: 5rem; @results-gap: 5rem;
@results-margin: 2rem; @results-margin: 2rem;
@search-width: 40rem; @search-width: 40rem;
// heigh of #search, see detail.less
@search-height: 7.5rem;
/// Device Size /// Device Size
/// @desktop > @tablet /// @desktop > @tablet

View File

@ -17,7 +17,7 @@ article.result-images .detail {
position: fixed; position: fixed;
left: 60rem; left: 60rem;
right: 0; right: 0;
top: 7rem; top: @search-height;
bottom: 0; bottom: 0;
background: var(--color-result-detail-background); background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background); border: 1px solid var(--color-result-detail-background);

View File

@ -1,5 +1,9 @@
#main_index { #main_index {
margin-top: 16em; margin-top: 24vh;
#linkto_preferences {
right: 1.8rem;
}
} }
.index { .index {

View File

@ -9,7 +9,7 @@
border-bottom: 1px solid var(--color-header-border); border-bottom: 1px solid var(--color-header-border);
display: grid; display: grid;
column-gap: 1rem; column-gap: 1rem;
row-gap: 10px; row-gap: 1rem;
grid-template-columns: 3rem 1fr; grid-template-columns: 3rem 1fr;
grid-template-areas: grid-template-areas:
"logo search" "logo search"
@ -120,7 +120,7 @@
.search_filters { .search_filters {
display: inline-block; display: inline-block;
vertical-align: middle; margin: 0.8rem 0 0 0;
} }
@media screen and (max-width: @tablet) { @media screen and (max-width: @tablet) {
@ -184,7 +184,6 @@
#search_wrapper { #search_wrapper {
width: 100%; width: 100%;
margin: 0;
padding: 0; padding: 0;
} }
@ -204,7 +203,7 @@
.search_filters { .search_filters {
display: block; display: block;
margin: 0.5em; margin: 0.8em 0;
} }
.language, .language,
@ -244,7 +243,7 @@
label { label {
cursor: pointer; cursor: pointer;
padding: 4px 10px; padding: 0.3rem 0.75rem 0.5rem 0.75rem;
margin: 0; margin: 0;
display: block; display: block;
text-transform: capitalize; text-transform: capitalize;

View File

@ -157,9 +157,8 @@ article.result-images[data-vim-selected]::before {
h3 { h3 {
font-size: 1.1em; font-size: 1.1em;
word-wrap: break-word; word-wrap: break-word;
margin: 8px 0 8px 0 !important; margin: 0.4rem 0 0.4rem 0;
padding: 0; padding: 0;
margin-bottom: 0;
a { a {
color: var(--color-result-link-font); color: var(--color-result-link-font);
@ -526,7 +525,7 @@ article.result-images[data-vim-selected]::before {
#linkto_preferences { #linkto_preferences {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 0.9em; top: 2rem;
padding: 0; padding: 0;
border: 0; border: 0;
display: block; display: block;
@ -703,7 +702,7 @@ article.result-images[data-vim-selected]::before {
#backToTop { #backToTop {
left: auto; left: auto;
right: 2rem; right: 1rem;
} }
#pagination { #pagination {