tickle/tutorial-styling.md

Styling Tickle

Tickle's CSS is kept very simple on purpose. It matches elements, rather than classes, because that's less clutter.

If you just want to change the color scheme and fonts, you have css variables in the :root selector, which you can use for that.

If you want to add more styles, or edit styles, be aware that:

1. Modalities of the page are handled through toggling classes on the body element. Those modalities are:
   1. is-loading: for when the loading overlay is shown
   2. menu-is-open: for when the menu and overlay are open
   3. is-source-enabled: for when the markdown source is shown
2. The navigation burger button becomes the open menu overlay. That saves an element and is neat, but it means that if you have transitions on your button, you'll get strange flashes as the button stretches and cover the entire page.