[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-margin: 2rem;
@search-width: 40rem;
// heigh of #search, see detail.less
@search-height: 7.5rem;
/// Device Size
/// @desktop > @tablet

View file

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

View file

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

View file

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

View file

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