Update the Makefile to download the old version of the site, run
static-webmentions, and collect the WebMentions to send in a json file
saved as a build artifact.
Don't send these automatically; just save them for now. Until I work out
a solution to save sent WebMentions and avoid sending duplicates, I'll
keep the sending of WebMentions manual.
For some reason this caused webhint's axe/aria test to error out with a
"Protocol error" so I disabled it. Axe tests are covered by Lighthouse
anyway.
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/
