Here are better stacks that achieve almost identical results for almost all users that haven’t customised their font stacks, but respect user preferences better:
(If Mozilla would get on and fix <https://bugzilla.mozilla.org/show_bug.cgi?id=713680>, I’d ditch Consolas, though you won’t want to leave it at just monospace because of the stupid default monospace font size thing [that should really never have happened but should absolutely have been retired by a decade ago], so most people write `monospace, monospace`, though I like to shorten it to `monospace,m`.)
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
That comment seems disingenuous, especially given the `line-height: 1.1` applied to headings which shows an awareness of the issues. There is no single optimal value: it varies by font, by size, by line width, by reader’s eyesight… you can’t just slap a nice mathematical ratio on it and call it optimal. As it stands, 1.618 is decidedly on the high side, though not outlandishly so. I personally prefer 1.4.
body {
overflow-x: hidden;
}
Please don’t. If this does anything, it’s a sign that you’ve written something the wrong way, and if it doesn’t, you should be scared that it will in the future, and will cut off some content and render it inaccessible, rather than breaking out of your site layout but leaving the content intact. In this case, it looks to have been done because the width limit was applied to the body element, but not desired for the header and so worked around, but the trouble is that you can’t do that correctly because CSS doesn’t have suitable units (vw and vh are fundamentally stupidly broken by design (the spec provided an esoteric way of unbreaking them, but only Firefox implemented it, so eventually they removed it), and always wrong, though the amount of error is sometimes tolerable for some restricted purposes). The width limit should rather have been applied to descendants of the body (main/footer); then you could leave the body overflow alone.
Eww. Eww. This is a horrible idea to apply as a general rule: it’ll be suitable for some images (… by accident as much as anything), but ruin others; and a 40% reduction is excessive. But not only that, opacity is the wrong technique, being sensitive to the background (the most extreme example: put an image inside a <button>); a filter using brightness and/or contrast would be better.
—⁂—
Although I’m not impressed with some of the stuff at the start of the stylesheet, after that it looks pretty solid. There are occasional points that I’d quibble over, but nothing major. I’ll stop here, this comment is already moderately long.
Hmm. I always seem to do some kind of review when these things come up here, can’t quite help myself; I should get on and finish starting that new section on my site for such matters (reviews, occasionally of projects, more of code, mostly CSS/JS/Rust).
—⁂—
Although I’m not impressed with some of the stuff at the start of the stylesheet, after that it looks pretty solid. There are occasional points that I’d quibble over, but nothing major. I’ll stop here, this comment is already moderately long.
Hmm. I always seem to do some kind of review when these things come up here, can’t quite help myself; I should get on and finish starting that new section on my site for such matters (reviews, occasionally of projects, more of code, mostly CSS/JS/Rust).