[permalink issues] 5.3

[r-spell]

Permalink

https://education.launchcode.org/intro-to-professional-web-dev/chapters/booleans-and-conditionals/logical-operators.html

Issue

For some reason I am having trouble clicking on the permalinks for the whole of 5.3 page, even though I didn't have this issue on other pages. I tried reloading the page and looking at the inspector but when I hover on the header it will show the ¶ but when I try to click on the ¶ it goes away! 😦

[welzie]

@r-spell I also have this problem. Thanks for documenting your troubles. We will look into this now that it's happening for more people.

[CarlyLanglois]

im looking into this now - its not an issue on chrome

[CarlyLanglois]

two patterns that make this happen in FF -

1 - an index tag is used below a header of any size. the problem is resolved if you move the tag to above the header

2 - two headers of any size are less than two rst paragraphs apart, then the top headerlink wont appear on hover.

we think it's the padding added to the top of each section to accommodate the breadcrumb bar but don't have a good fix for it right now.
@gildedgardenia is going to test making the symbol visible all the time (ie, discard the hover rule) but with a different symbol, like a FA link, since we don't care for the ¶ being visible all the time.

Also, we think students likely won't be using the permalinks as often as us, but we'll wait and see...

[brianjenkins94]

Issue is specific to Firefox.

Appears to be fixed by changing:

/* bootstrap-sphinx.css:96 */
a.headerlink {
    margin-left: 0.25em;
}

to:

a.headerlink {
    padding-left: 0.25em;
}

@CarlyLanglois mentioned that there might be more specific criteria under which the bug reproduces.

I'm not seeing any relationship between number of paragraphs beneath the header or the level of the header that reproduces the issue with the proposed fix.