Skip to content

DOC: adding main nav to site #15489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 25, 2019
Merged

DOC: adding main nav to site #15489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
44ad305
DOC: adding main nav to site
dorafc Oct 23, 2019
c6e7b08
added hover links, larger font size, Carlito to font stack
dorafc Oct 24, 2019
bfae260
re-added home link to bread crumb
dorafc Oct 24, 2019
396207d
updated nav order
dorafc Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions doc/_static/mpl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1118,3 +1118,34 @@ div.viewcode-block:target {
.sidebar-announcement p {
margin: 0.4em 0.4em 0.6em 0.4em;
}

/* new main nav */
nav.main-nav{
background-color: #002b47;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Background color should be same as h1 color? #11557C

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that the color is somewhat darker than the logo and headings. It gives some additional separation. With the same color, logo nav and headings would blend too much into each other.
Might be a tiny bit lighter though (in between current and the headings color).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its already light on dark, so I bet that would stand out more than adequately. I think limiting your color palette and fonts is something most web design tips will suggest...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did try making the nav the same color as the logo, and it made the page look very flat. Tim is correct that the darker nav creates visual separation between the elements. I don't recommend making the logo and the nav the same color.

Limiting a designs color palette is usually a good plan. However, the site color scheme currently only has two colors (logo blue and orange) and, unfortunately, it's pretty much impossible to build a meaningful site hierarchy with only two colors.

Many websites have formal guidelines about how to apply color (see https://material.io/design/color/ for Google, https://primer.style/css/utilities/colors for Github). It might be nice to re-think the site color palette using the colors in Viridis in the future, but this would be a much larger and more complex project.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These things are purely aesthetic, so whatever folks decide works is fine. Here is what I was suggesting (plus or minus) for comparison:

Front

font-family: Calibri, 'Carlito', 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
}

nav.main-nav ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}

nav.main-nav li{
margin: 8px 15px;
list-style-type: none;
}

nav.main-nav a{
color: rgba(256, 256, 256, .8);
transform: color .2s ease-in-out;
}

nav.main-nav a:hover{
color: white;
text-decoration: underline;
}
13 changes: 10 additions & 3 deletions doc/_templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@

{%- block rootrellink %}
<li><a href="{{ pathto('index') }}">home</a>|&nbsp;</li>
<li><a href="{{ pathto('gallery/index') }}">examples</a>|&nbsp;</li>
<li><a href="{{ pathto('tutorials/index') }}">tutorials</a>|&nbsp;</li>
<li><a href="{{ pathto('api/index') }}">API</a>|&nbsp;</li>
<li><a href="{{ pathto('contents') }}">contents</a> &raquo;</li>
{%- endblock %}

Expand Down Expand Up @@ -45,6 +42,16 @@
<!-- The "Fork me on github" ribbon -->
<div id="forkongithub"><a href="https://github.com/matplotlib/matplotlib">Fork me on GitHub</a></div>
</div>

<nav class="main-nav">
<ul>
<li><a href="{{ pathto('users/installing') }}">Installation</a></li>
<li><a href="{{ pathto('contents') }}">Documentation</a></li>
<li><a href="{{ pathto('gallery/index') }}">Examples</a></li>
<li><a href="{{ pathto('tutorials/index') }}">Tutorials</a></li>
<li><a href="{{ pathto('devel/index') }}">Contributing</a></li>
</ul>
</nav>
{%- endblock %}

{%- block sidebar1 %}{{ sidebar() }}{% endblock %}
Expand Down