• Code Blocks Generated With Hugo Are Looking Strange In Safari

    I was working on yet another website redesign and I was actually proud to release it even thought it needed a lot of work. For instance, I forgot to make my codeblocks scrollable. .highlight {overflow-x: auto;} fixes it, but then I noticed that font sizes looked different within a code block.

    Four lines of code where the middle two lines are larger than the others

    I thought that minifying code was fucking things up, but I opened up the dev tools and noticed flex around the code lines. Frantically googling a combination of “Hugo Code Block Flex Broken” and came across a thread discussing this issues on a theme’s GitHub. I didn’t read much of it but I saw a comment by @bglw explaining that iOS has a font-sizing issue with flexboc and I’d have to add some styles to fix it.

    /* Fixes iOS font sizing anomaly */
    html {
        text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;

    text-size-adjust sounded familiar and it turns out that I heard about this issue last year. I’m writing this at 11pm and I don’t wanna go down a rabit hole, but it looks like this happens when the text is wider than the screen I think?

    This all raises the question—why dind’t I notice it before and if it’s because it didn’t happen before, why now?

    I might examine this some other time but for now I’m happy with my proof of concept site.

    P.S. Sorry for the strange title, I did it in case someone might have the same problem in the future since it seemed like such an esoteric issue.

  • I Don't Think Names Work Like This