My site went down!

...so I made it simpler

Posted on

My site went down! This is because the syntax highlighting library I made in an older blog post broke! Instead of just updating it (it was a pain because ext-php-rs is hard to use...) I just replaced it with Prism.JS.

This library is a lot simpler and better maintained. The only downside is that highlighting happens on the frontend, which probably means some sort of FOUC happens. The benefit is that I don't have to maintain a PHP library in Rust.

While doing this, I realised that I could make a lot of my site a lot easier to maintain if I just drop build steps.

Blogging in HTML

It's not that hard! The downsides of having to use XML-y tags everywhere is that you gain the benefits of concrete syntax. Another benefit is Semantic HTML, which let's me do things like abbr's.

It's pretty fun to read all the semantic tags and try them out. And it's fun to read the MDN! Click here for a combination of both of these. =)

Styling

I changed the font on my website from Cascadia Code to Maple Mono. I think it complements the body font a lot better! And I use the font in my editor now instead of Cascadia.

While changing styling, I found a horrible bug where a <pre><code> block's contents would influence the size of the document's page, even when scrolling. To fix this, my partner figured out that because I was using a display: grid; element as a document wrapper, the grid was calculating it's min-width with the minimum size of all elements in the body.

Crude diagram of above explanation.

The fix, of course, is trivial: 

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    /*
        Needed, otherwise .wrapper grid will use `min-width: min-content`.
        Problematic if an element expands past 100vw,
        where it will cause main to grow massively.

        https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#values
    */
    min-width: 0;
}

Dialog box

drawing of a deer, talking to you.

This was pretty fun to implement! I used the MDN border-image generator to make the dialog box, then I drew the deer on the left :-)

That's about it, other than some other stylesheet cleanup (I removed a bunch of calcs and moved some px values to rem!) Keep things simple! 󱥄󱥔