💾 Archived View for jean.ribes.ovh › about-the-theme-design captured on 2022-06-11 at 20:34:56. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2022-03-01)
-=-=-=-=-=-=-
For mobile users or people with a smaller screen (<1300px), the wide-screen version of this website has a sidebar with a retro-futuristic animation of a scrolling road with a sunset over a skyline in the distance. It's your run-of-the-mill synthwave/outrun wallpaper.
The entire webpage design of this blog does not use any bitmap images nor video.
Don't trust me, fire up the devtools and inspect the sun, the road...
The outrun animation doesn't use any canvas, SVG or javascript.
The sidebar is entirely made with CSS animations. The screen flickering was taken from http://aleclownes.com/2017/02/01/crt-display.html
The sun is a <div> with a border-radius property and a linear-gradient background, and its childs are the stripes. The skyline is a SVG vector image that's repeated one time. All this part is pretty much some fixed dimensions and positionning tricks.
The road is made of several parts: a container that cuts the overflow, a wrapper that offsets the view, the plane with perspective and its childs: the road and the grid.
The grid is animated so that it slides the full length of a tile during the animation, giving the effect of an infinite road. The animation loops just right. The entire grid moves upward during the animation, but the overflow is hidden by the container so it appears that the road is appearing from the horizon..