From 6aca9287a216b4d41c48469b1bbf6b61a438805a Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 17 Mar 2023 07:23:23 +0100 Subject: [PATCH] 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: Screenshot 2023-03-16 at 00 58 23 After: Screenshot 2023-03-16 at 00 58 37 Mobile Navbar: Screenshot 2023-03-16 at 01 05 12 --- web_src/css/base.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 225359b765..6cc7fe2821 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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 {