Make HTML version of book mobile device friendly.

[g-kouv]

The HTML version of the book here: https://llsoftsec.github.io/llsoftsecbook/ should be made easier to read on mobile devices.

[JLouisKaplan-Arm]

I haven't much CSS knowledge, but something like this might be handy as a (very) temporary stop-gap? https://github.com/JLouisKaplan-Arm/llsoftsecbook/blob/gh-pages/responsive_small.css

the effects of which can be seen (with width less than 768px) at: https://jlouiskaplan-arm.github.io/llsoftsecbook/

The text justification needs a little further tweaking.

[kbeyls]

I like it :) When I tried it on my mobile phone, the look-and-feel was as I expected, i.e. making the book readable.

@g-kouv , I wonder what you think?

[JLouisKaplan-Arm]

small update: returned headings to being left aligned, and only justified <p> elements, which looks a little neater to my eyes (no big gaps in words of headings).

[kbeyls]

I've been looking for examples in the past few days of style sheets used in other online books written using pandoc. I only found 2 categories:

1. https://jez.io/tufte-pandoc-css/ (source code at https://github.com/jez/tufte-pandoc-css)
2. The books written using bookdown, see examples at https://bookdown.org/.

Both categories seem to have style sheets that are "responsive", i.e. adapt well to different screen sizes, such as mobile or desktop.

For tufte-pandoc-css, I particularly like:

• Footnotes appear as side notes in the html rendering.

• The example at https://jez.io/tufte-pandoc-css/ doesn't show it, but it is possible to have the table of contents as side notes.

• I just personally like the overall look-and-feel.

• A disadvantage is that it seems that the license the CSS file is under may be incompatible with the CC-BY license used for llsoftsecbook.

For the examples at https://bookdown.org/, I liked:

• It makes use of bootstrap, which should make it easier to adapt/tweak it further.

I like the overall look-and-feel less though - it seems there are more buttons etc - making the books feel more like a website than a "book". Of course, this is very subjective.

Overall, I think that maybe the best thing to do is to just bite the bullet and start writing our own CSS.

[g-kouv]

I prefer some of the bookdown examples, for example https://bookdown.org/yihui/bookdown/.

I like not having all the content in a single page, and being able to expand/collapse the table of contents, as well as having it clearly separated from the book content (slightly grey, with a clear line between the text and toc), which not all examples follow. I would agree that this style looks less like a book, but, as far as online books are concerned, I find it helpful for navigating the book and keeping track of progress, a single page book doesn't work for me. The style also feels familiar to me, possibly because I've encountered many books or tutorials using https://rust-lang.github.io/mdBook/, which is very similar.

[kbeyls]

I think we can close this issue now. The HTML version of the book is now as good (or as bad) as the large-screen version. We can drive further improvements to the HTML output (both for mobile and large-screen versions) through #130