tailscale / tmemes

A meme generator for your tailnet!
BSD 3-Clause "New" or "Revised" License
42 stars 1 forks source link

tmemes/static: attempt at a row-major masonry layout using css only #2

Closed saljmz closed 1 year ago

saljmz commented 1 year ago

This uses some hacks I learned from: https://tobiasahlin.com/blog/masonry-with-css/

I have no idea if this is Good CSS or Bad CSS. If it's salvageable I'd love to be shown how!

It was fun poking at it, but it feels a little hacky, since we have to define the height of the meme-list container. I added a max-height for cards and worked out an upper bound for the container height based on that, but I'm not really sure what I'm doing.

It's also limited to 3 columns. Apparently we can do more, but that relies on inserting tags in the html, which seems a step too far to me.

https://user-images.githubusercontent.com/115096094/230152462-d47632f3-de51-4520-bfcd-4c5f4204049d.mov

creachadair commented 1 year ago

Apologies for the merge conflicts, I think we crossed paths when I swapped to four columns a few commits ago.

saljmz commented 1 year ago

no worries, i noticed that. it's easy to resolve. :)

creachadair commented 1 year ago

LGTM modulo the merge conflicts.

saljam commented 1 year ago

conflict settled.