Cassie Jones [Tue, 18 Feb 2020 23:53:32 +0000 (00:53 +0100)]
Avoid calc(700px + 9em) in media queries
I got a report that code blocks looked wrong on mobile. I was able to
reproduce in Chrome: they didn't get their margins properly updated by
the media query. Investigation revealed that apparently calc() with
mixed units is broken in media queries on Chrome.
What I'm seeing here seems worse than the issue described there, so
there might be other factors going on, but it worked perfectly in
Firefox so I'm not sure what's going on. >_<
Cassie Jones [Sat, 18 Jan 2020 00:44:30 +0000 (19:44 -0500)]
Hide animated GIF stamps if "reduce motion" is on
Some people have a hard time dealing with motions near text they're
reading, or just don't want to be dealing with animated content
generally. The (prefers-reduced-motion: reduce) media query is active
when the reader has enabled one of the associated accessibility features
on their device. We can use that to hide the animated "stamps" GIFs
which generally have very short, fast loops.
This code currently uses ".gif" as a proxy for "is animated", which
could be improved by having some additional metadata. Additionally, it
might be nice to have alternate still versions of the gifs displayed
when the animated ones are hidden.
Cassie Jones [Tue, 12 Nov 2019 05:06:13 +0000 (00:06 -0500)]
Add background color to images
If an image is loading on a slow connection, it displays progressively
and there's a large blank region where the image will be. Giving it a
background color makes the eventual shape of the image display more
clearly.
Cassie Jones [Tue, 12 Nov 2019 04:37:37 +0000 (23:37 -0500)]
Minify inline CSS, move syntax colors to bottom of page
This improves both maintainability and performance because the CSS
can be written out-of-line, and then get inserted and minified.
The stylesheet tag for the syntax colors got moved to the bottom of
the page, because CSS in the head tag blocks rendering until it's
loaded. Inside the body is dependent on browsers, but they all support
it and in the worst case you just get the original blocking behavior.
projects / web / blog / log