Here’s a fun page coming from secretGeek.net. You don’t normally think “fun” with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that.
The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page markup and the content. The design is so minimal (or “naked”) that it’s code leaks through! Very cool.
The page explains the trick, but I’ll paraphrase it here:
- Everything is a block-level element via
* { display:block; } - …except for anchors, code, emphasis and strong, which remain inline with
a,code,em,strong {display:inline} - Use
::beforeand::afterto display the HTML tags as content (e.g.p::before { content: '<p>'})
The page ends with a nice snippet culled from Josh Li’s “58 bytes of css to look great nearly everywhere”:
html {
max-width: 70ch;
padding: 2ch;
margin: auto;
color: #333;
font-size: 1.2em;
}