Aral Balkan
Well, y’know what they say about the 90/90 rule… something tells me with web projects the second 90% is spent working around CSS issues.
So, anyway… I added the code panel to my Kitten port of React Kawaii and spent a chunk of time getting the responsiveness and animation right and, well, here you go – have a play:
https://kitten-kawaii.small-web.org
:kitten: 💕
Writing a blog post about it as we speak and will likely publish it tomorrow or over the weekend :)
Aral Balkan
PS. Here’s the code:
https://codeberg.org/aral/kitten-kawaii/
And a big shout out to Nelson Menezes who apparently back in 2021 cracked how to do a smooth CSS-only 0-to-auto height animation by animating the grid-template-rows of a single row grid containing an element with min-height of zero from 0fr to 1fr. (https://nemzes.net/posts/animating-height-auto/)
(That’s the technique I’m using – which now works cross browser – after trying to achieve the same effect by animating margin-bottom proved too brittle.)
Nigel Moss 🌻
@aral Back in the day, I think the second 90% was spent thinking "Yay, that looks great now... better just check it in Internet Explorer though..." and then weeping 😂
Aral Balkan
@nigenet I remember those days… :)
Aral Balkan
@alien 💕
Alien
@aral sooo cool! :blobcat_box:
liziwizi
@aral sooo cute.
I did notice when i rotate my phone the cat is very tiny
Aral Balkan
@liziwizi Elizabet’s characters are adorable :)
And yeah, there are limits to the responsiveness :)
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.