Previously forgot to include .svg files in the Makefile when generating
precompressed files for "gzip_static" and "brotli_static"
This commit includes them.
Compress with brotli ahead of time in CI, just like we do with zopfli
for gzip_static
Update hintrc to check for brotli compression.
Update lighthouse config to throttle CPU some more since brotli
decompression can be heavier.
Inspired by the h-entry implementation on Charlie Owen's personal
website: https://whalecoiner.com
The u-photo re-uses the 32px favicon that the browser has already
cached, so it shouldn't bloat up the page anymore.
These changes required a bit of additional CSS. I snuck in come color
changes too.
I previously removed this from <head> because the first piece of
metadata should be setting the charset to utf-8. This commit adds it
back, but to the bottom of <head>.
- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
State that both dark and light color schemes are supported in the
document <head> to inform browsers before CSS is loaded and parsed.
Also added a bunch of comments.
- Changed: Make all color codes 3-char. Shave off a few bytes.
- Removed: all responsive layout besides the navigation links.
Everything else should work well at all window sizes without making
allowances for special cases.
- Removed: redundant CSS rules
- Added: centered images. Left-aligned images in a center-aligned column
of text break flow.
- Added: dark mode link colors for visited/active. Active link colors
give better a11y.
- Fix: don't show unnecessary scrollbar for <pre> blocks
Also put more comments in the source to explain why each rule is
important.
All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
- Text width was too wide on wide screens; reduce it.
- Make the nav-links' responsive layout for narrow viewports trigger at
a narrower window size. It used to trigger at 600px, but I made it
trigger at 32rem instead since the nav links aren't too wide. This
also handles cases where users' default sans-serif fonts are very
wide: rem measures by character width instead of pixels.
- Make the narrow-optimized multiline-navlinks the default, and make
widescreens a special case detected with a CSS media query.
Previously, widescreens were the default; however, this meant that
browsers that didn't support media queries (like dillo and netsurf)
couldn't switch to the multi-line navigation at narrow widths. This is
a good example of progressive enhancement; modern browsers will get
the same behavior as before, but the lowest common denominator will
see a better experience.
- Don't further reduce the max-width for narrow screens; narrow screens
are already narrow. We now have one less CSS rule.
- Use the recommended resolution for the open graph image
- Since the mask-icon is onl served as a cache-busted asset and never
served as a plain link from the site root, move it to assets/
- Cache-bust the webmanifest and put it in assets/
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.
More info: https://web.dev/optimize-cls/
