Feature/variable header height

[hoetmaaiers]

I tried adding a variable to define the header height. This will solve this issue: #258.

In theme.css a new variable is available: --header-height which for the Pandas theme is 60px.

[hoetmaaiers]

I already noticed that the anchor margin on the top is added on activation. I should look into this.

UPDATE:
This behaviour is also present without this PR. The variable height makes it more noticeable I think. On the latest build the 'white space' on top of a target is extend on click, e.g. https://548-130237506-gh.circle-artifacts.com/0/html/demo/markdown.html#second-top-level

I think we should revert the :target selector ?

[hoetmaaiers]

Any feedback on this @jorisvandenbossche or @choldgraf ?

[hoetmaaiers]

The silence here is getting somewhat uncomfortable. Is even

Everything okay with @jorisvandenbossche ? Are you aware of something @choldgraf ?

[jorisvandenbossche]

Yes, everything allright! (except for the usual "too many github notifications" .. ). Sorry about the silence, taking a look now.

[jorisvandenbossche]

I already noticed that the anchor margin on the top is added on activation. I should look into this.

It seems this is because the variable substitution in margin: -(var(--header-height)) 0 0; is not working correctly? This seems to produce invalid css, and if I replace the -(var(--header-height)) with a hardcoded -60px in firefox dev tools, it seems to look better.

[jorisvandenbossche]

Something like calc(var(--header-height) * -1) might do the trick

[jorisvandenbossche]

Looks good to me, and based on a quick experimentation with the preview, it all looks good (except for the one issue being discussed). Thanks!

[hoetmaaiers]

I think indeed @jorisvandenbossche your suggestion solved the issue.

[jorisvandenbossche]

OK, this should be good to go then. Also checked locally that setting the CSS variable to a higher value works nicely.

Thanks @hoetmaaiers !

[hoetmaaiers]

Hooray

[jorisvandenbossche]

@hoetmaaiers I noticed one bug that seems to be caused by this (at least from quickly checking the preview docs from readthedocs, it seems to have started here), which is that the mobile dropdown doesn't work anymore -> #304, in case you have a quick thought about what the issue could be

[jorisvandenbossche]

I suppose it's caused by this hidden overflow. @hoetmaaiers do you remember why this was added?

[hoetmaaiers]

I can't directly remember why this was added. But the mobile dropdown is blamed by it? Is an other issue already registered for this?

[jorisvandenbossche]

Yes, see #304 for the issue, and #313 for a potential fix.

Also other dropdowns in the navbar (in non-mobile mode) are not working because of this.