d80fca38e9
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"> (cherry picked from commit 019857a7015cae32c12b5eac0b895c05f0264b77)
25 lines
500 B
CSS
25 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;
|
|
}
|
|
}
|