-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
98 lines (72 loc) · 5.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Perfect Motherfucking Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="🖕 And it’s really more fucking perfect than the last guy’s.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖕</text></svg>">
<style>
body {
max-width: 650px;
margin: 40px auto;
padding: 0 10px;
font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
color:#444
}
h1, h2, h3 {
line-height:1.2
}
@media (prefers-color-scheme: dark) {
body {
color: #c9d1d9;
background:#0d1117
}
a:link {
color:#58a6ff
}
a:visited {
color: #8e96f0
}
}
</style>
</head>
<body>
<h1 id="this-is-the-final-motherfucking-website">This is the <em>final</em> motherfucking website.</h1>
<p>And it’s <em>really</em> more fucking perfect than the last guy’s.</p>
<h2 id="seriously-some-minimal-fucking-things-are-needed-to-make-this-shit-perfect">Seriously, some minimal fucking things are needed to make this shit perfect.</h2>
<p><strong>Ten fucking declarations, a <code class="language-plaintext highlighter-rouge">@media</code> block, and one attribute.</strong></p>
<p>That’s how much CSS and HTML it took to turn that <a href="https://motherfuckingwebsite.com/">grotesque pile of shit</a> into this finally perfect masterpiece. It’s so fucking simple and it still has all the glory of the original perfect-ass website:</p>
<img src="/example.jpg" />
<ul>
<li>Shit’s <em>finally</em> lightweight and loads fast;</li>
<li><em>Finally</em> fits on all your shitty screens;</li>
<li><em>Finally</em> looks the same in all your shitty browsers;</li>
<li><em>Won’t</em> bleach your fucking eyeballs at night if your browser thinks you like dark things;</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 id="and-guess-what-motherfucker">And guess what, motherfucker:</h3>
<p>You never knew it, but it’s easy to improve reliability on your site. Here’s how.</p>
<h2 id="a-little-more-accessibility">A little more accessibility</h2>
<p>I know you love marginalization, but you should take care of people.
The <abbr title="HyperText Markup Language">HTML</abbr> tag doesn’t include the <a href="https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes"><code class="language-plaintext highlighter-rouge">lang</code> attribute</a> in your shitty webpage.<br />
You ever listen to a <a href="https://www.youtube.com/watch?v=NP94u7y_KkQ">wrong language screen reader lecture</a>? What a shitty experience.</p>
<h2 id="typography-matters">Typography matters</h2>
<p><a href="https://smartquotesforsmartpeople.com/">Don’t be dumb with typography</a>. Don’t let improper marks and quotes make their way onto websites because of dumb defaults in applications and CMSs.<br />
And did you let the browser choose the font? Don’t make me read such text with <em>Times New Roman</em>.</p>
<h2 id="license-motherfucker">License, motherfucker</h2>
<p>Do you revendicate intellectual property? No. So you must <a href="https://choosealicense.com/">choose a fucking public license</a>.<br />
And as you’ll never be perfect, let others <a href="https://github.com/LeoColomb/perfectmotherfuckingwebsite">improve your shit</a> or <a href="https://github.com/LeoColomb/perfectmotherfuckingwebsite/blob/main/LICENSE">do what the fuck they want to</a>.</p>
<h2 id="yes-this-is-the-last-fucking-satire-you-fuck">Yes, this is the last fucking satire, you fuck</h2>
<p>I’m impressed about what the creator of <a href="http://bettermotherfuckingwebsite.com/">this site’s inspiration did</a>. 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>
<p>“Don’t ignore stupid things or you will stay at the motherfucker level.”
— Brad Hollande</p>
</blockquote>
<hr />
<h2 id="epilogue">Epilogue</h2>
<p>Inspired by the geniuses behind <a href="https://motherfuckingwebsite.com/">motherfuckingwebsite.com</a> and <a href="http://bettermotherfuckingwebsite.com/">bettermotherfuckingwebsite.com</a>.</p>
<p>This page—that isn’t a total fucking content—was licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.</p>
</body>
</html>