metoikos · April 10, 2019 10:50
diff --git a/baserock.css b/baserock.css
 @import url('https://fonts.googleapis.com/css?family=Fira+Sans:300');
 body {
  font-family: 'Fira Sans', sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  background: #fafafa;
 }
 img {
  max-width: 100%;
 }
 a {
  color: #2ECC40;
  text-decoration: none;
 }
 h1, h2, strong {
  color: #111;
 }
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="baserock.css" type="text/css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <h1>This is still a simple website.</h1>
    <h2>Seriously, it takes minimal effort to improve this.</h2>
    <p><strong>7 fucking declarations.</strong></p>
    <p>That's how much CSS it took to turn that <a href="http://motherfuckingwebsite.com/">grotesque pile of shit</a> into this easy-to-read masterpiece. It's so fucking simple and it still has all the glory of the original perfect-ass website:</p>
    <ul>
      <li>Shit's still lightweight and loads fast</li>
      <li>Still fits on all your shitty screens</li>
      <li>Still looks the same in all your shitty browsers</li>
      <li>The motherfucker's still accessible to every asshole that visits your site</li>
      <li>Shit's still legible and gets your fucking point across</li>
    </ul>
    <h3>And guess what, motherfucker:</h3>
    <p>You never knew it, but it's easy to improve readability on your site. Here's how.</p>
    <h2>Let it breathe</h2>
    <p>Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.6 for body copy. Headings should be tighter. If you can't see that...piss off.</p>
    <p>If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.</p>
    <h2>A little less contrast</h2>
    <p>Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole.</p>
    <h2>Size Matters</h2>
    <p>I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.</p>
    <h2>Line-width, motherfucker</h2>
    <p>Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.</p>
    <h3>Yes, this is also fucking satire, you fuck</h3>
    <p>I love what the creator of <a href="http://motherfuckingwebsite.com/">this site's inspiration</a> did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.</p>"You're a fucking moron if you use default browser styles."<br>
    - Eleanor Roosevelt
    <hr>
    <h2>Epilogue</h2>
    <p>Text inspired by the geniuses behind <a href="http://motherfuckingwebsite.com/">motherfuckingwebsite.com</a> and <a href="http://txti.es">txti</a>.</p>
    <p>This page—that isn't a total fucking eyesore—was created by <a href="https://twitter.com/arkokoley">me</a>.</p>
  </body>
 </html>
	@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300');
	body {
	font-family: 'Fira Sans', sans-serif;
	line-height: 1.6;
	color: #222;
	max-width: 40rem;
	padding: 2rem;
	margin: auto;
	background: #fafafa;
	}
	img {
	max-width: 100%;
	}
	a {
	color: #2ECC40;
	text-decoration: none;
	}
	h1, h2, strong {
	color: #111;
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Index</title>
	<link rel="stylesheet" href="baserock.css" type="text/css" media="screen" title="no title" charset="utf-8">
	</head>
	<body>
	<h1>This is still a simple website.</h1>
	<h2>Seriously, it takes minimal effort to improve this.</h2>
	<p><strong>7 fucking declarations.</strong></p>
	<p>That's how much CSS it took to turn that <a href="http://motherfuckingwebsite.com/">grotesque pile of shit</a> into this easy-to-read masterpiece. It's so fucking simple and it still has all the glory of the original perfect-ass website:</p>
	<ul>
	<li>Shit's still lightweight and loads fast</li>
	<li>Still fits on all your shitty screens</li>
	<li>Still looks the same in all your shitty browsers</li>
	<li>The motherfucker's still accessible to every asshole that visits your site</li>
	<li>Shit's still legible and gets your fucking point across</li>
	</ul>
	<h3>And guess what, motherfucker:</h3>
	<p>You never knew it, but it's easy to improve readability on your site. Here's how.</p>
	<h2>Let it breathe</h2>
	<p>Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.6 for body copy. Headings should be tighter. If you can't see that...piss off.</p>
	<p>If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.</p>
	<h2>A little less contrast</h2>
	<p>Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole.</p>
	<h2>Size Matters</h2>
	<p>I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.</p>
	<h2>Line-width, motherfucker</h2>
	<p>Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.</p>
	<h3>Yes, this is also fucking satire, you fuck</h3>
	<p>I love what the creator of <a href="http://motherfuckingwebsite.com/">this site's inspiration</a> did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.</p>"You're a fucking moron if you use default browser styles."<br>
	- Eleanor Roosevelt
	<hr>
	<h2>Epilogue</h2>
	<p>Text inspired by the geniuses behind <a href="http://motherfuckingwebsite.com/">motherfuckingwebsite.com</a> and <a href="http://txti.es">txti</a>.</p>
	<p>This page—that isn't a total fucking eyesore—was created by <a href="https://twitter.com/arkokoley">me</a>.</p>
	</body>
	</html>