Increase horizontal page padding (#23507)
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">
This commit is contained in:
parent
96be0cb6e3
commit
6aca9287a2
1 changed files with 10 additions and 3 deletions
|
@ -1231,7 +1231,7 @@ a.ui.card:hover,
|
|||
/* enable fluid page widths for medium size viewports */
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
.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 {
|
||||
width: 100vw;
|
||||
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 {
|
||||
|
@ -1491,7 +1498,7 @@ a.ui.card:hover,
|
|||
}
|
||||
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 10px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.ui.form .ui.button {
|
||||
|
|
Loading…
Reference in a new issue