Hacker News Reader

Comment by kiwidrew | Hacker News Reader

While I can't imagine why anyone would want/need to do this... it does do a great job at demonstrating the flexibility of modern CSS! The most clever bit (to me) is the underline characters on the <h1> element.

View on HN

The underline on the <h1> just uses the :after psuedo class with some absolute positioning and some padding. Just like almost every other class here. I'm curious what sticks out to you as extra clever with the <h1> vs the other elements that also use :before / :after

The tricky part is rendering the correct number of equals signs. Markdown.css fakes it by rendering a constant large number of equals signs, then setting the width so that only some are visible.

It seems to work by printing lots of `=` beneath, and then hiding the overflow. Inspecting and changing the title's width reveals more `=` and makes it possible to display half of one.

For one thing I could publish plain markdown as a nerdy blog page and not worry about them 60-character lines break on mobile. I like the look of well formed plain text but it never works elsewhere other than big screens.

Thx! If I recall, I think the blockquotes were the trickiest one in writing this. I used the same repeated element trick and overflow hidden, but getting the line breaks in there was the final missing piece: https://github.com/mrcoles/markdown-css/blob/master/markdown...

Also, your first sentence is asking the wrong question ;P

Reply on news.ycombinator.com