Increase horizontal page padding (#23507)

silverwind · web-flow · commit 6aca9287a216 · 2023-03-17T02:23:23.000-04:00
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">
diff --git 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 {

Original file line number	Diff line number	Diff line change
`@@ -1231,7 +1231,7 @@ a.ui.card:hover,`
`1231`	`1231`	`/* enable fluid page widths for medium size viewports */`
`1232`	`1232`	`@media (min-width: 768px) and (max-width: 1200px) {`
`1233`	`1233`	`.ui.ui.ui.container:not(.fluid) {`
`1234`		`- width: calc(100vw - 3em);`
	`1234`	`+ width: calc(100vw - 64px);`
`1235`	`1235`	`}`
`1236`	`1236`	`}`
`1237`	`1237`
`@@ -1285,7 +1285,14 @@ a.ui.card:hover,`
`1285`	`1285`	`.following.bar #navbar {`
`1286`	`1286`	`width: 100vw;`
`1287`	`1287`	`min-height: 52px;`
`1288`		`- padding: 0 0.5rem;`
	`1288`	`+ padding: 0 16px;`
	`1289`	`+}`
	`1290`	`+`
	`1291`	`+@media (max-width: 767px) {`
	`1292`	`+ .following.bar #navbar {`
	`1293`	`+ padding-left: 4px;`
	`1294`	`+ padding-right: 0;`
	`1295`	`+ }`
`1289`	`1296`	`}`
`1290`	`1297`
`1291`	`1298`	`.following.bar #navbar .brand {`
`@@ -1491,7 +1498,7 @@ a.ui.card:hover,`
`1491`	`1498`	`}`
`1492`	`1499`
`1493`	`1500`	`.ui.container.fluid.padded {`
`1494`		`- padding: 0 10px;`
	`1501`	`+ padding: 0 32px;`
`1495`	`1502`	`}`
`1496`	`1503`
`1497`	`1504`	`.ui.form .ui.button {`