web: fix long text font, make it IBM Plex Mono just like the rest of UI

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': {}

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",

web/src/app.css

@@ -188,8 +188,7 @@ body {
 }
 
 * {
-    font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono",
+    font-family: "IBM Plex Mono", "Noto Sans Mono", monospace;
-        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,
-.long-text-noto *:not(h1, h2, h3, h4, h5, h6) {
+.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,
-.long-text-noto *:not(h1, h2, h3, h4, h5, h6, strong, em, del) {
+.long-text *:not(h1, h2, h3, h4, h5, h6, strong, em, del) {
-    font-weight: 410;
+    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:not(.about) h1,
-.long-text-noto:not(.about) h2,
+.long-text:not(.about) h2,
-.long-text-noto:not(.about) h3 {
+.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,
-    .long-text-noto *:not(h1, h2, h3, h4, h5, h6) {
+    .long-text *:not(h1, h2, h3, h4, h5, h6) {
         font-size: 14px;
     }
 }

web/src/components/changelog/ChangelogEntry.svelte

@@ -88,7 +88,7 @@
         {#if skeleton}
             <Skeleton class="big changelog-banner" width="100%" />
         {/if}
-        <div class="changelog-body long-text-noto">
+        <div class="changelog-body long-text">
             {#if skeleton}
                 {#each { length: 3 + Math.random() * 5 } as _}
                     <p>

web/src/components/misc/AboutPageWrapper.svelte

@@ -4,6 +4,6 @@
     export { a };
 </script>
 
-<div class="long-text-noto about">
+<div class="long-text about">
     <slot></slot>
 </div>

web/src/components/save/buttons/DownloadButton.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import "@fontsource-variable/noto-sans-mono";
-
     import { onDestroy } from "svelte";
     import { t } from "$lib/i18n/translations";
     import { hapticSwitch } from "$lib/haptics";
@@ -104,8 +102,7 @@
 
     #download-state {
         font-size: 24px;
-        font-family: "Noto Sans Mono Variable", "Noto Sans Mono",
+        font-family: "Noto Sans Mono", monospace;
-            "IBM Plex Mono", monospace;
         font-weight: 400;
 
         text-align: center;

web/src/routes/+layout.svelte

@@ -5,6 +5,8 @@
     import "@fontsource/ibm-plex-mono/400-italic.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import "@fontsource/noto-sans-mono";
+
     import { onMount } from "svelte";
     import { page } from "$app/stores";
     import { updated } from "$app/stores";

web/src/routes/donate/+page.svelte

@@ -31,7 +31,7 @@
             <DonateShareCard />
         </section>
 
-        <section id="motivation" class="long-text-noto">
+        <section id="motivation" class="long-text">
             <p>{$t("donate.body.motivation")}</p>
             <p>{$t("donate.body.no_bullshit")}</p>
             <p>{$t("donate.body.keep_going")}</p>