A Partial Redesign

Site redesign is at least partially done. I realized right now that my idea of only showing seven days of posts on my home page doesn’t quite work.

  1. I’m not really sure how to filter to the last seven days of content effectively.
  2. I don’t post every day, and the site won’t be rebuilt if I don’t post.

Still, I like the idea of having seven days on my home page, with some days just saying “No posts were written on this day” for any previous days and “No posts have been written yet today.” for the current day.

There’s almost certainly a way to do this with date math in Hugo and triggering regular builds, but I don’t think it’s worth it. This is an idea I’ll keep in mind. Much like my desire to have working URLs for things like /year/ showing all posts in that year, /year/month showing all posts in that year-month, and /year/month/day showing all posts on that day, this is one of those Hugo limitations that makes me consider writing my own CMS.

Notable Changes Around Here

I have been playing with this design locally for a while. I came to like it so much, I swapped to this color scheme on the site like 6 months ago. Today, I decided things were at least “close enough” to move things to the main site.

The primary changes are:

  • I am using a fixed width font now across the whole site for all content. This font is Berkeley Mono, which I paid for and have used as a my main fixed-width font locally for quite a while. Please don’t steal it from my site– you need a license to use it, which you can purchase from US Graphics.
  • I am using background colors on my headers. I like them so much, I hope it’ll encourage me to write posts worthy of having headers down to H4.
  • I’ve added some block drawing/block characters to the dates on the homepage, taking advantage of some of Berkeley Mono’s cool built in stuff. I have also switched from a more human “April 14, 2024” to ISO8601 (2024-04-14) dates to continue with my retro, almost brutalist flair.

Pages that Flex the Design

I think my Archive, which I’m not generally fond of, looks great now. I’m also happy with Uses. One of my favorite posts, Delimited files are hell also looks pretty good. I think it shows off how nicely code blocks blend with and stick out from the rest of the site. This was a major concern of mine going to a fixed-width font everywhere.

Where it falls down

I still don’t love my index page. It feels crowded. I know how much work has gone into it over time, but it’s still not quite right. One idea I’m playing with is removing the site title entirely and possibly moving the navigation to the bottom or to a menu button. Neither seems quite right.

Ideas and criticism welcome

My design skill is the worst– I have enough taste to know things aren’t as polished or “correct” as I’d like, but not enough skill with CSS or design to get that final spit shine. So I’m more than happy to take ideas on how to improve things. I am glad to have moved almost entirely to using a few CSS variables versus all the hand tweaked sizes I had splattered all over the place. It’s not a solid as I’d like, but with a bit of help from some online calculators, this is about the prettiest top-of-the-CSS file I’ve ever written:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

:root {
  --color-primary: #21A179;
  --color-content: #ffffff;
  --color-background: #1E1E24;
  --color-links: #8093f1;
  --color-visited: #ef476f;
  --color-inactive: #81ae9d;
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
}

And yes, this section is partially to have a code block in this post because reasons.