MRG, DOC: Better website style

[larsoner]

• Makes the citation, getting help, and whats new links more visible
• Makes the funding visible on all pages in the footer
• Uses a more standard (nowadays at least it seems?) multi-column format for the footer
• Adds whats_new to the documentation overview page

Todo:

• Higher-res main logo
• Ensure it works on mobile

@agramfort do you think it helps?

[codecov]

Codecov Report

Merging #7532 into master will decrease coverage by 4.60%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #7532      +/-   ##
==========================================
- Coverage   90.20%   85.60%   -4.61%     
==========================================
  Files         452      452              
  Lines       82153    82987     +834     
  Branches    13115    13116       +1     
==========================================
- Hits        74109    71042    -3067     
- Misses       5209     9260    +4051     
+ Partials     2835     2685     -150     

[agramfort]

for discussion https://19018-1301584-gh.circle-artifacts.com/0/dev/index.html

an alternative is to put horizontally the links and put the funding at the very bottom.

I'll let others iterate

[hoechenberger]

I don't like the Whats's New etc links are still in the footer, should be much more visible, i.e. farther up…

[larsoner]

If they aren't in the header or footer then you just want them only on the main page?

[hoechenberger]

I think I'd like to have Whats New in the navbar. And for the rest… can we have Bootstrap dropdown menus? I like the About Us menu the Pandas folks use: https://pandas.pydata.org

[larsoner]

Yes we can have dropdowns but they effectively hide the content. I guess it's a matter of priorities what gets a top-level link and what gets stuffed in a drop-down. You could argue that "Get help" is more important than "Whats New" so I'm not sure why "Whats New" should get a top-level one, for example.

The trend from looking at just scikit-learn and Panda's landing pages does seem to be keeping links toward the top and not the bottom, though. I'll play around with some things and see what could work.

Maybe:

1. Footer no longer has links, just funding sources and contributing institutions
2. Header has the old links somehow, probably all in a drop-down (?)
3. Perhaps put current release information directly on the landing page, with a direct link to whats_new

Thinking about it , it doesn't seem entirely necessary to have whats_new on every page -- having it on the landing page along with release version/date (this very is nice IMO about the Pandas page) and in the documentation overview page seems sufficient. WDYT?

[hoechenberger]

Thinking about it , it doesn't seem entirely necessary to have whats_new on every page -- having it on the landing page along with release version/date (this very is nice IMO about the Pandas page) and in the documentation overview page seems sufficient. WDYT?

Totally agree. Regarding the rest, I will have to think a little. In the comment above I just threw in the first thing that came to my mind… but yeah feel free to experiment a little, happy to give you feedback :)

[cbrnr]

Thinking about it , it doesn't seem entirely necessary to have whats_new on every page -- having it on the landing page along with release version/date (this very is nice IMO about the Pandas page) and in the documentation overview page seems sufficient. WDYT?

I also agree that whats_new doesn't need to be on every page.

[hoechenberger]

• Footer no longer has links, just funding sources and contributing institutions

+5 on this one.

[agramfort]

I like it better https://19029-1301584-gh.circle-artifacts.com/0/dev/index.html
although I will let @drammock pitch in here as he has a good aesthetic taste :)

[hoechenberger]

I like how it looks on my Mac when the browser window is in fullscreen mode:

But already slightly reducing the width of the window makes the "Version 0.21.dev0" and "Direct financial support" boxes jump to an unexpected position (bottom), and the "Version 0.21.dev0" box becomes too narrow:

In fact, I first checked this out on my iPad and thought the CSS was broken, bc it looks like this in both, landscape and portrait mode:

[agramfort]

I would be "useful" to have the cite page visible ...

…

[larsoner]

Sizing fixed and citation added:

[drammock]

Sorry, coming late to this thread. IDK what the original complaint/problem was that this is trying to fix, but:

• I'm fine with the new "More" menu
• I think the funding sources look better now
• I'm 50/50 on duplicating links from the topbar menu in the version sidebar (the only link in the version sidebar that is not a duplicate is the "what's new" link).
• The current state is not OK on mobile: hamburger menu starts offscreen right; logo and text spill offscreen right

[larsoner]

@drammock I did some flex layout changes, feel free to try on mobile again if it's easy

[cbrnr]

Also, any chance we could use a higher-res version of the MNE logo?

[drammock]

still seeing this on mobile:

This is what I see after pinching to zoom out:

[larsoner]

Okay mobile issues should be fixed on this one

[drammock]

much better! One last request: here's what happens on mobile when opening the hamburger menu: version number and search box are hidden. Can we tighten up the vertical spacing on that menu? Or some other solution?

[larsoner]

One last request: here's what happens on mobile when opening the hamburger menu: version number and search box are hidden.

@drammock looks like this happens in master as well, but I tracked down a fix for it. This should work now:

https://19046-1301584-gh.circle-artifacts.com/0/dev/index.html

I think I'm happy enough with the progress here to set to MRG

[drammock]

very nice work @larsoner, thanks for the mobile menu fix too, it's been bugging me.

[hoechenberger]

@larsoner There's still a small glitch regarding the "Version" box width, as can be seen in this video:

https://youtu.be/pOzRQiwe66E

Or is this intended? :)

[larsoner]

The video is private so I can't view it, but I took a guess at the problem after playing around and hope it's fixed

[hoechenberger]

I think it’s all good for me now!

[cbrnr]

Very nice, thanks @larsoner!

[drammock]

only error here is CodeCov, so I'll go ahead and merge this one. Thanks again @larsoner!