Setup text fonts

Sync score fonts with body text.

src/components/Score/index.tsx

@@ -10,10 +10,10 @@ export const Score: React.FC<ScoreProps> = ({
 	alt,
 }) => {
 	return (
-		<div>
+		<div className="score-wrapper">
 			<a href={`scores/${id}.svg`}>
 				<figure>
-					<img className="svg" src={`scores/${id}.svg`} alt={alt} />
+					<img className="score" src={`scores/${id}.svg`} alt={alt} />
 					<figcaption>
 						{alt}
 					</figcaption>

src/layouts/Default.astro

@@ -49,6 +49,14 @@ const { title } = Astro.props.frontmatter || Astro.props;
         @apply text-purple-600;
       }
 
+			img.score {
+        @apply -my-8;
+			}
+
+			div.score-wrapper {
+				@apply my-12;
+			}
+
 			@media only screen {
         body {
           @apply px-8;
@@ -66,6 +74,7 @@ const { title } = Astro.props.frontmatter || Astro.props;
 					@apply text-5xl;
 					@apply text-center;
 					@apply my-16;
+					@apply font-bold;
 				}
 
 				body {
@@ -85,6 +94,10 @@ const { title } = Astro.props.frontmatter || Astro.props;
         a:visited {
           @apply text-inherit;
         }
+
+				figcaption {
+					@apply text-sm;
+				}
       }
 
       @media only screen and (prefers-color-scheme: dark) {
@@ -93,8 +106,8 @@ const { title } = Astro.props.frontmatter || Astro.props;
           @apply text-white;
         }
 
-        img.svg {
-          filter: invert(100%);
+        img.score {
+          filter: invert(100%) grayscale(100%);
         }
 
 				a:link {

src/pages/ch20-trills.mdx

@@ -18,7 +18,7 @@ the 4/4 time signature and said the grouping is made out of 6 notes--"imagine th
 
 He said my trills were "ugly", to which I agreed. I was still struggling to make the trills "sound right". He suggested
 I "count" the trills. However, that felt too much for me to handle, so I tried clinging to my sensation. I used my
-(2) to "count", i.e. align my trills to the measure.
+**2** to "count", i.e. align my trills to the measure.
 
 He asked me how did my experience compare with playing measured trills--I said I used to play instinctively. He added
 that playing trills instinctively could be detrimental when used in every situation. He asked if I was aiming to play

src/pages/scores/[asset].svg.ts

@@ -3,6 +3,8 @@ import { VerovioToolkit } from 'verovio/esm';
 import { readFile, readdir } from 'node:fs/promises';
 import { JSDOM } from 'jsdom';
 import type {APIRoute, GetStaticPaths} from 'astro';
+// @ts-ignore
+import tailwindConfig from '../../../tailwind.config.mjs';
 
 const filter = (musicXml: string) => {
 	const jsdom = new JSDOM(musicXml, { pretendToBeVisual: true, contentType: 'image/svg+xml' });
@@ -38,6 +40,9 @@ const processOutput = (xmlData: string) => {
 			if (h.tagName.toLowerCase() === 'desc') {
 				return;
 			}
+			if (h.tagName.toLowerCase() === 'style') {
+				h.innerHTML = h.innerHTML.replace(/Times,serif/g, tailwindConfig.theme.fontFamily.body.join(','));
+			}
 			if (svgElemsMain.children[0]) {
 				svgElemsMain.insertBefore(h, svgElemsMain.children[0]);
 				return;

tailwind.config.mjs

@@ -3,7 +3,7 @@ export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		fontFamily: {
-			body: ['Times New Roman', 'Times', 'serif'],
+			body: ['New York', 'Times New Roman', 'Times', 'serif'],
 		},
 		extend: {
 		},