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

• Minor css changes #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

• Anki screws up formatting using [...] and [...]+ buttons #132 (duplicate Anki cloze field [...] button screws up Pandoc's code #131) (write it manually, don't use the button)
• Cloze field contents aren't easily viewable on reveal #130
• Mark highlighted code? #125
• Desaturate the reverse card so the ★ Key point stands out more? #129

Other things:

• Make code block smaller --font-size when viewed in AnkiMobile? (There's a lot of scrolling involved)
• Add lines to the highlighted code blocks? #121
• Wrap inline code so it doesn't break layout
• Make images and drawings more relevant in cards? #66
  • Scrap img inside code block?
  • It can be useful for speed (take a snapshot and use that)

New functionality?

• An alternative to puzzle? #40 (multiple choice)
  • Style checkboxes
  • To look like
  • Multiple choice

Back to the start ... priority changes

• Testing with rem sizing and cascade (Codepen)
• Make sure that header code is large!¹
  • But not too large! — Card data is taking some styles from Pandoc's default
• 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

• 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² — more rem notes

Before	After
image	image

More examples of --font-size issues:

Footnotes

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