[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-margin: 2rem; | ||||
| @search-width: 40rem; | ||||
| // heigh of #search, see detail.less | ||||
| @search-height: 7.5rem; | ||||
| 
 | ||||
| /// Device Size | ||||
| /// @desktop > @tablet | ||||
|  | ||||
| @ -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); | ||||
|  | ||||
| @ -1,5 +1,9 @@ | ||||
| #main_index { | ||||
|   margin-top: 16em; | ||||
|   margin-top: 24vh; | ||||
| 
 | ||||
|   #linkto_preferences { | ||||
|     right: 1.8rem; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .index { | ||||
|  | ||||
| @ -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; | ||||
|  | ||||
| @ -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 { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Alexandre Flament
						Alexandre Flament