Very nice! I like how bold and monolithic it looks (I just fell in love with that JetBrains Mono font). I did something similar (but fully based on HTML semantics) for people who like the style of my theme for Hugo, but don't want to use Hugo and all they need is a simple CSS file.
Nice. Interestingly, the JetBrains Mono OP uses has many opt-in OpenType feature variants that can make more like Fira Code that you use. Some highly opinionated changes I would personally do to like The Monospace Web more would be enabling more serif-y variants and less blockiness, i.e. something like:
/*
Character Variants settings for JetBrains Mono
(All are off by default, left them here all for reference.)
H/T https://wakamaifondue.com/ for the inspect!
This set is pretty much like "ss01" but with "cv07" on
or like "ss02" but with "cv05" off
"id" state `affected glyphs` effect when enabled (my pref/note)
*/
font-feature-settings:
"zero" off, /* `0` slashed, instead of dotted */
"cv01" on, /* `l` flat serif bottom instad of curve (on!!)*/
"cv02" off, /* `t` bottom curve instead of hook */
"cv03" off, /* `g` double-storey (sadly not nice) */
"cv04" off, /* `j` rounded bottom hook */
"cv05" off, /* `l` rounded bottom hook */
"cv06" on, /* `m` smaller middle apex (on!) */
"cv07" on, /* `W` smaller middle apex (on!) */
"cv08" off, /* `K Ж` straight without horizontal joint */
"cv09" on, /* `f` slab serifs (on!!) */
"cv10" on, /* `r` slab serifs (on!!) */
"cv11" on, /* `y λ` rounded tails (on!) */
"cv12" on, /* `u` spur (on!) */
"cv14" on, /* `¢ $` broken strikes (on?) */
"cv15" off, /* `&` like 'ET' */
"cv17" off, /* `f` curved */
"cv18" off, /* `2,6,9 curved diagonals */
"cv19" off, /* `8` symmetrical halves */
"cv20" off, /* `5` rounded bow */
"cv99" off, /* `С с` (cyrillic es) inverted‽‽ */
"liga" off, /* Sadly, not. */
"ss00" off !important; /* // just a terminating bogus without comma. */
Interestingly, what cannot be turned off are the "programming ligatures". Personally I don't like them lately, and I think for a regular webpage content can be odd, especially the triple equals (===) that in JetBrains Mono and other "coding" font produces three parallel lines (like two glyphs wide Identical to : `≡`, if it passes HN character filter).
I've put it into [1] along with some rules that makes it slightly easier to my eyes.
EDIT: disabling ligatures is possible through disabling Contextual Alternates (calt), neat! And it is also possible to keep them on and change only appearance of aforementioned equal sign sequences back to "normal", using ss19. Turns out all features are nicely documented at GH Wiki [1]:
calt – Contains all ligatures. Substitution for : between digits.
ss19 – Adds gaps in ≠ ≠= == ≡≡ ligatures.
https://panr.github.io/terminal-css/