xrmr · September 27, 2022 18:54 · Sep 26, 2022 · Sep 26, 2022 · Mar 7, 2022 · Apr 17, 2019
diff --git a/55-bytes-of-css.md b/55-bytes-of-css.md
@@ -80,4 +80,4 @@ p,ul,ol {
 # References
 
 - [CSS Reference on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS "CSS Reference on MDN")
-- [CodePen](https://codepen.io/JoeyBurzynski/pen/jOxYqwe "58 Bytes of CSS to Look Great Nearly Everywhere")
+- [CodePen](https://codepen.io/JoeyBurzynski/pen/jOxYqwe?editors=1100 "58 Bytes of CSS to Look Great Nearly Everywhere")
diff --git a/55-bytes-of-css.md b/55-bytes-of-css.md
@@ -80,3 +80,4 @@ p,ul,ol {
 # References
 
 - [CSS Reference on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS "CSS Reference on MDN")
+- [CodePen](https://codepen.io/JoeyBurzynski/pen/jOxYqwe "58 Bytes of CSS to Look Great Nearly Everywhere")
diff --git a/55-bytes-of-css.md b/55-bytes-of-css.md
@@ -1,6 +1,6 @@
-# 58 bytes of css to look great nearly everywhere
+# 58 bytes of CSS to look great nearly everywhere
 
-when making this website, i wanted a simple, reasonable way to make it look good on most displays. not counting any minimization techniques, the following 58 bytes worked well for me:
+When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
 
 ```css
 main {
@@ -10,20 +10,73 @@ main {
 }
 ```
 
-let's break this down.
+let's break this down:
 
-max-width: 38rem
-it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.
+**max-width**: `38rem`
+> it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.
 
-padding: 2rem
-if the display's width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.
+**padding:** `2rem`
+> if the display's width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.
 
-margin: auto
-this is really all that is needed to center the page, because main is a block element under semantic html5.
+**margin:** `auto`
+> this is really all that is needed to center the page, because main is a block element under semantic html5.
 
-a key insight: it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about "modern" web development, or, as i'm more inclined to believe, just how hard it is to keep it simple in a world of complication.
+**a key insight:** it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about "modern" web development, or, as i'm more inclined to believe, just how hard it is to keep it simple in a world of complication.
 
-update: following some discussion (see footer), i've since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays.
+**update 1:** following some discussion, I've since changed the padding to `1.5rem` for a happier compromise between mobile and desktop displays.
 
-update 2: the ch unit was brought to my attention here, and i quite like it! i've since changed to 70ch/2ch, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (a good thing for mobile).
+**update 2:** the [ch unit](https://www.w3.org/TR/css-values-4/#ch "ch unit") was brought to my attention, and I quite like it! I've since changed to `70ch/2ch`, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (_a good thing for mobile_).
+
 
+
+# 100 Bytes of CSS to look great everywhere (enhanced version)
+
+This should be simple drop-in css to look good on most displays:
+
+
+```css
+html {
+  max-width: 70ch;
+  padding: 3em 1em;
+  margin: auto;
+  line-height: 1.75;
+  font-size: 1.25em;
+}
+```
+
+Let's break this down. I've adapted the original text with my own commentary.
+
+**max-width:** `70ch`
+> the "readable range" is usually 60-80 character widths, and CSS lets you express that directly with the `ch` unit.
+  
+**padding:** `3em 1em`
+> If the display's width goes under the max-width set above, then this padding prevents edge-to-edge text on mobile. We use `3em` to provide top/bottom whitespace.
+  
+**margin:** `auto` 
+> This is really all that is needed to center the page - applied on html, because Dan's site doesnt have a semantic <main> tag and <html> is more likely to exist in most sites. That the top tag centers itself relative to nothing is unintuitive, but thats how browsers do.
+
+**line-height:** `1.75` 
+> Spacing between the lines to help increase visual clarity. Always leave line height unitless because reasons.
+
+**font-size:** `1.5em`
+> I've noticed that recent design trends and screen sizes have tended toward bigger font sizes. Or maybe I'm getting old. Prefer `em` or `rem` over `px` if you want to let users scale it.
+
+You can use `:root` instead of `<html>` to guarantee that there is some selector present, but its a touch too fancy for me and uses an extra character :)
+
+## Optional 100 more bytes
+
+```css
+h1,h2,h3,h4,h5,h6 {
+  margin: 3em 0 1em;
+}
+
+p,ul,ol {
+  margin-bottom: 2em;
+  color: #1d1d1d;
+  font-family: sans-serif;
+}
+```
+
+# References
+
+- [CSS Reference on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS "CSS Reference on MDN")
diff --git a/55-bytes-of-css.md b/55-bytes-of-css.md
@@ -0,0 +1,29 @@
+# 58 bytes of css to look great nearly everywhere
+
+when making this website, i wanted a simple, reasonable way to make it look good on most displays. not counting any minimization techniques, the following 58 bytes worked well for me:
+
+```css
+main {
+  max-width: 38rem;
+  padding: 2rem;
+  margin: auto;
+}
+```
+
+let's break this down.
+
+max-width: 38rem
+it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.
+
+padding: 2rem
+if the display's width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.
+
+margin: auto
+this is really all that is needed to center the page, because main is a block element under semantic html5.
+
+a key insight: it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about "modern" web development, or, as i'm more inclined to believe, just how hard it is to keep it simple in a world of complication.
+
+update: following some discussion (see footer), i've since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays.
+
+update 2: the ch unit was brought to my attention here, and i quite like it! i've since changed to 70ch/2ch, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (a good thing for mobile).
+