[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:
		
							parent
							
								
									8985d3e6ef
								
							
						
					
					
						commit
						e2d312f6ae
					
				| @ -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 | ||||||
|  | |||||||
| @ -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); | ||||||
|  | |||||||
| @ -1,5 +1,9 @@ | |||||||
| #main_index { | #main_index { | ||||||
|   margin-top: 16em; |   margin-top: 24vh; | ||||||
|  | 
 | ||||||
|  |   #linkto_preferences { | ||||||
|  |     right: 1.8rem; | ||||||
|  |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .index { | .index { | ||||||
|  | |||||||
| @ -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; | ||||||
|  | |||||||
| @ -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 { | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Alexandre Flament
						Alexandre Flament