To build this site, I used more than my share of HTML & CSS, with some JS thrown in for good luck. Don’t tell anyone, but I invented several new CSS features, and then used them here! That feels like cheating. Is that cheating?
This was an experiment in raw, untamed, pure CSS. But purity is for suckers. Several things would have been easier with Sass.
Design
I love sparse, bold typography. But I also love bright colors and flare. I hope this site has some of both. I started the process with a few priorities in mind:
- Eliminate furniture
at the top of the page.
Minimal navigation or running header,
just straight into hyper-text content.
I’m fighting my own instincts
to tell you everything I’ve ever done
when you land on an article
about the
hwb()color format or whatever. - Move a ‘cold open’ above the title, like it’s a podcast or something.
- Provide extreme (and persistent) customization from a minimal baseline. Not as a temporary gimmick, but something you might choose instead of switching to ‘reader mode’. The web is made to be customized.
Ok, the blur filter is mostly a gimmick.
But I recommend adding a small blur
to the terminal vibes.
And let’s be honest,
all the vibes look better
with a bit of sepia.
Maybe I should add an aging effect to pages,
so they turn sepia over time?
That was suggested as a CSS feature
in the original proposal.
Did you know that most browsers will let you choose your default fonts? There are great sites out there that will let you BYOF. Make the web your own! On this site, you have that as an option.
I’m not always happy with my skill as a designer, but I am very happy with those goals.
Fonts
Gosh, it was hard to pick fonts. There are so many good ones.
I didn’t want anything designed by a massive tech company, or associated with a specific operating system. In the end, I chose Alegreya variable and Alegreya Sans by Juan Pablo del Peral at HT Fonts, along with Chivo Mono variable by Héctor Gatti at Omnibus-Type.
I was really tempted by the Volume TC font family. I’m a sucker for old style serifs with a hand-drawn feel, and Tom Chalky does nice work. So I bought that for myself, and set it as the browser default. I love when sites use my preference!
Custom Elements
Custom elements are just HTML tags that you make up as you go. You can introduce them to the browser formally if you want, but it’s not required. I relied heavily on custom elements for this site, both formal and informal. Here are a few that I’ve published, in case you want to use them:
- Ground-Control
- A set of custom elements
that take some input
and broadcast the selected value –
controlling HTML attributes
& CSS properties on other elements.
I used all three
(
<input-control>,<toggle-control>, and<switch-control>) to create the theme controls for the site, then extended them to create<black-out>(for erasure poetry) and<dialog-toggle>(for opening and closing HTML<dialog>elements) - Eight-Ball
- Displays a random selection from a group of options, and allows the reader to shake things up. I went with a ‘dice’ icon on this site, because that’s what I found. Sorry for the mixed metaphor.
- Track-List
- Takes a list of audio files, and provides combined play/pause and previous/next controls.
Tools
I also used some tools from other people (with permission):
- Eleventy aka Build Awesome
- A flexible static site generator, with a bunch of great plugins. I used the plugins for RSS, fetch, responsive images, syntax highlighting, and WebC – along with the screenshots API for creating open-graph images on the fly.
- Remix Icon
- I wanted to find good looking icons that don’t come from a large corporate design system.
- Wakamai Fondue
- A great resource for inspecting font files, and learning what your fonts can do!
- Sorted Colors
- The CSS Color Specification strongly discourages the use of named colors. But CSSWG can’t tell me what to do. It was nice to have them sorted for me.
- Corporate Stuff
- I have no love for Netlify or Github or NPM, but they are tools that I still use sometimes for building and publishing websites. I might be looking for new options.