- he/they
27, US expat in Toronto, transmasc, chronically ill/immunocompromized, neurodivergent, arospec, nonmonogamous. i guess i'm a furry now? that's a recent development though. i'm not a programmer but i am a computer nerd and a linux user (apparently that's a thing people like to list here).
.
art page: calico-art
YOU – "It's called Crimeposting, Kim. It's disco."
KIM KITSURAGI – The detective looks at you for a long time. The questions on his face stop just short of accusing you of being "uncool".
EMPATHY [Trivial: Success] – He's trying to decide how he can best dissuade you from Crimeposting. Don't let him distract you, Harry boy.
DRAMA [Medium: Failure] – Besides, look what I can do.
YOU – "Besides, look what I can do."
KIM KITSURAGI – "Are you doing it right now?"
-
1
text stuff mostly🌟 your here 🌟 -
2
boxes, transform -
3
positioning, clicking stuff -
4
flexbox and grid -
5
animation and other nonsense
Are YOU a CSS BABY???
Are your friends doing stupid css tricks and leaving you feeling left out?
Do you wish 
Certified Computer Professional 
Eevee From Pokémon would help you out?
ok i'll do my best
First, let's see what you get.
Once upon a time, I stumbled upon ct.js, a game engine with a number of features and also a very pleasant-looking cat mascot. It also came to my attention that the SVG for the mascot is available on GitHub. Me being me, several minutes passed between me downloading the SVG file and getting an idea, and subsequent edits continued both to mine and friends' amusement.
And here's the generator: https://yal.cc/tools/cohost/gallery-generator/
You can download the page and mess with it as you may - it's written in plain ES6.
You can also export either plain HTML or HTML with classes for prechoster.
Here's it works:
After experimenting with anchor tricks I decided that I might, in fact, do something with the <details> tag for once. So I did:
The gallery is a <div> (surely enough) that has position: relative and overflow: hidden (just in case). The first image simply sits in the div and sets the overall dimensions+aspect ratio.
Then come the summary+details tricks:
The "next" button is the <summary>.
When you click it, we can display the next page on top of the container, but then we wouldn't be able to go back (which is only possible by clicking the button again), so the button needs to move.
The easiest way is to simply have something in the <details> that pushes the button away once expanded, so I've put it in the right-aligned container and added an invisible element that's button+spacing wide.
The "previous" button is then shown on top of summary-button, but remains click-through thanks to pointer-events: none.
Images with their own controls sections can be nested indefinitely, adding about 0.6KB of markup per layer.
Have fun!