From 4d29bca13ba4bd65620d8af99c6c6fbb8d6a5fdf Mon Sep 17 00:00:00 2001 From: wukko Date: Fri, 23 May 2025 15:30:40 +0600 Subject: [PATCH] web: fix long text font, make it IBM Plex Mono just like the rest of UI --- pnpm-lock.yaml | 16 +++---- web/package.json | 2 +- web/src/app.css | 45 +++++++++---------- .../changelog/ChangelogEntry.svelte | 2 +- .../components/misc/AboutPageWrapper.svelte | 2 +- .../save/buttons/DownloadButton.svelte | 5 +-- web/src/routes/+layout.svelte | 2 + web/src/routes/donate/+page.svelte | 2 +- 8 files changed, 37 insertions(+), 39 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a782f7f..93c24513 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,12 +94,12 @@ importers: '@eslint/js': specifier: ^9.5.0 version: 9.8.0 - '@fontsource-variable/noto-sans-mono': - specifier: ^5.0.20 - version: 5.0.20 '@fontsource/ibm-plex-mono': specifier: ^5.0.13 version: 5.0.13 + '@fontsource/noto-sans-mono': + specifier: ^5.2.7 + version: 5.2.7 '@fontsource/redaction-10': specifier: ^5.0.2 version: 5.0.2 @@ -531,12 +531,12 @@ packages: resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} engines: {node: '>=14'} - '@fontsource-variable/noto-sans-mono@5.0.20': - resolution: {integrity: sha512-Mik/wbKjiir7t+KBaDZnPZ5GjDnPOXpMF7obmFeyRa528ZsrKcFiSn4ZvArrn3sJMCp/k23wakOcXOWlGNc9cw==} - '@fontsource/ibm-plex-mono@5.0.13': resolution: {integrity: sha512-gtlMmvk//2AgDEZDFsoL5z9mgW3ZZg/9SC7pIfDwNKp5DtZpApgqd1Fua3HhPwYRIHrT76IQ1tMTzQKLEGtJGQ==} + '@fontsource/noto-sans-mono@5.2.7': + resolution: {integrity: sha512-kw+z21ZEjOzsUS49FVLsR/WwJ7LnXrlam5SzNGY6uSSF4gfzYm2CBzcS0Y5YqQCrtDZ4S6PpaAGRMzQ/MAZaXA==} + '@fontsource/redaction-10@5.0.2': resolution: {integrity: sha512-PODxYvb06YrNxdUBGcygiMibpgcZihzmvkmlX/TQAA2F7BUU/anfSKQi/VnLdJ/8LIK81/bUY+i7L/GP27FkVw==} @@ -2404,10 +2404,10 @@ snapshots: '@fastify/busboy@2.1.1': {} - '@fontsource-variable/noto-sans-mono@5.0.20': {} - '@fontsource/ibm-plex-mono@5.0.13': {} + '@fontsource/noto-sans-mono@5.2.7': {} + '@fontsource/redaction-10@5.0.2': {} '@humanfs/core@0.19.1': {} diff --git a/web/package.json b/web/package.json index 73419e7f..0f28447b 100644 --- a/web/package.json +++ b/web/package.json @@ -25,8 +25,8 @@ "homepage": "https://cobalt.tools/", "devDependencies": { "@eslint/js": "^9.5.0", - "@fontsource-variable/noto-sans-mono": "^5.0.20", "@fontsource/ibm-plex-mono": "^5.0.13", + "@fontsource/noto-sans-mono": "^5.2.7", "@fontsource/redaction-10": "^5.0.2", "@imput/libav.js-encode-cli": "6.7.7", "@imput/libav.js-remux-cli": "^6.5.7", diff --git a/web/src/app.css b/web/src/app.css index e0445fa0..f909a6c7 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -188,8 +188,7 @@ body { } * { - font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono", - monospace; + font-family: "IBM Plex Mono", "Noto Sans Mono", monospace; user-select: none; scrollbar-width: none; -webkit-user-select: none; @@ -363,50 +362,50 @@ h6 { -webkit-user-select: text; } -.long-text-noto, -.long-text-noto *:not(h1, h2, h3, h4, h5, h6) { +.long-text, +.long-text *:not(h1, h2, h3, h4, h5, h6) { line-height: 1.8; font-size: 14.5px; - font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace; + font-family: "IBM Plex Mono", monospace; user-select: text; -webkit-user-select: text; } -.long-text-noto, -.long-text-noto *:not(h1, h2, h3, h4, h5, h6, strong, em, del) { - font-weight: 410; +.long-text, +.long-text *:not(h1, h2, h3, h4, h5, h6, strong, em, del) { + font-weight: 400; } -.long-text-noto ul { +.long-text ul { padding-inline-start: 30px; } -.long-text-noto li { +.long-text li { padding-left: 3px; } -.long-text-noto:not(.about) h1, -.long-text-noto:not(.about) h2, -.long-text-noto:not(.about) h3 { +.long-text:not(.about) h1, +.long-text:not(.about) h2, +.long-text:not(.about) h3 { user-select: text; -webkit-user-select: text; letter-spacing: 0; margin-block-start: 1rem; } -.long-text-noto h3 { +.long-text h3 { font-size: 17px; } -.long-text-noto h2 { +.long-text h2 { font-size: 19px; } -.long-text-noto:not(.about) h3 { +.long-text:not(.about) h3 { margin-block-end: -0.5rem; } -.long-text-noto:not(.about) h2 { +.long-text:not(.about) h2 { font-size: 19px; line-height: 1.3; margin-block-end: -0.3rem; @@ -414,7 +413,7 @@ h6 { border-bottom: 1.5px solid var(--button-elevated-hover); } -.long-text-noto img { +.long-text img { border-radius: 6px; } @@ -434,22 +433,22 @@ tr th:first-child { text-align: right; } -.long-text-noto.about section p:first-of-type { +.long-text.about section p:first-of-type { margin-block-start: 0.3em; } -.long-text-noto.about .heading-container { +.long-text.about .heading-container { padding-top: calc(var(--padding) / 2); } -.long-text-noto.about section:first-of-type .heading-container { +.long-text.about section:first-of-type .heading-container { padding-top: 0; } @media screen and (max-width: 535px) { - .long-text-noto, - .long-text-noto *:not(h1, h2, h3, h4, h5, h6) { + .long-text, + .long-text *:not(h1, h2, h3, h4, h5, h6) { font-size: 14px; } } diff --git a/web/src/components/changelog/ChangelogEntry.svelte b/web/src/components/changelog/ChangelogEntry.svelte index 64cd4b8f..7d7b36b5 100644 --- a/web/src/components/changelog/ChangelogEntry.svelte +++ b/web/src/components/changelog/ChangelogEntry.svelte @@ -88,7 +88,7 @@ {#if skeleton} {/if} -
+
{#if skeleton} {#each { length: 3 + Math.random() * 5 } as _}

diff --git a/web/src/components/misc/AboutPageWrapper.svelte b/web/src/components/misc/AboutPageWrapper.svelte index eb46647b..c5486405 100644 --- a/web/src/components/misc/AboutPageWrapper.svelte +++ b/web/src/components/misc/AboutPageWrapper.svelte @@ -4,6 +4,6 @@ export { a }; -

+
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte index 739899dd..6326cd6c 100644 --- a/web/src/components/save/buttons/DownloadButton.svelte +++ b/web/src/components/save/buttons/DownloadButton.svelte @@ -1,6 +1,4 @@