2022 redesign

2022-10-24 #css #meta

This blog's design has remained roughly the same the past two years. I tweaked the style a lot, but changes were incremental and stay true to the neutral black and white style. Codebases rot over time, and small changes slowly but surely introduce technical debt. I started cleaning house, and before I knew it I was embarked in a full redesign.

Desk research & design inspiration

Before I design a website, I like to set up a primary goal to fall back to. For my blog, I went with "minimal enough to not get bored of it, but with enough personality".

I've had designs with exotic typography or a bunch of flair. But after a few weeks, I tend to get bored of them and fall back to a minimal design. This time I wanted more than a neutral style. I wanted some elements that add personality to the site without overdoing it, without getting tired of them after a few weeks.

First I went through my bookmarks to dig up some inspiration. Here are some that stood out the most.

Now, on to design and implementation.

Still Hugo

This site is built on Hugo, and I have no reason to change that. I adore Hugo. I'm still at awe of how fast it is, the entire site builds from source in 300ms. That includes parsing 100 markdown files to generate over 350 pages and concatenating and minifying the CSS. Hugo doesn't offer a lot of configuration and has no plugin system, which keeps me in check from overengineering things.

New typography

Since text is the most important aspect of a blog, I started shopping for fonts. My final choices were Karla and Berkeley Mono.

The chaotic neutral grid

On first sight, it's a typical sidebar + content layout. But there are few items that break out and make things interesting. Code blocks expand from the start of the sidebar to the end of the page. Blockquotes remain in line with the content, but run until the end of the page. Images take in as much space as possible.

This is all possible thanks to some fun with CSS grid. Named tracks make it easy to assign elements to columns.

.grid {
  display: grid;
  grid-template-columns:
    [left-edge] minmax(calc(var(--spacing) * 2), 1fr)
    [sidebar-start] auto
    [sidebar-end content-start] minmax(20rem, 32rem)
    [content-end] minmax(calc(var(--spacing) * 2), 1fr)
    [right-edge];
  column-gap: calc(var(--spacing) * 3);
}
 
.grid > .sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: 1 / 999;
}

Posts and page content are wrapped in an <article> tag, so adding display: contents allows me to specify which grid tracks the underlying content should snap to.

.grid > article {
  display: contents;
}
 
.grid > *,
.grid > article > * {
  grid-column: content-start / content-end;
}
 
.grid > article > pre {
  grid-column: sidebar-start / right-edge;
}
 
.grid > article > blockquote {
  grid-column: content-start / right-edge;
}
 
.grid > article > p:has(img) {
  grid-column: left-edge / right-edge;
}
 
.grid > .footer {
  grid-column: left-edge / right-edge;
}

I like the way the grid creates organized chaos with odd islands of whitespace like here.

The divider between the sidebar and the content also adds a randomness factor to the page. It stops running when it comes across a piece of breakout content. Sometimes it stops after the sidebar, sometimes it nearly reaches the end of the page.

This is achieved with a large end value for grid-row. The day I have a post with more than 999 blocks, the line will stop. I could increase the number, but why fight its quirkiness?

.grid > .sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: 1 / 999;
}

145 colors to my disposal

Limiting options is the best way to induce creativity. I challenged my self to only use named CSS colors. Browsers support 145 named colors, that's a complementary bag of 145 variables. My final color pallet consists of blue, magenta, cyan, gray, gainsboro, black, and white.

I also dug up the old a:visited selector which makes the site more colorful for some.

There's no dark mode support for now, but I'll most likely set that up later.

Better syntax highlighting

I ditched Hugo's native highlighting engine in favor of Torchlight. I'll write a post on setting up Torchlight with a static site generator in the coming days.

The biggest tradeoff is build speed. Hugo is inhumanly fast (300ms, remember?). Adding a tool that relies on network request is going to slow things down a lot. A full build takes about 16 seconds now, but the improved syntax highlighting is worth it. I only run Torchlight in production, so it doesn't slow down the writing and dev experience.

Besides highlighting, Torchlight has fun features like code collapsing. And I don't need to start every PHP snippet with a <?php tag anymore!

class User
{ Click to expand…
    public function __construct(
        public int $id,
        public string $name,
        public string $email,
    ) {
    } 
}

Knowing myself, I'll be tweaking the design every know and then the coming months. I still want to restore dark mode, and maybe reintroduce webmentions (I used to have them, but got rid of them in my crusade for minimalism in the previous design). I hope the new design will be a good baseline for the next few months or years, only time will tell. But for now, time to get writing again.