Fix some minor css issues

[badlydrawnrob]

Add useful CSS to this gist

Some minor changes with font-size and possibly additional styles for Markdown checkboxes. I'm using some edits of the original Print First CSS due to Verdana font being a bit too big at default --font-size.

Note: make sure rem is behaving properly (i.e. not inflating the font size with child elements)

Start here ...

Some very old CSS changes

• [x] #23

code blocks

Some way to quickly spot a piece of code we're talking about (like the cloze deletion css) It shouldn't be difficult to add (searching for a specific line of code once compiled is too slow)

Some rough tests here

• [x] #132 (duplicate #131) (write it manually, don't use the button)
• [x] #130
• [x] #125
• [x] #129

Other things:

• [x] Make code block smaller --font-size when viewed in AnkiMobile? (There's a lot of scrolling involved)
• [ ] #121
• [x] Wrap inline code so it doesn't break layout
• [ ] #66
  • [ ] Scrap img inside code block?
  • [ ] It can be useful for speed (take a snapshot and use that)

New functionality?

• [ ] #40 (multiple choice)
  • [ ] Style checkboxes
  • [x] To look like
  • [ ] Multiple choice

Back to the start ... priority changes

• [x] Testing with rem sizing and cascade (Codepen)
• [x] Make sure that header code is large![^1]
  • [x] But not too large! — Card data is taking some styles from Pandoc's default
• [x] The Notes section (some edits)
  • Just make the notes section left-aligned? (looks neater)
  • Add some styling to inline <code> such as this

Some not-so-essential changes

• [x] We have <i> and <b> but there's also <mark>

Some rem tests

rem only calculates from the default font-size which is set in :root (the --font-size variables are set in print-first-css (or override in anki themes) @ style/modules/variables/typography.less. Tested in Codepen[^2] — more rem notes

Before	After
image	image

More examples of --font-size issues:

[^1]: The code is currently doing some (slightly odd) font reduction as Verdana was too big at the root font-size. [^2]: There is the question whether :root is the correct element to set the base font-size, perhaps html element is more appropriate, but fuck it, it seems to work fine. According to this root is practically the same as html

[badlydrawnrob]

[badlydrawnrob]

[badlydrawnrob]

[badlydrawnrob]

[badlydrawnrob]

Inline code isn't standout enough!

[badlydrawnrob]

Most of these are fixed now