Basically you just need to (1) reset the margin and padding of everything to zero (2) set an explicit line height and font size for everything to the same value (3) style buttons like text (4) use multiples of ch for horizontal margins and lh for vertical margins (5) use the round function to make sure the width of your body is a multiple of ch. I think thatās the majority of what I did. And use flexbox to right align things
Itās still a work in progress because I still havenāt fixed the margin/padding of all elements that could show up in the body of the post
reply
The paws emoji proved to be tricky because it simply ignores the width of ch and doesnāt try to conform so in the end I just gave it the space of 2 ch and let it centre itself in there. I think it worked out pretty good. The end result is that the ārigbyā stays aligned with the other text on the page. But this means that if you put an emoji in your post title it will break the grid. Iām not sure thereās any way in CSS to actually force that all chars to only take up 1chā¦
reply
Please give us some horizontal margin Iām begging š„ŗ šš». All of the letters are about to fall off the left side of my phone screen.
Huh on my computer I can see that there is left padding on the body element and a couple of other things look different. I wonder if my phone is caching an old version of the stylesheet or something.
Hmm yeah I think that might be it, I donāt think I have any cache busting mechanism for the style sheet, but then I also changed the HTML around a bit.
reply
add comment