Clean Slate!

I have a new website!

My previous Jekyll codebase was the first website I ever built with code, truthfully I’m still quite proud of it. Before this, I used Adobe’s My Portfolio service, but my Design Placement course necessitated that students have a website to showcase their portfolio and I figured this was a good time to escape some vendor lock-in and put my new HTML and CSS skills to use. I had used Jekyll before to edit the Toronto Mesh website but had never built anything from scratch before. I’m still very pleased with how long that site lasted, it was well worth the time investment — had I hosted something with Squarespace at their monthly rate, I’d be out ~$1,500 by now!

I’ve also learned a few things over the years: It took me a long time to become a Tailwind person and despite some of the alluring features of SASS I’ve pretty much become a convert. Jekyll uses Ruby and managing one Ruby environment is okay. When multiple sites use Jekyll you need to manage multiple of these (rbenv helps) but overall it’s kind of a pain in the ass, especially if you try to update anything. Static site generators have their own templating languages which are great, except when you need to do something they don’t natively support and then it’s a pile of hacks.

Previously at Webrecorder, Emma introduced me to Astro when we were deciding how to build the new company website and despite not being the worlds most proficient JavaScript developer, its been a very nice change of pace. I wouldn’t recommend it as a first website framework for those completely new to building websites — Zola’s reasonably easy to implement templating language and lack of dependencies earns it my current recommendation¹ — but I like the freedom it offers… Hoping it lasts me another 5 years!

Process & Design Choices

I’ve kept things pretty minimal this time around, basic solid borders and fills make up most of the layout. I’ve opted not to animate anything up to now, the web can feel so snappy when everything is instant! A past version of myself might have felt the need to prove his web design abilities with flashier styling, now I can let the work speak for itself.

Nearly all of my previous URL structure should be maintained and continue to work (a few pages will be relegated to web archives). The existing recipes and projects RSS feeds should still function, but now there’s a new one for the blog! If you don’t know what this means, you’re one of today’s lucky ten thousand and get to discover the magic of RSS readers! I like NetNewswire for macOS and iOS, though I’ve heard good things about Feeder if you’re an Android person.

Colour is used minimally, orange is a highlight and blue is used for things you can interact with. The text is set in Unison for titles and big flashy text, Berkeley Mono for fun monospaced accents, and Plex Sans for everything else. Berkeley Mono ain’t cheap, but it sure looks nice.

The Tailwind Typography plugin is a helpful head-start for long-form text styling and can be easily overridden with & nesting selectors. Because of the Tailwind 4 switch to using CSS as a config file there isn’t a lot of up to date information on how to do this, so here’s my edits as of publishing!

@layer components {
  /* Typography plugin overrides */
  .prose {
    & p,
    li,
    h1,
    h2,
    h3 {
      color: black !important;
    }

    & a {
      color: var(--color-sky-700) !important;
    }

    & a:hover {
      color: var(--color-sky-600) !important;
      text-underline-offset: 0.2rem !important;
    }

    & blockquote {
      border-left-color: var(--color-orange-700) !important;
    }

    & hr {
      border-color: var(--color-slate-300) !important;
      border-width: 1px;
    }

    & li::marker {
      color: var(--color-orange-700) !important;
    }

    & code::after,
    code::before {
      content: "" !important;
    }

    & pre {
      border-radius: 0 !important;
      border-color: var(--color-slate-500) !important;
      border-style: solid !important;
      border-width: 2px !important;
    }

    & :not(pre) code {
      background-color: var(--color-slate-300) !important;
      padding: 0.125rem 0.25rem !important;
      border-width: 1px !important;
      border-color: var(--color-slate-700) !important;
      font-weight: normal !important;
    }
  }
}

If anyone knows how to do this without shoving !important at the end of every rule that is already set by prose elsewhere, please do get in touch!

The Future

I’m excited to finally have a place to publish longer-form written content. My friend Ty has also been bugging me to get on this pretty much since I met him. A blog has been on my list of things to do ever since I built the first site, but it’s taken five years of excuses and procrastination to get around to it!² It feels good to have a small space on the web where I am still in control.

More blog posts will come… eventually. Ty might have to keep waiting a bit longer for anything substantial! :)