Trump Anki app's body styles

It's a bit icky to have to do this, and it could always be moved to the specific location it's needed (notes etc) ... but put it in `_root.less` for now.

- Move @font-face outside `:root`
- Create a `partials/_root.less` file

This is the same setup as print-first-css now. Copy everything from `:root` to use `body` to override Anki defaults.

Closes #117

build/style/main.css

@@ -981,6 +981,13 @@ code.sourceCode > span > a:first-child::before {
   --font-family-header: var(--dejavu), var(--system-ui);
   --font-family-mono: var(--dejavu-mono), var(--system-mono), var(--fallback-mono);
 }
+body {
+  color: var(--font-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: transparent;
+}
 @font-face {
   font-family: "DejaVu Sans";
   src: url("_DejaVuSans.ttf");

source/style/config.less

@@ -16,6 +16,7 @@
 // Partials ====================================================================
 // Extends `print-first-css`
 
+@import "partials/_root.less";
 @import "partials/code";
 @import "partials/headings";
 @import "partials/skylighting";

source/style/modules/variables/typography.less

@@ -2,42 +2,24 @@
 // There are some annoying "bugs" when trying to specify San Francisco
 // fonts, also take care when naming them: See issue #12
 //
-// #1: @font-face should live outside of :root, but for now,
-//     the less compiler does that for us ... see issue #12
-// 
+// #1: DejaVu and Verdana (small) font stack
+//
 //     Inherited from print-first-css:
+//
 //     - `--system-ui`, `--system-mono`, `--fallback-mono`
-//     - Add your custom font variable and @font-face
-//     - https://www.hacksoft.io/blog/using-multiple-font-files-the-right-way
 //
-// #2: DejaVu and Verdana (small) font stack
 //
 //     ⟳ Switch to Verdana as our base font! (works better with DejaVu)
-//       than system-ui but — Verdana is a wee bit too big for my liking,
-//       reduce size for Anki Cards (but not global): see issue #12
+//       Verdana is a wee bit too big for my liking, so try to
+//       reduce size for Anki Cards (but not globally): see issue #12
 //
 //     ⇾ Also change the variables in `../../partials/..`
 //     ⟳ Override print-first-css files
 
-// #1
-@font-face {
-  font-family: "DejaVu Sans";
-  src: url("_DejaVuSans.ttf");
-  font-style: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "DejaVu Sans Mono";
-  src: url("_DejaVuSansMono.ttf");
-  font-style: normal;
-  font-weight: 400;
-}
-
 --dejavu: "DejaVu Sans";
 --dejavu-mono: "DejaVu Sans Mono";
 
-// #2
+// #1
 --font-family: 'Verdana', var(--system-ui);
 --font-family-header: var(--dejavu), var(--system-ui);
 --font-family-mono: var(--dejavu-mono), var(--system-mono), var(--fallback-mono);

source/style/partials/_root.less

@@ -0,0 +1,33 @@
+// Notes ==================================================================
+// #1: Anki (app) sets default `body` styles and `:root` doesn't override this.
+//     Might have to override all the styles in print-first-css `:root`?
+//     @ https://github.com/badlydrawnrob/anki/issues/117
+//
+// #2: @font-face should live outside of `:root` I found out. See issue #12
+//
+//     - Add your custom `--font-variable` and `@font-face`
+//     - https://www.hacksoft.io/blog/using-multiple-font-files-the-right-way
+
+// #1 !#
+body {
+  color: var(--font-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: transparent;
+}
+
+// #2
+@font-face {
+  font-family: "DejaVu Sans";
+  src: url("_DejaVuSans.ttf");
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  src: url("_DejaVuSansMono.ttf");
+  font-style: normal;
+  font-weight: 400;
+}