Browse Source

Setup text fonts

Sync score fonts with body text.
master
TheoryOfNekomata 6 months ago
parent
commit
68e33f97d6
5 changed files with 24 additions and 6 deletions
  1. +2
    -2
      src/components/Score/index.tsx
  2. +15
    -2
      src/layouts/Default.astro
  3. +1
    -1
      src/pages/ch20-trills.mdx
  4. +5
    -0
      src/pages/scores/[asset].svg.ts
  5. +1
    -1
      tailwind.config.mjs

+ 2
- 2
src/components/Score/index.tsx View File

@@ -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>


+ 15
- 2
src/layouts/Default.astro View File

@@ -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 {


+ 1
- 1
src/pages/ch20-trills.mdx View File

@@ -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


+ 5
- 0
src/pages/scores/[asset].svg.ts View File

@@ -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;


+ 1
- 1
tailwind.config.mjs View File

@@ -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: {
},


Loading…
Cancel
Save