Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-05-24 10:32:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wukko 2025-05-23 15:30:40 +06:00
parent 2eadc3fbd8
commit 4d29bca13b
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
8 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pnpm-lock.yaml generated
View File

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

2
web/package.json
View File

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

45
web/src/app.css
View File

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

2
web/src/components/changelog/ChangelogEntry.svelte
View File

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

2
web/src/components/misc/AboutPageWrapper.svelte
View File

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

5
web/src/components/save/buttons/DownloadButton.svelte
View File

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

2
web/src/routes/+layout.svelte
View File

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

2
web/src/routes/donate/+page.svelte
View File

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