CSS clamp() function

CSS has a clamp function that takes a min value, “preferred” value and a max value.

If the preferred value is between min and max, then the preferred value is returned, otherwise the output is clamped based on min and max.

I used this recently on the astro rewrite of this blog while setting margin for my “See all posts” CTA so that it’s dependent on viewport size such that it never goes out of the viewport and smoothly goes inside the viewport as we resize.

margin-right: clamp(-25.5px,calc((900px - 100vw) / 2 - 10px),0px);

Ref: clamp() - CSS | MDN

💡
"If this story can really save you... If you regained just a little of your memories and remember us just one more time... Then I’ll keep writing the epilogue for you until the end of time, for eternity"

— Han Sooyoung (Omniscient Reader's Viewpoint)