An even better motherf**king website

---
date: Jan 04, 2020
tags:
-
-
-
---

The one thing I hate about the modern Internet is that it fills with too many fancy CSS elements, long-running JavaScripts, cookies to “improve your browsing experiences”, random popup to “SUBSCRIBE NOW!” They just made my brain hurt.

One day, I found a website called, uh, Motherf**king Website[1]. It’s an extrmly simple website with only the following CSS:

OwO whewe iws the css
1

Yeah, it doesn’t even have a CSS[2]! But it really did just work. Then, unsurprisingly, I found a sequel to that website called Better Motherf**cking Website.

The heck?

But it did look better than the previous one. Well, I dig it although I know both of the sites are satire. Here is the original CSS source for the second one:

1
2
3
4
5
6
7
8
9
10
11
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
}

However, as the author of the website stated:

I love what the creator of this site’s inspiration 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.

How about… no?

Nah, actually he(or she)'s definitely right, it will need more CSS extension. But first, I need somewhere to test it first before putting on the main site, and the Access is the perfect place. It actually doesn’t look bad! So I started to make a fork of this CSS. Here is what I have done:

For the base, I just add an extra background-color property in body, just for helping the dynamic dark/light theme on my website:

original.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
margin: 40px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
background-color: #DDD;
color: #333;
padding: 0 10px;
}

h1,
h2,
h3 {
line-height: 1.2
}

To make heading more obvious, I did some content appending in CSS:

header.css
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
h1:before {
content: "# ";
}

h2:before {
content: "## ";
}

h3:before {
content: "### ";
}

h4:before {
content: "#### ";
}

h5:before {
content: "##### ";
}

h6:before {
content: "###### ";
}

h1 a:hover,
h1 a:active {
text-decoration: none;
}

This part is the extension on link to make it less ugly compared to default:

link.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link {
text-decoration: underline;
color: #555;
}

a:visited {
text-decoration: none;
color: #777;
}

a:hover,
a:active {
text-decoration: underline;
color: #77beec;
}

I also try to fix some distortedly-rendered element in Hexo:

general.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
img {
outline: none;
border: none;
max-width: 100%;
}

table {
width: 100%;
}

blockquote {
border-left-width: 2px;
border-left-color: gray;
border-left-style: solid;
padding: 0 10px 0;
}

I also made some improvements on post tag cloud on the homepage to better distinguish them:

tag.css
1
2
3
4
5
6
7
8
.hometag {
border: 1px solid #555;
margin: 5px;
padding: 0 5px;
color: #555;
border-radius: 5px;
display: inline-block;
}

By default, these code block generated is distorted and not good for viewing. I styled them here:

codeblock.css
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
pre {
font: 0.8em/1.0em "Courier New", Courier;
color: #222;
}

code {
font: "Courier New", Courier;
color: #AAA;
background: #444;
padding: 4px;
font-size: 16px;
}

.highlight {
border-color: #555;
border-style: solid;
border-width: 0.5px;
border-radius: 5px;
overflow: auto;
background: #DDD;
}

.highlight .gutter {
border-right-color: #555;
border-right-style: solid;
border-right-width: 0.5px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
}

.highlight .code {
width: 100%;
padding-left: 10px;
}

.highlight figcaption {
border-bottom-color: #555;
border-bottom-style: solid;
border-bottom-width: 0.5px;
}

.highlight figcaption span {
margin: 5px;
}

This is to improve the look of scrollbar as the default one is problematic with dark theme I implemented later:

scrollbar
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
::-webkit-scrollbar {
width: 10px;
height: 10px
}

::-webkit-scrollbar-button {
width: 0;
height: 0
}

::-webkit-scrollbar-button:end:decrement,
::-webkit-scrollbar-button:start:increment {
display: none
}

::-webkit-scrollbar-corner {
display: block
}

::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, .2)
}

::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: rgba(0, 0, 0, .5)
}

::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .15)
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}

::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:start {
width: 10px;
height: 10px
}

Lastly, I added dark/light theme support using prefers-color-scheme, and it looks good at night:

dynamic_theme.css
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
99
100
101
102
103
104
105
106
107
108
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: #CCC;
}

a:link {
color: #AAA;
}

a:visited {
color: #999;
}

pre {
color: #999;
}

code {
color: #222;
background: #AAA;
}

.tag {
border-color: #AAA;
color: #AAA;
}

.highlight {
border-color: #DDD;
background: #222;
}

.highlight .gutter {
border-right-color: #DDD;
}

.highlight figcaption {
border-bottom-color: #DDD;
}

::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .2)
}

::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .5)
}

::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .15)
}
}

@media (prefers-color-scheme: light) {
body {
background-color: #DDD;
color: #333;
}

a:link {
color: #555;
}

a:visited {
color: #777;
}

pre {
color: #222;
}

code {
color: #999;
background: #222;
}

.tag {
border-color: #555;
color: #555;
}

.highlight {
border-color: #555;
background: #DDD;
}

.highlight .gutter {
border-right-color: #555;
}

.highlight figcaption {
border-bottom-color: #555;
}

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2)
}

::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .5)
}

::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .15)
}

}

Thanks for taking your time to read this random pointless article that possibly not going to help you 😉


  1. Censored f-words in this article for good. My blog is family friendly (well, technically, but this is not YouTube). ↩︎

  2. I used a special space here called BRAILLE PATTERN BLANK, U+2800 if anyone need it ↩︎

Navigation

Not the Footnote

The site is proudly powered by Hexo and using a site strcuture from the Hexo theme called Nayo.

The site is powered by the glorious CSS from bettermotherf**kingwebsite.com with some tweaks. Censored the f-word for good.

This site is hosted on Digital Ocean. Deploy your next app in seconds. Get $100 in cloud credits from @DigitalOcean using my link.

Custom Stickers, Die Cut Stickers, Bumper Stickers - Sticker Mule

Possibly the Footnote

Main | Access | RSS | Sitemap
2008 - 2020 | Patrick WU Jinming