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

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

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",
-            "IBM Plex Mono", monospace;
+        font-family: "Noto Sans 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>