Mobile optimisations

[Anagastes]

Hi!

I've been through a few hugo themes now and keep coming back to yours. It's just fucking simple and yet rich in features. I don't know how you do it, but keep it up.

I've now noticed that the theme could do with a few optimisations for mobile phones.

1. longer titles are broken unfavourably. I got round this with a custom CSS. But I think that would be nice in general. I simply minimised the size. But maybe you can solve this more elegantly with better wrapping or syllable recognition from the CSS.

Below is my CSS code (usable for all default themes).

@import "theme-zen-dark.css";

@media only screen and (max-width: 47.999rem) {
  #R-body-inner > .flex-block-wrapper article.narrow h1 {
    font-size: 2.0rem;
  }
}

2. the ToC menu is not designed for fingers. Here is an example how the menu breaks the complete layout. Also there is no ‘X’ to close on the mobile phone. This makes it a bit unfavourable for users. :)

Unfortunately I am not web-dev enough to do this myself.

[McShelby]

Hi. Thanks for the kind words. I am happy the theme is of some value to you!

1. I think, both proposals are reasonable. I'll fix this in the next release. The font-size will not be configurable and slightly bigger (2.5rem) than your chosen value. See theme: optimize display of main heading on mobile #1100

2. I am aware that the TOC is hard to use on mobile. This will be addressed once I start work on various other TOC topics. Due to time constraints this isn't scheduled, yet.

   You can close the TOC by clicking anywhere outside the TOC. This works well enough without introducing a X button.