* fix(theme/index): Use nav element for Table of Content
* fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul
Chapters and sections are ordered, so we should use the appropriate HTML tag.
* fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers
Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS.
* fix(theme/index): Remove tabIndex="-1" from .page
Divs are not focusable by default
* fix(theme): Make sidebar accessible
Using aria-hidden (together with tabIndex) takes the links out of the tab order.
http://heydonworks.com/practical_aria_examples/#progressive-collapsibles
* fix(theme/index): Wrap content inside main tag
The main tag helps users skip additional content on the page.
* fix(theme/book): Don't focus .page on page load
The main content is identified by the main tag, not by auto-focusing it on page load.
* fix(theme/index): Make page controls accessible
* fix: Make theme selector accessible
- Use ul and li (since it is a list)
- Add aria-expanded and aria-haspopup to the toggle button
- Use button instead of div (buttons are accessible by default)
- Handle Esc key (close popup)
- Adjust CSS to keep same visual style
* fix(theme/stylus/sidebar): Make link clickable area wider
Links now expand to fill the entire row.
* fix(theme): Wrap header buttons and improve animation performance
Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect.
* fix(theme/stylus/theme-popup): Theme button inherits color
Bug introduced while making the popup accessible
* fix(theme/book): Handle edge case when toggling sidebar
Bug introduced when switching from animating left to using transform.
* This is a built-in function of iOS Safari that didn't work because the
page content was inside absolutely-positioned, scrollable divs.
* The fix is to stop using absolute positioning on `.page-wrapper` and
`.page`, so that the content uses static positioning and flows
naturally down the page.
* Consequently, `.sidebar` and `.nav-chapter` now have to use `position:
fixed` in order to be positioned relative to the viewport.
* This fix also enables Safari's built-in behavior of automatically
hiding the top and bottom toolbars when scrolling down the page.
List of system fonts (R, I, B means roman, italic and bold. Ubuntu probably comes with more fonts, but I couldn't find a list to confirm.):
```txt
Windows
----------
Consolas R RI B BI
Courier R
Courier New R RI B BI
Lucida Console R
Mac
----------
Andale Mono R
Courier R RI B BI
Courier New R RI B BI
Menlo R RI B BI
Monaco R
Ubuntu
----------
Ubuntu Mono R RI B BI
DejaVu Sans Mono R RI B BI
```
```css
font-family: Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
```
Consolas and Ubuntu are professionally designed fonts ([Lucas de Groot][1] and [Dalton Maag][2]), with true, calligraphic italic, so they go at the top of the stack.
Menlo is [based on DejaVu Sans Mono][3], the only difference being a few tweaked glyphs, so DejaVu serves as a fallback for it.
As for Courier New, other than being unreadably spindly, it's the default monospaced font in all browsers, so there's no need to include it in the stack.
The `monospace, monospace;` declaration is, by now, [a standard hack][4] that overrides some browsers' behaviour of defaulting the `monospace` elements to smaller font size. Without it, any relative font size you apply to them will be calculated from that reduced size (seems to be 13 px in all browsers).
[1]: https://en.wikipedia.org/wiki/Luc(as)_de_Groot
[2]: https://en.wikipedia.org/wiki/Dalton_Maag
[3]: http://www.leancrew.com/all-this/2009/10/the-compleat-menlovera-sans-comparison/
[4]: https://stackoverflow.com/questions/38781089/font-family-monospace-monospace
The div is now inserted after the <i>, the text color has also been changed to the foreground color and the "(default)" text that indicates the default theme is now grey to contrast with the theme name
Fixes#97
Added basic formatting for tables so that they have some padding and are aligned in the center of the page.
I did not add color or borders because I am not sure how tables should look like.
A lot of people in IntermezzOS want asides, blockquotes are probably the easiest way to do that. I have thus styled blockquotes for all the color themes.
- Just uses the header's text as its anchor name. Spaces work. Scrolling to the anchor works even when the anchor is added after the dom loads.
- Adjust theme css to only style links, not <a> tags used as anchors.