gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: add preferred font field to themes
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-15 00:25:52 +02:00
parent 26243a8cd6
commit 186d3c7a0a
No known key found for this signature in database
7 changed files with 19 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app.vue
View file

@ -65,7 +65,7 @@ useHead({
<style> <style>
html, html,
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: var(--preferred-font);
box-sizing: border-box; box-sizing: border-box;
color: var(--text-color); color: var(--text-color);
background: var(--optional-body-background); background: var(--optional-body-background);

11
public/themes/ash.css
View file

@ -12,15 +12,16 @@
--padding-color: #e0e0e0; --padding-color: #e0e0e0;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--primary-color: #f07028; --primary-color: #f07028;
--primary-highlighted-color: #f28f4b; --primary-highlighted-color: #f28f4b;
--secondary-color: #683820; --secondary-color: #683820;
--secondary-highlighted-color: #885830; --secondary-highlighted-color: #885830;
--accent-color: #a04b24; --accent-color: #a04b24;
--accent-highlighted-color: #b86038; --accent-highlighted-color: #b86038;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--preferred-font: "Arial, Helvetica, sans-serif";
} }

1
public/themes/dark.css
View file

@ -23,4 +23,5 @@
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;
--preferred-font: "Arial, Helvetica, sans-serif";
} }

1
public/themes/description.css
View file

@ -24,6 +24,7 @@
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;
--preferred-font: "Arial, Helvetica, sans-serif";
--optional-body-background: ; /* background element for the body */ --optional-body-background: ; /* background element for the body */
--optional-chat-background: ; /* background element for the chat box */ --optional-chat-background: ; /* background element for the chat box */

11
public/themes/light.css
View file

@ -12,15 +12,16 @@
--padding-color: #484848; --padding-color: #484848;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--primary-color: #df5f0b; --primary-color: #df5f0b;
--primary-highlighted-color: #ef6812; --primary-highlighted-color: #ef6812;
--secondary-color: #e8ac84; --secondary-color: #e8ac84;
--secondary-highlighted-color: #f8b68a; --secondary-highlighted-color: #f8b68a;
--accent-color: #e68b4e; --accent-color: #e68b4e;
--accent-highlighted-color: #f69254; --accent-highlighted-color: #f69254;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--preferred-font: "Arial, Helvetica, sans-serif";
} }

3
public/themes/rainbow-capitalism.css
View file

@ -19,10 +19,11 @@
--accent-color: #ff218c80; --accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80; --accent-highlighted-color: #df1b6f80;
--sidebar-width: 2.5em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;
--preferred-font: "Arial, Helvetica, sans-serif";
/* --optional-body-background: background */ /* --optional-body-background: background */
--optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);

3
utils/generateDefaultIcon.ts
View file

@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
ctx.fillStyle = 'white' ctx.fillStyle = 'white'
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.textBaseline = 'middle' ctx.textBaseline = 'middle'
ctx.font = 'bold 96px Arial, Helvetica, sans-serif' const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
// 136 isn't actually centered, but it *looks* centered // 136 isn't actually centered, but it *looks* centered
ctx.fillText(previewName, 128, 136) ctx.fillText(previewName, 128, 136)