Saturday nights are usually busy. But on rare occasions when there are no plans and my wife and son go to sleep early, there is a strange window of quietness in my life.
Last weekend I had one of those special moments, and of course, since I am a big nerd I spent it coding.
The idea is to display an
"unread" label to represent links that haven’t been read yet, plus I wanted to add a
"new" tag to the newest post and for extra css fun change the text for
If you really want to learn this technique, stop reading now, go to Unas posts, enjoy her article and come back. If you are like Bruno and you are here just for the joy of reading my words, then continue reading.
It all starts with Unas code. Since for security reasons
:visited is limited to just changing the color, she wisely changes the color of the font to match the background, making it disappear. Pretty nifty.
On my Jekyll
HTML I make sure the
<a> is around the
:visited is where the magic happens
Then on the
sass I apply a content for the label after the
h2 title, and to make it disappear I set the same colors as the background color on
CSS fun with :hover and :active
I’ve also added different messages for
The new kind on the block
And since the first
h2 on the list is the newest post, I tagged it as “new”.
You can check the complete code here.
Now go and check the homepage to see the result!
One more thing…
On related news, I’ve also added comments to the blog. Not because I expect to get any comment.
Now I have a blog.