It’s been almost a year since my last redesign. With this redesign I wanted to trying something new with the typography and the page layouts.
Contents#
New Font Stack#
I’m using these fonts now:
- Space Grotesk. I love the techie and slightly quirky vibe of this font. Mainly using this in headers and some navigational elements.
- FK Roman Standard. Having previously used Source Serif 4 for body text in the past I wanted to try something new and fresh. I discovered this font from reading articles on The Verge and it just so happens to be designed by Florian Karsten, the same designer of Space Grotesk. I like how legible and slightly elegant this font is.
- IBM Plex Mono. This has been my go-to monospace font for sometime now. I mainly use this for code snippets, tags, and the byline in blog posts.
Moving Away from TailwindCSS#
While I’ve good experiences working with TailwindCSS, I no longer see it as a necessity for this project. Over the past year, I’ve grown more comfortable writing my own CSS especially since working through some exercises in this short course on CSS layouts. Removing TailwindCSS was relatively easy to do given that Astro components already support locally-scoped CSS styles in components.
I now have my CSS in a few different files:
base.css:Base styles for the entire site, such as anti-aliasing and some CSS resets.prose.css:Styles for prose content in blog posts, focusing mostly on typography.fonts.css:Font-face declarations.tokens.css:CSS variables for colors, spacing, and typography scales (generated using utopia.fyi).cube.css:Styles based on the CUBE CSS approach.utilities.css:Miscellaneous reusable helper classes.
I first encountered CUBE CSS in this CSS course by Andy Bell. I’m still learning the ins and outs of how to best use this in my current project.
Screenshots#
Home#
I spent a lot of time in Figma trying to come up with a new layout for the home page. Here’s where I landed after many days of experimentation.
One thing to note here is that the footer now contains a dropdown menu to toggle between light and dark mode.
About#
Some modest changes here to the typography. Also added my portrait to the side.
Blog#
I’ve updated the sidebar here to include a list of blog post tags and a link to the new blog index page.
Blog Index#
A new page where you can see all blog post tags and their associated posts in one place.
Blog Post#
The most notable change here is that I added some share buttons next to the intro paragraphs in the tablet/desktop layout. On mobile these just appear at the bottom of the article.
Links#
This is a new section I added to share links that I find interesting and helpful.
Reading#
I switched to a staggered two-column layout for my reading list.
