Fix padding calculations for intermediate widths
authorCarl Worth <cworth@cworth.org>
Sun, 24 May 2020 15:43:13 +0000 (08:43 -0700)
committerCarl Worth <cworth@cworth.org>
Sun, 24 May 2020 15:43:13 +0000 (08:43 -0700)
I just noticed that at some intermediate browser widths the page
padding was entirely missing. Fortunately, "git bisect" was very
useful and pointed me to the exact problematic commit:

93245be0a5db82eadd4fb532d27fa4fbea63a2ac

In that commit we were trying to move the range of media block from
620:720 to instead be 720:820 (to account for the change in the
box-sizing parameter now including 100 units of padding).

But that commit was botched in a couple of ways, (applying from
620:820 and also miscalculating everything within that range).

This commit corrects things and is verified to act as desired when
applied to the broken commit mentioned above and when applied at the
current point in the code history.

style.css

index 2fca6300d6f0ef913358b52ef3e883eaf18f8138..dfaa8e4f9fc32c58cc32a73904702cbb26057e70 100644 (file)
--- a/style.css
+++ b/style.css
@@ -124,10 +124,10 @@ body {
     padding-right: 1em;
 }
 
-@media screen and (min-width: 620px) and (max-width: 820px) {
+@media screen and (min-width: 720px) and (max-width: 820px) {
     #page {
-        padding-left: calc(1em + (100% - 820px)/2);
-        padding-right: calc(1em + (100% - 820px)/2);
+        padding-left: calc(1em + (100% - 720px)/2);
+        padding-right: calc(1em + (100% - 720px)/2);
     }
 }