Better journal list with hacky link hover effect

Maggie Appleton has built one of my favourite knowledge gardens. I love that each of her notes has a seedling image next to it in various stages of growth to show how developed her ideas are. Here is an example:

I love how simple the note entries are visually.

It inspired me to create something simpler. On the left is what my entry log looked like (here's the entry where I created that), and on the right is what it looks like now.

Webflow is janky on free plan

I'm still feeling a slight sense of horror about what I had to do to get the links to underline on hover. As a front-end developer in a past life, this was upsetting.

First, I removed the default underline on the link element.

Then, I added a transition which adds a border bottom width on the normal (none) state text element. Then I added the hover state class, and added a bottom border the width of 2px in a pink colour. I also removed 2px from the bottom margin to prevent the text moving down on hover too.

Shivers.

This is a work around because I'm on the free plan, where I don't have access to custom CSS or JavaScript.

Otherwise, I could've just done this like a sane person:

.link:hover {
  text-decoration: underline; /* Adds underline when hovered */
}

I don't want to update any of the other pages after doing this right now.

I like that this site is getting 1% better each time.