magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-29 21:26:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Increase horizontal page padding (#23507) (#23537)

Browse source 
Backport #23507 by @silverwind

Add a bit more empty space on left and right side of page content for a
more pleasant viewing experience. Also tweaked the mobile navbar to
match.

Before:
<img width="1276" alt="Screenshot 2023-03-16 at 00 58 23"
src="https://user-images.githubusercontent.com/115237/225473942-f544106f-1b61-456a-99fb-3ba136cabc8d.png">

After:
<img width="1270" alt="Screenshot 2023-03-16 at 00 58 37"
src="https://user-images.githubusercontent.com/115237/225473959-8b555359-a08d-48e1-9476-2710aabb1166.png">

Mobile Navbar:
<img width="673" alt="Screenshot 2023-03-16 at 01 05 12"
src="https://user-images.githubusercontent.com/115237/225473966-adccef2b-4d34-44ed-8c75-d4ca46d96cf3.png">

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2023-03-17 09:01:47 -04:00 committed by GitHub
parent 68c9f1abd8
commit cab7044772
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web_src/css/base.css
View file

@ -1231,7 +1231,7 @@ a.ui.card:hover,
/* enable fluid page widths for medium size viewports */ /* enable fluid page widths for medium size viewports */
@media (min-width: 768px) and (max-width: 1200px) { @media (min-width: 768px) and (max-width: 1200px) {
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
width: calc(100vw - 3em); width: calc(100vw - 64px);
} }
} }
@ -1285,7 +1285,14 @@ a.ui.card:hover,
.following.bar #navbar { .following.bar #navbar {
width: 100vw; width: 100vw;
min-height: 52px; min-height: 52px;
padding: 0 0.5rem; padding: 0 16px;
}
@media (max-width: 767px) {
.following.bar #navbar {
padding-left: 4px;
padding-right: 0;
}
} }
.following.bar #navbar .brand { .following.bar #navbar .brand {
@ -1491,7 +1498,7 @@ a.ui.card:hover,
} }
.ui.container.fluid.padded { .ui.container.fluid.padded {
padding: 0 10px; padding: 0 32px;
} }
.ui.form .ui.button { .ui.form .ui.button {