Well, it takes minimal small fucking effort to improve this shit.
Less than 30 style rulesets.
That's how much CSS it took to turn that that other guy's improvement upon this motherfucker into the vision of fucking glory you see before you.. It's so simple and it still has all the glory of the original perfect-ass website:
- Shit's still lightweight and loads fast
- Still fits on all your shitty screens
- Still looks the same in all your shitty browsers
- The motherfucker's still accessible to every asshole that visits your site
- Shit's still legible and gets your fucking point across
And guess what ?!
We stick with the basics of a better motherfucking website, and add just a bit more polish with adding responsiveness bonus.Your user knows what motherfucking font they want. Or they're just stupid.
So fucking give it to them. Set html { font-size: medium; /*(or whatever u like in px or em)*/ } and use rem units for the rest of your elements. The users who've selected their motherfucking font sizes will appreciate it, and the motherfucking idiots who don't know how to will just zoom your site like they would any other.
Let it breathe — in text-relative units.
Yeah, yeah, motherfucker, so you've got your 1.4 unitless line height, and you've specified page margins. But what the are you doing giving content width in motherfucking pixels? Scannable line length is determined by the text content. So use fucking text-based units. Those are em units. No, motherfucker, not rem, this isn't some fucking page-relative size, it's relative to the motherfucking current text
For sake, white isn't "a little less contrast"
So set that motherfucking background color to something other than straight white. Grey's depressing. #f1f1f1 is pretty fucking sweet for example, try to drop some background colors. And I'm not fucking obsessing over "just 7 rules", so bite me.
Details Matters
You don't have to turn into a motherfucking graphics design weenie, but some small touches make a difference
Distinguish your headers
A little color, some extra breathing room, and styles to distinguish your h1 from h6 headers doesn't hurt.
Subordinate headings should look subordinate
I mean, this clearly isn't a level-one heading, right?
And so on...
We're getting down the fucking stack.
Your lowest level heading should fucking look it.
Right ?
Distinguish your quotes, too.
By default a blockquote just adds a bit of padding to the left and right of the contents. If you settle for that, you're not doing your job.
Design can be art. Design can be simple. That’s why it’s so complicated.
Paul Rand
Use a nice serif font, preferably one picked from the set of serif fonts people get with their operating systems. And give the contents of the cite tag a little extra oomph so people know who supposedly said what.
Going beyond the basics for links doesn't hurt
Sure, a standard hypertext anchor is easy to spot if you don't hide it, but with minimal effort, additional hover and active effects give confidence that you're selecting what you actually think you're aiming for.
