Worked on the Lunatics release page CSS a little.
I had noticed that the page works very poorly on e-ink devices like my InkPad 3 Color reader's browser, because of the animated background effect, which I'm still pretty attached to.
It moves pretty slowly, but it still created updates with constant flickering as my e-reader tried to keep up.
Of course, the page is really designed to distribute or stream video, so it's normally intended for full-motion video browsers. The video is never going to work right on an e-reader.
But there's also credits and other text information on the site.
So, I looked up methods to fix this with CSS media queries, and I think it's fixed now.
It now only animates if the browser reports media type "screen" and feature "update: fast".
And this correctly suppresses animation now on my InkPad 3 Color e-reader. If you happen to have a similar device or other oddball browser, I'd be interested if the page is working for you.
Still working on honoring other parameters like "prefers-reduced-motion", "prefers-color-scheme", and "prefers-contrast". I would like to get those working as well.
Ultimately, I may add a Javascript button to change the behavior manually, but the page currently is HTML and CSS only to keep it lighter weight.
I did also test it in a text-only browser, w3m, where it looks pretty correct. Haven't tried other ones.
#LunaticsProject #WebDesign #CSS #MediaQueries #Testing