feat: take into account font size (#11)

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
 }

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)

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