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.
v13
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?
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.
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 I just missed the view-transition-name). But I have stopped caring for now.<meta name="view-transition" content="same-origin" />, thanks Colin! Now it’s this:
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.
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" />
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.
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 docolumns: 300pxor whatever you want them to be about and prevent breaks within the block chunks withbreak-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.Hey Chris, I’m really enjoying the new layout. Works great while browsing on my ipad!