Style Hakyll website to better accommodate smaller screens.

[chungyc]

This updates the HTML and stylesheet for the Hakyll website to better accommodate small screens, i.e., phones and such. I feel like it's time it got the same treatment that the starter site did.

• It leaves styling for bigger screens alone for the most part, except for using a max-width so that the width can be smaller on narrower displays, i.e., phone screens or narrow web browser windows.

• It sets viewport in the HTML so that the styling will be based on the real dimensions of the screen, not the fake dimensions used by phones to display websites specifically tailored to a certain size on desktops.

• On narrow screens, it overrides properties so that the presentation is better for a narrow width.

  • In particular, the navigation sidebar becomes a flatter set of links at the beginning of the page instead of being the vertical set of links it is on wider screens. This let's one reach the main content quicker by not having to skip through more of the navigation links. The font size is slightly smaller and translucent to make it easier to distinguish from the main content.

  • There is actually no img in the sidebar in the default.html template, but there is styling for it in the stylesheet. Not wanting to touch the existing style unless I had to, I set it to not display an image in the sidebar to save space on small screens, in case one is added in the future.

Attached is a screenshot with what the website would look like on my phone.

[LaurentRDC]

This looks great, thank you!

[LaurentRDC]

@jaspervdj is the Hakyll website at jaspervdj.be/hakyll automatically updated?

[chungyc]

For what it is worth, I'm happy as long as the changes eventually get deployed. And I'm not worried about the changes never getting deployed: a previous change I sent in for the website did get deployed eventually.