Fix #27. Make the hamburger menu visible. Make the click area wider.

[glebkema]

Hello!

At the moment, the collapse button is not visible, because both the border and the strips of the hamburger are transparent. To show the button, I repainted the hamburger in the color {{ site.colors.link }}. On hover I repaint them in {{ site.colors.link_hover }}.

The transition property is also set as for links. Additional prefixes are verified using https://autoprefixer.github.io/

To make the button different from Bootstrap, I did not show the border around it, but instead slightly pushed the strips of the hamburger apart.

To make the button easier to click, I increased the paddings by the width of the margins and the border, and removed the margins and the border themselves. Outwardly, nothing has changed, but the click area has become wider.

Before:...... After:

I would be glad if my code is useful.

[ananyo2012]

@bhansa Can you have a look ?

[bhansa]

Hi @glebkema @ananyo2012, sorry for the late reply. This looks good, few comments added from my side.

• Try to use CSS variables instead of getting color values from {{ site.colors.link }} etc.

• Also, lets push the whole navigation menu little bit to the bottom so that it does not overlap with the logo in mobile devices.

• Remove the border top for navigation menu.

[bhansa]

I think we are good to merge above commits for the moment. All the other issues we will address once we start to work on #42

@glebkema Thanks for your contribution, I encourage you to contribute to the current PyConf website which HydPy is maintaining for its next big event.

PyConf Repo: https://github.com/HydPy/hydpyconf2019 Looking forward to your contribution :)

[bhansa]

@ananyo2012 please merge this.

[glebkema]

PyConf Repo: https://github.com/HydPy/hydpyconf2019 Looking forward to your contribution :)

@bhansa Thanks for the invitation! Next week I will look at this project and think about how I can help.