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:

  1. Government
  2. Economics
  3. Technology
  4. Philosophy
  5. Lifestyle
  6. Travel
  7. Habitat
  8. Legal System
  9. Politics
  10. Identity
  11. Nomenclature
  12. 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:

Responses

Kevin Marks

@adactio can you explain “By Goîdel out of Chaos” in that? Should it be ”By Gödel out of Chaos” or “By Goídel out of Chaos” ? The former makes more sense to me, but I may be missing a reference

# Posted by Kevin Marks on Monday, January 23rd, 2023 at 1:59pm

Kevin Marks

@adactio 0x94 in Win1252 is ” and in Mac Roman is î, so I suspect that is the encoding transform that happened at some point before utf8 conversion.

# Posted by Kevin Marks on Monday, January 23rd, 2023 at 2:12pm

Jonathan Korman

❝ A Few Notes On The Culture by Iain M Banks [⋯] 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. ❞ adactio.com/journal/19846

Jeremy Felt

A was standing at his little Skip Hop table, scribbling on a pad of paper with a purple crayon. I took over and drew a face with eyes, ears, nose, mouth, and a few scraggly hairs.

He pointed at the nose, then at my nose and said “noh”. He pointed at the eyes, then at my eyes and laughed.

And he pointed at my ears and then over to the ears of a stuffed elephant across the room.

Little troll!

As I was helping A up into the chair in his room so that we could read books before bed, I saw a grain of cooked rice on my pants, left over from dinner cleanup. There was no garbage nearby.

So I ate it.

Occam’s razor, indeed.

I hadn’t thought about Vieuphoria in at least 15 years. Last week we were browsing Smashing Pumpkins videos and Michelle told me about a clip of super young Billy she had seen and then all of a sudden Vieuphoria popped into my head and we started watching it for a few minutes.

There’s a good chance I watched the VHS a dozen times back in the day. It’s a documentary that I probably still have memorized and now I’m looking forward to watching it again.

And of course that sparked a nostalgia mode—I really hadn’t thought of my 1997-2003 era Pumpkins obsession in a while—and I ended up browsing old shows on SPLRA. Bootlegs were very common back in the early aughts, but it’s nuts how available everything is now. It was fun listening to bits of Zwan shows from our crazed-fan road trip through Missouri in 2002.

They’ve even transcribed the stage banter!

Okay, now we’re here. Smashing Pumpkins lines:

I waited 14 hours, 10pm to 12pm, outside the Canopy Club in Urbana, IL for tickets to the February 27, 2000 show. None of my friends went with, there was concrete, and it was at least sparsely rainy and chilly.

I waited something like 6 (???) hours outside the Canopy Club on the day of that show. It was worth it because we ended up front and center for the entire thing and James returned my metal horns.

It did mean we missed out Billy taking everyone to IHOP that was waiting outside the record store early in the morning.

I drove up to Chicago from Champaign in my friend’s car and waited something like 6 or 8 hours outside of the Metro for I forget what show, but probably this one, and was literally the next person in line when it sold out.

I waited 10 or 12 hours in the United Center parking lot for tickets to their last shows. I got tickets to the United Center show, but I was too late for the actual last show.

The reason? I changed my brakes earlier that day and somehow didn’t tighten the lug nuts all the way, so turned around when the car started making horrible noises 15 minutes into the drive from Batavia on I-88. I probably would have been a couple hours earlier if I hadn’t dealt with that nonsense.

The strangest part about all of this is that I don’t remember at all if there were restroom opportunities. And the three longest waits, I was in line by myself even though I was buying tickets for a friend as well. Frank, how could you!

I do remember these teaching me that I could sit through anything.

We didn’t have smartphones then, what did we do!?!?

Unrelated, related: I’m pretty sure I saw Spoon in 1998 in Champaign-Urbana, maybe at the U of I student union? But all I really have is a memory of a concert flier.

I’m not writing for a particular audience. The reader in mind is me. If someone else would write these books I could go play golf.

Cormac McCarthy, in a rare response to questions—for two high school AP Language students, nonetheless, via Warren Ellis.

“The reader in mind is me”: I dig it.

Hemingway said to write for two people, yourself and for who you love. Vonnegut said to please just one.

I like Jeremy Keith’s treatment of Ian M. Banks’s 1984 piece, A Few Notes on the Culture, as an example of how licensing your work to allow adaptation can lead to interesting experimentation.

I have a couple long pieces saved as drafts that I’ve referenced over the years. One, which was not explicitly licensed as free and will remain as a draft, inspired the open lab structure we followed at WSU.

The other is George Orwell’s Politics and the English Language, which I very much enjoy, but also think would be fun to remix one day through style and annotation—checks calendar—in 19 years?

Hey, it’s Friday.

# Posted by Jeremy Felt on Saturday, January 28th, 2023 at 12:59am

4 Shares

# Shared by Andrew Woods on Sunday, January 22nd, 2023 at 4:29pm

# Shared by Ben O'Matic on Sunday, January 22nd, 2023 at 5:28pm

# Shared by John Kellden on Monday, January 23rd, 2023 at 10:34am

# Shared by Maxim Leyzerovich on Monday, January 23rd, 2023 at 3:58pm

10 Likes

# Liked by Andrew Woods on Sunday, January 22nd, 2023 at 4:29pm

# Liked by Pete Lambert on Sunday, January 22nd, 2023 at 4:29pm

# Liked by Simon on Sunday, January 22nd, 2023 at 4:58pm

# Liked by Ben O'Matic on Sunday, January 22nd, 2023 at 5:28pm

# Liked by Ben Ward on Sunday, January 22nd, 2023 at 9:01pm

# Liked by Rasmus Kaj on Sunday, January 22nd, 2023 at 9:27pm

# Liked by Alan Dalton on Monday, January 23rd, 2023 at 1:40am

# Liked by Maxim Leyzerovich on Monday, January 23rd, 2023 at 3:58pm

# Liked by Nick Doty on Tuesday, January 24th, 2023 at 5:00am

# Liked by Pirijan on Wednesday, January 25th, 2023 at 10:50am

Related posts

Displaying HTML web components

You might want to use `display: contents` …maybe.

Who knows?

Had you heard of these bits of CSS? Me too/neither!

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Assumption

Separate your concerns.

Supporting logical properties

Using the CSS trinity of feature queries, logical properties, and unset.

Related links

Printing music with CSS grid

Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.

We need fluid and responsive music rendering for the web!

Tagged with

How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer

This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!

Tagged with

Can you feel the rhythm‽ · 13 March 2024

Adam makes a very good point here: the term “vertical rhythm” is quite chauvanistic, unconciously defaulting to top-to-bottom writing modes; the term “logical rhythm” is more universal (and scalable).

Tagged with

What is Utility-First CSS?: HeydonWorks

Heydon does a very good job of explaining why throwing away the power of selectors makes no sense.

Utility-first detractors complain a lot about how verbose this is and, consequently, how ugly. And it is indeed. But you’d forgive it that if it actually solved a problem, which it doesn’t. It is unequivocally an inferior way of making things which are alike look alike, as you should. It is and can only be useful for reproducing inconsistent design, wherein all those repeated values would instead differ.

He’s also right on the nose in explaining why something as awful at Tailwind could get so popular:

But CSS isn’t new, it’s only good. And in this backwards, bullshit-optimized economy of garbage and nonsense, good isn’t bad enough.

Tagged with

Bill Oddie taught me how to make web sites - Hicks.design

I remember Jon telling me this lovely story when we first met in person. I love the idea that we had already met in a style sheet.

I also love the idea of hosting your own little internet archive—that Bill Oddie site still looks pretty great to me!

It’s a lot like an embarrassing family photo, but I’m owning it!

Tagged with

Previously on this day

12 years ago I wrote Twitter permissions

Don’t be sheeple, tweeple!

16 years ago I wrote Machine-tagging Huffduffer

Hacking Amazon’s API.

17 years ago I wrote Broken

The default behaviour of Internet Explorer’s new version switching is very, very wrong.

20 years ago I wrote Yub nub!

I’m sure I’ve mentioned before that Jamie, head-honcho at Message, has a brother who is a famous act-ohr.

22 years ago I wrote A gallery of travellery

As I prepare for my next ‘plane trip, I thought I’d share these pictures of an airplane journey.

22 years ago I wrote Northwards

Jessica and I are headed to Seattle.

23 years ago I wrote Sheer tastlessness

This banner ad is shocking for two reasons.