Add project's name in the content on small screens

[milmazz]

Closes #435

[josevalim]

Let's wait @dignifiedquire to sign this one off. :)

[dignifiedquire]

You forgot to run the minified build

[dignifiedquire]

Just need to rebuild with minified then all good 👍

[milmazz]

@josevalim @dignifiedquire Done!

[eksperimental]

How abouy including the version number?

[milmazz]

@eksperimental I wanted to keep it simple, if the user wants to know the version they can perfectly view it in the menu. Right?

[eksperimental]

The user landing from the elixir website or anywhere else will only see the project name and may not that he can find the version.

[milmazz]

Done!

[dignifiedquire]

👍

[eksperimental]

I am wondering what is the best way to tackle this.

Semantically speaking, the project name is part of the title (h1).
I am wondering if that's ok, and if it makes sense to put a small inside a h1 (I'm just wondering, I just don't have a taken position on this).

Aesthetically speaking, I am thinking is that the project name should be at least in bold.
I have played with making the version number 80% of the project name.
here's a screenshot.

here's is another version with the project name with the same size as h1. and line-height smaller.

I think in the mobile version give to project name the same relevance as the title of the page is the right way to go.

what do you guys think about this?

[eksperimental]

this the edited HTML code for the last screenshot.

<h1 style="line-height: 1.2em; ">
  <small class="visible-xs" style="font-weight: 800; font-size: 1em; ">Mix <small style="font-weight: 800; ">v1.2.0-dev</small></small>
  API Reference
</h1>

which makes me wonder if it makes any sense to still use small at all.