Culture and style
Ever get the urge to style a good document?
No? Just me, then.
Well, the urge came over me recently so I started styling this single-page site:
A Few Notes On The Culture by Iain M Banks
I’ve followed this document across multiple locations over the years. It started life as a newsgroup post on rec.arts.sf.written in 1994. Ken McLeod published it there on Iain M Banks’s behalf.
The post complements the epic series of space opera books that Iain M Banks set in the anarcho-utopian society of The Culture. It’s a fascinating piece of world building, as well as an insight into the author’s mind.
I first became aware of it many few years later, after a copy had been posted to the web. That URL died, but Adrian Hon kept a copy on his site. Lots of copies keep stuff safe, so after contemplating linkrot, I made a copy on this site too.
But I recently thought that maybe it deserved a bit of art direction, so I rolled up my sleeves and started messing around, designing in the browser and following happy little accidents.
The finished result is still fairly sparse. It’s still entirely text, except for a background image that shows up if your screen is wide enough. That image of a planet originally started as an infra-red snapshot of Jupiter by the James Webb Space Telescope that I worked over until it was unrecognisable.
The text itself is the main focus of the design though. I knew I wanted to play around with a variable font. Mona Sans from Github was one of the first ones I tried and I found it instantly suitable. I had a lot of fun playing with different weights and widths.
After a bit of messing around, I realised that the heading styles were reminding me of some later reissues of The Culture novels, so I leant into that, deliberately styling the byline to resemble the treatment of the author’s name on those book covers.
There isn’t all that much CSS. I’ve embedded it in the head of the HTML rather than linking to a separate style sheet, so feel free to view source and poke around in there. You’ll see that I’m making liberal use of custom properties, the clamp function, and logical properties.
Originally I had a light mode and dark mode but I found that the dark mode was much more effective so I ditched the lighter option.
I did make sure to include some judicious styles for print, so if you fancy reading on paper, it should print out nicely.
Oh, and of course it’s a progressive web app that works offline.
I didn’t want to mess with the original document other than making some typographic tweaks to punctuation, but I wanted to break up the single wall of text. I wasn’t about to start using pull quotes on the web so in the end I decided to introduce some headings that weren’t in the original document:
- Government
- Economics
- Technology
- Philosophy
- Lifestyle
- Travel
- Habitat
- Legal System
- Politics
- Identity
- Nomenclature
- Cosmology
If your browser viewport is tall enough, the heading for the current section you’re reading will remain sticky as you scroll. No JavaScript required.
I’m pretty pleased with how this little project turned out. It was certainly fun to experiment with fluid type and a nice variable font.
I can add this to my little collection of single-page websites I’ve whittled over the years: