refactor(fonts)!: add `font-code` to let managing code fonts more flexible

src/scss/markdown.scss

@@ -10,7 +10,7 @@
   .highlight {
     margin: .5rem 0;
     font-size: 1.05rem;
-    font-family: var(--xm-font-mono) !important;
+    font-family: var(--xm-font-code) !important;
     line-height: 1.4;
     &.shiki-light {
       background: var(--xm-c-shiki-light) !important;

src/scss/partials/code.scss

@@ -2,7 +2,7 @@ code {
   color: var(--xm-c-deep);
   font-weight: 600;
   font-size: .875rem;
-  font-family: var(--xm-font-mono);
+  font-family: var(--xm-font-code);
   &::before,
   &::after {
     content: '`';

src/scss/variables/_colors.scss

@@ -5,12 +5,14 @@ $figcaption: #6b7280;
 $thead: #111827;
 $ol-counter: #6b7280;
 $ul-counter: #d1d5db;
+
 // Border
 $link-border: hsla(0deg 0% 50% / .3);
 $hr-border: hsla(0deg 0% 50% / .3);
 $quote-border: hsla(0deg 0% 50% / .3);
 $thead-border: #d1d5db;
 $tr-border: #e5e7eb;
+
 // Shiki (code highlight)
 $shiki-light: #f8f8f8;
 $shiki-dark: #0e0e0e;

src/scss/variables/_constants.scss

@@ -1,5 +1,8 @@
+// Font stack
 $font-sans: 'Open Sans', 'Inter', 'Roboto', 'Helvetica', 'Arial', 'Sarasa Gothic TC', 'Sarasa Gothic SC', 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', 'Microsoft YaHei', -apple-system, sans-serif;
 $font-serif: 'Merriweather', 'Georgia', 'Times New Roman', 'Times', 'Source Han Serif Traditional Chinese', 'Source Han Serif Simplified Chinese', 'Noto Serif TC', 'Noto Serif SC', serif;
 $font-mono: 'DM Mono', 'Fira Code', 'Jetbrains Mono', 'Input Mono', 'Menlo', 'MesloLGS NF', 'Ubuntu', monospace;
 
+// Font defaults
 $font-display: var(--xm-font-sans);
+$font-code: var(--xm-font-mono);