404boyfriend’s Twitter Archive

🧼 using scroll-margin-top on my anchored headers to make sure it scrolls to the perfect spot where the nav bottom border aligns with the section top border ✨ if this effect were any cleaner I would see my reflection in it

…in reply to @404boyfriend

The header numbers are pure CSS — they use a CSS counter to track how many h2 elements are on the page, so I don't have to include "01" in my actual content. gist.github.com/xdesro/ccba506911221f151c578a0f8f0b5934

OpenGraph image for gist.github.com/xdesro/ccba506911221f151c578a0f8f0b5934

oh my god twitter doesn’t include alt text from images in their API

…in reply to @404boyfriend

If you're thinking this code breaks if I have more than 10 h2s, you are absolutely right, my brain is smaller than most woodland rodents! (There is probably a more sustainable solution using @counter-style; my solution in this case is that I have no blog posts that long lol)

…in reply to @404boyfriend

Okay I was right (as always) — @counter-style has a property called "pad" that does exactly what I need for this use case, where I can guarantee a number is always at least two digits long. codepen.io/xdesro/pen/WNjgZwq

OpenGraph image for codepen.io/xdesro/pen/WNjgZwq

…in reply to @404boyfriend

I also used a CSS property in the previous example called font-variant-numeric. Setting this to tabular-nums with a font that supports this OTF feature makes it so all numbers are of the same size.

…in reply to @404boyfriend

FWIW tabular-nums actually isn't especially useful in this particular implementation, but comes in crazy clutch in cases where you have many different types of numbers in the same lockup — ex. when you need 1000 and 1111 to take up the same width.