pytroll / pytroll.github.io

http://pytroll.github.io/
18 stars 10 forks source link

Add navigation bar #16

Open djhoese opened 4 years ago

djhoese commented 4 years ago

I think this page was originally designed as a single page of pytroll related information. However, we've now grown the site to include other pages (logos, workshops, etc). These pages are sometimes hard to find because there is no navigation bar on the side or top of the page to these other pages; only links at the bottom.

I propose we find a new theme or update the existing one to include a navigation bar somewhere. Might give us a chance to remove some of the extra text at the top of the page that I think we didn't want (View on GitHub, the double Pytroll page title, etc).

gerritholl commented 5 months ago

There already seems to be a bar at the top that says Pytroll | Software | Community | Gallery | Code of Conduct, but for navigation it would be more user-friendly if it were static, so it did not scroll with the rest of the page.

djhoese commented 5 months ago

I think after this issue was created I switched to a new Jekyll theme. So Jekyll being the static site generation tool/software and we're using a "minima" based theme, specifically the "dark" skin (from what I see in _config.yml). Finding a way to make the navigation static and stay at the top of the window would require:

  1. Finding an existing recipe compatible with the minima theme.
  2. Custom javascript or whatever else is required to make that work.
djhoese commented 5 months ago

Ok I played around and turns out changing the CSS for .site-header with position: fixed, width: 100%, and background-color: #181818 gets you like 95% of the way there. The last thing is that the top of the page needs to be offset by the size of the header/navigation bar as right now the Pytroll logo image (the top of the page) shows up underneath the navigation bar.

I don't have any more time to play with this, but if someone is bored go for it.

djhoese commented 5 months ago

I lied. Changing .page-content CSS padding to padding: 100px 0 gives it enough space that it just works.

image