OT: How do they pull off the gradual backgrund color shifts (no, you aren't seeing things)? I read the article sans JavaScript, so that's not it. I sort of like it at the moment, and all the colors provide a readable background for the text. It might drive me crazy in the long run. Still, I always appreciate a little innovation.
It’s all done with CSS animations [1].
The background specified in interconnected-2020.css [2] lines 8–9:
background: #cdecff; /* lightest-blue */
animation: changingbg 600s infinite;
/* Calculated using
https://www.joshwcomeau.com/gradient-generator/
in LRGB mode with precision=8 and linear easing
Colors: #CDECFF #FFCDEC #FEECCD #9EEBCF #CDECFF
*/
@keyframes changingbg {
from {
background: hsl(203deg 100% 90%);
}
8% { background: hsl(233deg 68% 92%); }
17% { background: hsl(293deg 52% 90%); }
25% { background: hsl(323deg 100% 90%); }
33% { background: hsl(344deg 98% 92%); }
42% { background: hsl(16deg 97% 92%); }
50% { background: hsl(38deg 96% 90%); }
58% { background: hsl(78deg 44% 87%); }
67% { background: hsl(137deg 50% 84%); }
75% { background: hsl(158deg 66% 77%); }
83% { background: hsl(185deg 62% 84%); }
92% { background: hsl(191deg 87% 84%); }
to {
background: hsl(203deg 100% 90%);
}
}
[2]: https://interconnected.org/home/static/styles/interconnected...