diff options
| author | Andreas Kling <awesomekling@gmail.com> | 2019-11-07 21:40:04 +0100 |
|---|---|---|
| committer | Andreas Kling <awesomekling@gmail.com> | 2019-11-07 21:40:04 +0100 |
| commit | 306cd0d8404f228eb403a4f221557a62acc963e7 (patch) | |
| tree | 1c21e9753a1a0b32b72f42ba32b786db01996344 /Base/home | |
| parent | 0355146af9c3392d1ea8c58e6bd09d7df9208d16 (diff) | |
| download | serenity-306cd0d8404f228eb403a4f221557a62acc963e7.zip | |
Base: Add a local copy of bettermotherfuckingwebsite.com for testing
Diffstat (limited to 'Base/home')
| -rw-r--r-- | Base/home/anon/www/bmfw.html | 15 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 16 insertions, 0 deletions
diff --git a/Base/home/anon/www/bmfw.html b/Base/home/anon/www/bmfw.html new file mode 100644 index 0000000000..01338805ed --- /dev/null +++ b/Base/home/anon/www/bmfw.html @@ -0,0 +1,15 @@ +<!DOCTYPE html><html><head><meta +charset="utf-8"><meta +name="viewport" content="width=device-width, initial-scale=1"><title>Better Motherfucking Website</title><style type="text/css">body{margin:40px +auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0 +10px}h1,h2,h3{line-height:1.2}</style></head><body><header><h1>This is <em>still</em> a motherfucking website.</h1> +<aside>And it's more fucking perfect than the last guy's.</aside> +</header><h2>Seriously, it takes minimal fucking effort to improve this shit.</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 <em>still</em> has all the glory of the original perfect-ass website:</p><ul><li>Shit's <em>still</em> lightweight and loads fast</li><li><em>Still</em> fits on all your shitty screens</li><li><em>Still</em> looks the same in all your shitty browsers</li><li>The motherfucker's <em>still</em> accessible to every asshole that visits your site</li><li>Shit's <em>still</em> 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 <code>line-height: 1.4</code> 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. I would've even made this site's background a nice <code>#EEEEEE</code> if I wasn't so focused on keeping declarations to a lean 7 fucking lines.</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 <em>also</em> 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><blockquote>"You're a fucking moron if you use default browser styles." +<br> +- Eleanor Roosevelt</blockquote><hr><h2>Epilogue</h2><p>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/drew_mc">me</a> with help from <a +href="https://twitter.com/gabehammersmith">him</a>. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-46163202-2','auto');ga('send','pageview');</script> </body></html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 2e78818e68..fc8642d700 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -34,6 +34,7 @@ h1 { <li><a href="br.html">br element</a></li> <li><a href="hover.html">hover element</a></li> <li><a href="afrag.html">links with fragments</a></li> + <li><a href="bmfw.html">better mother fricken website</a></li> <li><a href="http://www.serenityos.org/">www.serenityos.org</a></li> </ul> </body> |