From 0909ec25631a1b7aeeec0cd23f92788ecc1dda93 Mon Sep 17 00:00:00 2001
From: Dan Bastin <dan.bastin@gmail.com>
Date: Fri, 28 Feb 2025 20:01:34 -0500
Subject: [PATCH] basic breakpoint scaling

---
 src/app/_theme/theme.ts | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/app/_theme/theme.ts b/src/app/_theme/theme.ts
index 31f00917..4b0de335 100644
--- a/src/app/_theme/theme.ts
+++ b/src/app/_theme/theme.ts
@@ -68,7 +68,7 @@ export const theme: Theme = createTheme({
     },
     components: {
         MuiCssBaseline: {
-            styleOverrides: {
+            styleOverrides: (theme) => ({
                 ':root': {
                     '--selection-green': '#72F979',
                     '--selection-red': '#FF0D0D',
@@ -77,6 +77,29 @@ export const theme: Theme = createTheme({
                     '--selection-grey': '#9DB4A0',
                     '--initiative-blue': '#00BAFF',
                     '--initiative-red': '#FF3231',
+                    '--font-size-xs': '12px',
+                    '--font-size-sm': '14px',
+                    '--font-size-md': '16px',
+                    '--font-size-lg': '17px',
+                    '--font-size-xl': '18px',
+                },
+                html: {
+                    fontSize: 'var(--font-size-md)', // Default to medium
+                    [theme.breakpoints.down('sm')]: {
+                        fontSize: 'var(--font-size-xs)',
+                    },
+                    [theme.breakpoints.between('sm', 'md')]: {
+                        fontSize: 'var(--font-size-sm)',
+                    },
+                    [theme.breakpoints.between('md', 'lg')]: {
+                        fontSize: 'var(--font-size-md)',
+                    },
+                    [theme.breakpoints.between('lg', 'xl')]: {
+                        fontSize: 'var(--font-size-lg)',
+                    },
+                    [theme.breakpoints.up('xl')]: {
+                        fontSize: 'var(--font-size-xl)',
+                    },
                 },
                 body: {
                     backgroundSize: 'cover',
@@ -100,7 +123,7 @@ export const theme: Theme = createTheme({
                 '::-webkit-scrollbar-button': {
                     height: '10px',
                 },
-            },
+            }),
         },
         MuiContainer: {
             styleOverrides: {