From e2285f8128c17d03b4c96668e49da98db20ce709 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 11 Feb 2025 21:56:07 +0100
Subject: [PATCH] feat: take into account font size (#11)

---
 src/modules/repo/interfaces/UserSettings.ts    | 1 +
 src/modules/user/hooks/useUserSettings.hook.ts | 3 +++
 src/styles/app.css                             | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts
index f70d6b7..11693e4 100644
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -3,6 +3,7 @@ import { Model } from '@/data/models/Model'
 
 export interface UserSettings extends Model<DataType.UserSettings> {
   fontFamily?: string
+  fontSize?: string
   mode?: 'light' | 'dark'
   backlink?: boolean
 }
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index 414a0cb..8bafcc5 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -20,11 +20,14 @@ export const useUserSettings = () => {
     }
 
     const fontFamily = store.userSettings?.fontFamily
+    const fontSize = store.userSettings?.fontSize
     const mode = store.userSettings?.mode
     const root = document.documentElement
 
     downloadGoogleFont(fontFamily || DEFAULT_FONT_POLICY)
 
+    root.style.setProperty('--font-size', fontSize || '16px')
+
     switch (mode) {
       case 'dark':
         root.style.setProperty('--font-color', DARK_FONT_COLOR)
diff --git a/src/styles/app.css b/src/styles/app.css
index 1c2e289..5ffe495 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -8,6 +8,7 @@
 :root {
   --primary-color: #2c3a47;
   --font-family: "Courier Prime", monospace;
+  --font-size: 13pt;
   --font-color: #4a4a4a;
   --link: #445fb9;
   --light-link: lighten(#445fb9, 45%);
@@ -71,6 +72,7 @@ a {
 
 .repo-note {
   font-family: var(--font-family);
+  font-size: var(--font-size);
   transition-property: color, background-color;
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
 }