JeremyOttley/base.css

## base.css
/* **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 :) */

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}
	/* 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 :) */

	html {
	max-width: 70ch;
	padding: 3em 1em;
	margin: auto;
	line-height: 1.75;
	font-size: 1.25em;
	}

	h1,h2,h3,h4,h5,h6 {
	margin: 3em 0 1em;
	}

	p,ul,ol {
	margin-bottom: 2em;
	color: #1d1d1d;
	font-family: sans-serif;
	}