Site Realign

There is little fresh coat of paint around here. It’s not a million miles different from before, just some new aesthetic choices for fun.

I went for a high-information-density look. I liked what Robin said in his recent redesign notes, so I kinda copied that.

The goal here was to merge the about and index pages into one since they’re always the same thing anyways and this now saves you a click if you want to learn about me.


I went for a “blocks” look which I think works for the kind of content around the site. It wasn’t exactly tricky, but when blocks-within-blocks got involved, that was the only bit that had weird edge cases that honestly took more time polishing than the entire design took to pull off.

How you like them apples Lighthouse scores?

Lighthouse scores:

Performance = 100
Accessibility = 100
Best Practices = 92
SEO = 100
The Best Practices ding is about serving right-sized images, but I literally am using responsive images on that fluid with image of my face, so like, I think it’s fine.

There is one main typeface on the whole design: system-ui. That translates to San Francisco on Apple devices, which is a variable font, so I leaned into that used a variety of weights and widths, like:

font-variation-settings: "wdth"40, "wght"300;Code language: CSS (css)

Not all platforms have San Fransico though, of course! But it doesn’t matter as hopefully system-ui maps to something nice for them, or falls down the stack which is also fine.

Windows 10, fine.
Android 12, fine.

The only other typeface is a mono where I used ui-monospace, which I think is a little more aspirational (not sure where browsers are are honoring that). The full stack is actually:

ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospaceCode language: JavaScript (javascript)

… which I snagged from Modern Font Stacks. On my machine at the moment that fell all the way back to Menlo, although I do have a local copy of Source Code Pro that I just don’t have active at the moment.

I did add View Transitions attributes to some of the elements, but as this is a “website” (what some kids call “Multi Page Apps” lol) and none of the browsers support that variety of View Transition yet (“viewTransition API for navigations” Chrome Canary class the flag), I’m not going to go too far with them. This ain’t an Astro site so no polyfill action for me. I did try it in Canary and they aren’t working (the headers share a unique view-transition-name). But I have stopped caring for now. I just missed the <meta name="view-transition" content="same-origin" />, thanks Colin! Now it’s this:

Simple fun. Woah what’s with that dark mode popping in though? Surely some bug I’ll have to deal with.

That’s about it really! Nothing major. I linked up my two dumb little food sites in the footer because they are subdomains of this site and why not. Like my new Smashburger site which I finally polished up enough to share it with local Reddit community.



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

4 responses to “Site Realign”

  1. Colin Walker says:

    Hey Chris.

    You know a heck of a lot more about CSS etc. than I do but I couldn’t see the tag in your head which I believe is needed for the view transitions to work.

    <meta name="view-transition" content="same-origin" />

  2. Poorchop says:

    I think that this looks really cool. I particularly like the color scheme, both dark and light. The two column layout for the posts is a little confusing at first glance because it’s in reverse chronological order per column so you have to scroll to the bottom of the first column then all the way back up to follow the next column down. I get the point about information density though and I am on board with that approach. Too much negative space these days.

    • Chris Coyier says:

      Oh yeah I forgot to mention that in the post.

      I was just kind of mesmerized by how easy doing fluid width, fluid # of columns is with CSS columns. You just do columns: 300px or whatever you want them to be about and prevent breaks within the block chunks with break-inside: avoid; and done. It’s totally weird that they go top-to-bottom but I thought… how bad can that really be?

      The answer to it eventually is grid layout and grid-template-rows: masonry, hopefully anyway. Maybe I should have started with that and did a fallback for this style.

  3. fLaMEd says:

    Hey Chris, I’m really enjoying the new layout. Works great while browsing on my ipad!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️