Fix heading anchor links

[cdeil]

I have put id attributes on all the h2 elements. This allows linking to a given h2 heading, like this:

• http://gammapy.org/team.html#project-manager
• http://gammapy.org/team.html#lead-developer

I think this is very useful, it allows to link to some specific info from an email or another webpage.

However, there are two problems:

1. people won't find those links, we need to to show a symbol one can click next to the heading
2. the current links don't position the page correctly vertically

This functionality doesn't seem to be built-in on Bootstrap 4!?
Maybe https://www.bryanbraun.com/anchorjs/ or http://bootstrap-anchor.com/ should be used?
@adl1995 or anyone - do you have a recommendation?

$ ack h2 *.html
about.html
70:        <h2 id="project">What is Gammapy?</h2>
91:        <h2 id="acknowledge"> Acknowledging Gammapy </h2>
114:        <h2 id="publications">Publications</h2>

cta.html
69:        <h2 id="introduction">Introduction</h2>
81:        <h2 id="getting-started">Getting started</h2>
98:        <h2 id="resources">Resources</h2>

news.html
77:        <h2 id="next">Up next</h2>
102:        <h2 id="recently">Recently</h2>
122:        <h2 id="old">Old news</h2>

team.html
70:        <h2 id="introduction">Introduction</h2>
92:        <h2 id="overview">Overview</h2>
104:        <h2 id="coordination-committee">Coordination Committee</h2>
158:        <h2 id="project-manager">Project manager</h2>
201:        <h2 id="lead-developer">Lead developer</h2>
255:        <h2 id="core-developers">Core developers</h2>
265:        <h2 id="contributors">Contributors</h2>

[adl1995]

@cdeil Sorry for the late response.

I see you have added an Overview section that points to all the anchor links. This is good, also you could additionally modify the <h2> tag and make it clickable. This would be helpful if the user did not reach a section using the link in Overview section, and wants to share it with someone else.

So, for example, you would change this:

<h2 id="core-developers">Core developers</h2>

to:

<h2 id="core-developers"><a href="#core-developers">Core developers</a></h2>

Regarding the links positioning, this is being caused by the navbar. By default anchor links point to the very beginning of the page. One easy fix is to add some CSS which uses a pseudo element, and pushes up the size of the header (source):

<style type="text/css" media="screen">
    h2[id]::before {
        display: block; 
        content: " "; 
        margin-top: -125px; 
        height: 125px; 
    }
</style>

[bkhelifi]

Fixed