This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
Post
Adam Argyle
nerdy.dev
did:plc:jnj7wcwuvspxdsipmecmx7rs
Wildest #CSS media query I've written in a while
`@container (inline-size >= calc(100cqi - 120px))`
yep, `calc()` in a MQ!
WHY?
to re-anchor buttons to be "inside" when space is tight
Video:
purple outline's are containers, buttons adapt to containers or the page
https://nerdy.dev/carousel-adaptive-anchor-positioning-with-calc-in-a-container-query
2024-12-19T18:21:09.250Z