fix: progress bar blocking content links

forestryio / hugo-theme-novela

Novela, the simplest way to start publishing with Hugo and Forestry.

https://hugo-novela-forestry.netlify.app/

MIT License

360 stars 192 forks source link

fix: progress bar blocking content links #17

Closed ngracilla closed 4 years ago

ngracilla commented 4 years ago

Confirmed #15; the progress bar overlaps the content, making links unclickable.

z-index futzing disappears the progress bar in my attempts. Here's one solution: limiting the width of the progress bar.

My fix works and is ugly and should be done some other way, I imagine.

DirtyF commented 4 years ago

After a brief look on the original theme on https://novela.narative.co/Understanding-the-Gatsby-lifecycle-with-Narative, looks like the width is defined to 1px....amongst other things. Will have to check the styles.

ngracilla commented 4 years ago

That mirrors my thinking. My front end dev has another option: she suggests setting the z-index on the article higher in post/single and ignoring the width.

<article id="articleContent" class="post-content" style="position:relative; z-index:99;>

DirtyF commented 4 years ago

What's your take on this @mountainbug95?

DirtyF commented 4 years ago

@nicfits adding position: relative to .post-content seems to solve the issue, no need to change the z-index on Safari 🤷‍♂

As long as we fix the issue I'm not strongly opiniated, this feels more clean, doesn't look to break anything else in the article.

ngracilla commented 4 years ago

Agreed, seems less arbitrary.

DirtyF commented 4 years ago

Thanks @nicfits for the fix ❤️

ngracilla commented 4 years ago

h/t @monica-2020 for help.