Replacing Ruby with CSS Grid on shivjm.name

As I mentioned when I explained how I built shivjm.name, the Ruby elements I used are limited in their styling. I always ignored the fact that Firefox exhibits an annoying deviation:

For all I know, however, this is correct. Since Ruby doesn’t offer much flexibility anyway, I switched to using CSS Grid. Here’s the HTML I wrote (the BEM approach isn’t necessary, just habitual):

HTML<p class="name">
    <span class="name__name name__name--given">Shiv</span>
    <span class="name__punctation"> </span>
    <span class="name__annotation name__annotation--given">(given name)</span>
    <span class="name__punctation"> </span>
    <span class="name__name name__name--family">Jha-Mathur</span>
    <span class="name__punctation"> </span>
    <span class="name__annotation name__annotation--family">(family name)</span>
</p>

Because of the name__punctuation spans, this produces readable text without CSS:

Shiv (given name) Jha-Mathur (family name)

I wanted it to become a 2×2 grid with the annotations coming first. Changing visual order is usually inadvisable, but it seems acceptable in this simple scenario. Screenreaders read it in the source order, which might at most momentarily confuse a sighted user watching the focus zig-zag across the four cells of the grid. I laid it out using grid-template-rows and grid-row:

CSS.name {
  display: grid;
  grid-template-rows: [annotation] auto [name] auto;
}

.name__annotation {
  grid-row-start: annotation;
}

.name__name {
  grid-row-start: name;
}

And I was done! Well, I also had to add font sizes, borders, alignment, and padding like in the Ruby version. But then I was done:

This doesn’t hide the parentheses and tweaks the spacing and sizing, in line with my current preferences. Other than that, I believe I’ve achieved the same effect. Note that my initial Merge Request unnecessarily went to great lengths to hide the spacing spans. I later removed those rules.

On an unrelated note, the TinyCSS Eleventy plugin that I use to inline the CSS no longer works after upgrading from Eleventy v0.12.1 to v1.0.2. The error from the deploy logs is:

[Error: ENOENT: no such file or directory, open '_site/assets/styles/index.css'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
}

I believe it’s trying to access the referenced file before the output directory is created. That doesn’t make a lot of sense, since I didn’t touch my configuration and I’m following the example in the README. I also upgraded the plugin itself from v1.5.0 to v2.0.0, to no avail. I ended up removing the plugin altogether.