From: Carl Worth <cworth@cworth.org>
Date: Sun, 17 May 2020 15:25:06 +0000 (-0700)
Subject: Fix the page width to allow the content to be a full 720px wide
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=93245be0a5db82eadd4fb532d27fa4fbea63a2ac

Fix the page width to allow the content to be a full 720px wide

The code that was written here with numeric values of 720px was
assuming that the page interior would be as wide as 720px and that
padding would not be counted in that. But when we brought this code to
lmno we violated that assumption by using "box-sizing: border-box" on
the page, (making the padding be counted in computing the width of the
page.

The result of that was that the actual content of the page was only
620px and with actual paragraphs of text included now as part of the
empires client, it's clear that that was narrower than we really want.

So, in this commit, we account for the border-box semantics by using a
maximum page width of 820px (padding inclusive) so that the actual
page contents can be as wide as 720px.
---

diff --git a/style.css b/style.css
index c951559..2121937 100644
--- a/style.css
+++ b/style.css
@@ -52,14 +52,17 @@ body {
  *
  * And when the screen is wide enough, we can afford some "wasted"
  * space on either side of the page content. This starts at 0 for a
- * 620px wide page up to 50px on either side for a 720px wide page.
+ * 620px wide page up to 50px on either side for a 820px wide page.
+ *
+ * Note: This 820px width for the page includes the padding so the
+ * actual content is only ever as wide as 720px.
  *
  * Wider than that and we start to see the background on either side
  * of the page content.
  */
 #page {
     box-sizing: border-box;
-    max-width: 720px;
+    max-width: 820px;
     margin-left: auto;
     margin-right: auto;
     padding-top: 0;
@@ -68,14 +71,14 @@ body {
     padding-right: 1em;
 }
 
-@media screen and (min-width: 620px) and (max-width: 720px) {
+@media screen and (min-width: 620px) and (max-width: 820px) {
     #page {
-        padding-left: calc(1em + (100% - 620px)/2);
-        padding-right: calc(1em + (100% - 620px)/2);
+        padding-left: calc(1em + (100% - 820px)/2);
+        padding-right: calc(1em + (100% - 820px)/2);
     }
 }
 
-@media screen and (min-width: 720px) {
+@media screen and (min-width: 820px) {
     #page {
         padding-left: calc(1em + 50px);
         padding-right: calc(1em + 50px);