From: Carl Worth <cworth@cworth.org>
Date: Mon, 8 Jun 2020 13:48:56 +0000 (-0700)
Subject: style: Apply "box-sizing: border-box" globally
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=9be7b5eabaa074f23c410861dd8b99d61711a6f6;hp=b0b2d2d5dd5c3bac29537e2f5b206208f0a43898

style: Apply "box-sizing: border-box" globally

This is really the only sane way to work. Without this, the behavior
of padding is really hard to use. For example, if I set an element to
"width: 100%" it fills the space like I want. But then, its child
elements might be right up against the left edge, so I had
"padding-left" of some amount. This moves the children from the edge
like I want, but _also_ makes the element grow so that its now larger
than the 100% of its container like I had specified.

That looks to me entirely like a broken default and is something to
just set once, globally to avoid this class of frustration.
---

diff --git a/style.css b/style.css
index baf35bf..b770986 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,8 @@
+/* Because this is the only sizing that is sane, make it global. */
+* {
+    box-sizing: border-box;
+}
+
 /*\
 |*|
 |*| Properties for the page: colors, etc.
@@ -124,7 +129,6 @@ body {
  * of the page content.
  */
 #page {
-    box-sizing: border-box;
     max-width: var(--page-max-width-padded);
     margin-left: auto;
     margin-right: auto;