mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 11:35:03 +01:00 
			
		
		
		
	Fixes https://github.com/go-gitea/gitea/issues/30293 and introduce the `--page-spacing` variable which holds the spacing between the elements on the page. This is working vertically for all pages, including ones that have fomantic grid, and horizontally for all that use `flex-container`. The `.page-content > :first-child:not(.secondary-nav)` selector uses margin which in some cases enables to adjacent margins to overlap, which is nice. <img width="1320" alt="Screenshot 2024-04-06 at 01 35 19" src="https://github.com/go-gitea/gitea/assets/115237/3e81e707-e9ff-4b7f-a211-3d98f4f85353"> --- <img width="1327" alt="Screenshot 2024-04-06 at 01 35 45" src="https://github.com/go-gitea/gitea/assets/115237/aad196c0-9e21-4c06-ae59-7e33a76c61e1"> --- <img width="1321" alt="Screenshot 2024-04-06 at 01 35 31" src="https://github.com/go-gitea/gitea/assets/115237/785f6c5d-08b6-4e66-aa16-aeca7cfed3ad">
		
			
				
	
	
		
			26 lines
		
	
	
		
			500 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			26 lines
		
	
	
		
			500 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* container for full-page content with sidebar on left */
 | |
| 
 | |
| .flex-container {
 | |
|   display: flex !important;
 | |
|   gap: var(--page-spacing);
 | |
|   margin-top: var(--page-spacing);
 | |
| }
 | |
| 
 | |
| .flex-container-nav {
 | |
|   width: 240px;
 | |
| }
 | |
| 
 | |
| .flex-container-main {
 | |
|   flex: 1;
 | |
|   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 | |
| }
 | |
| 
 | |
| @media (max-width: 767.98px) {
 | |
|   .flex-container {
 | |
|     flex-direction: column;
 | |
|   }
 | |
|   .flex-container-nav {
 | |
|     width: auto;
 | |
|   }
 | |
| }
 |