100 days of code

- tracking progress

23 Jun 2017

Day 5: Discovered css property 'text-decoration-skip: ink'

What I’ve done today

Adding a profile pic to my diary
Adding Structured Data to diary (author)
Refined styling
Added the current day to the link description generated for twitter and facebook
Use flexbox to align icons and text on post list

I learned about a css property to make underlined links look more nice:

a:hover {
  text-decoration: underline;
  text-decoration-skip: ink;
}

The result can be seen if you hover over links on this page: The underline does not cross through the descender of letters anymore. Learn more about text-decoration-skip

It can already be used because it degrades gracefully.

See the Pen text-decoration-skip by Nicolas Hoizey (@nhoizey) on CodePen.

Use flexbox to align icon and text

I used the technique described in this codepen for the icon+text in the post list. This makes them align correctly also on mobile

See the Pen Flex-Box dynamic width, auto-width by Andre (@ingomc) on CodePen.

What I’m planning to do next

Finally work on the portfolio

Learnings today: