Rebalance font sizes #28

Riverscapes · Jan 3, 2025 · e1e227e · e1e227e
1 parent b66dccb
commit e1e227e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 30 deletions.
diff --git a/theme/src/components/Banner.tsx b/theme/src/components/Banner.tsx
@@ -14,12 +14,12 @@ const Banner: React.FC<BannerProps> = ({ title, description }) => {
         background: `url(${background})`,
         backgroundSize: 'cover',
         width: '100%',
-        minHeight: '18vw', // 350/1920
+        minHeight: '15vw', // 350/1920
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         height: {
-          xl: '18vw', // 350/1920
+          xl: '15vw', // 350/1920
         },
       }}
     >
@@ -36,6 +36,7 @@ const Banner: React.FC<BannerProps> = ({ title, description }) => {
           variant="h1"
           sx={{
             color: 'white',
+            fontSize: '2.2rem',
           }}
         >
           {title}

diff --git a/theme/src/components/MDXRender.tsx b/theme/src/components/MDXRender.tsx
@@ -73,11 +73,11 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
     },
     // Dial back the font sizes a bit for the content
     // area. Reference `/theme/src/muiTheme.tsx`
-    '&.MuiTypography-h1': { fontSize: '2.5rem' },
-    '&.MuiTypography-h2': { fontSize: '1.8rem' },
-    '&.MuiTypography-h3': { fontSize: '1.4rem' },
-    '&.MuiTypography-h4': { fontSize: '1rem' },
-    '&.MuiTypography-h5': { fontSize: '1.25rem' },
+    '&.MuiTypography-h1': { fontSize: '2rem' },
+    '&.MuiTypography-h2': { fontSize: '1.5rem' },
+    '&.MuiTypography-h3': { fontSize: '1.25rem' },
+    '&.MuiTypography-h4': { fontSize: '1.2rem' },
+    '&.MuiTypography-h5': { fontSize: '1.1rem' },
     '&.MuiTypography-h6': { fontSize: '1rem' },
   }
 
@@ -200,7 +200,7 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
                   color: theme.palette.info.main,
                   fontFamily: '"JetBrains Mono", "Courier New", sans-serif',
                   // px: 2,
-                  fontSize: '1.95rem',
+                  fontSize: '1.2rem',
                   //   margin: [0, 'auto'],
                 },
               }}

diff --git a/theme/src/components/menus/SideNav.tsx b/theme/src/components/menus/SideNav.tsx
@@ -32,6 +32,8 @@ const SideNav: React.FC<SideNavProps> = ({
     <Typography
       sx={{
         mb: 3,
+        fontWeight: 'bold',
+        fontSize: '1.4rem',
       }}
       component={headingType}
       variant="sideMenu"

diff --git a/theme/src/components/menus/TreeItemLink.tsx b/theme/src/components/menus/TreeItemLink.tsx
@@ -18,7 +18,6 @@ const TreeItemLink: React.FC<TreeItemLinkProps> = ({ to, label, children, ...res
   const theme = useTheme()
 
   const { isCurrent, isLeaf, isLink } = withPathAttributes(to, children)
-
   return (
     <TreeItem
       onClick={
@@ -47,11 +46,11 @@ const TreeItemLink: React.FC<TreeItemLinkProps> = ({ to, label, children, ...res
         },
         '& .MuiTreeItem-content': {
           borderBottom: '1px solid #bbcd3f',
-          py: 1,
+          py: 0.75,
         },
         '& .MuiTreeItem-label': {
           color: theme.palette.text.primary,
-          fontSize: '1.2rem',
+          fontSize: '1rem',
         },
         '& .MuiTreeItem-group': {
           ml: 0,
@@ -71,30 +70,13 @@ const TreeItemLink: React.FC<TreeItemLinkProps> = ({ to, label, children, ...res
             textAlign: 'left',
             color: isLink ? theme.palette.text.primary : theme.palette.text.secondary,
             fontWeight: isCurrent ? 'bold' : 'normal',
+            fontSize: '0.85rem',
             // On hover, underline
             '&:hover': {
               textDecoration: !isCurrent ? 'underline' : undefined,
             },
           }}
-          onClick={
-            isLeaf || isCurrent
-              ? undefined
-              : (e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  if (to.startsWith('#')) {
-                    const element = document.getElementById(to)
-                    e.preventDefault()
-                    element.scrollIntoView()
-                  } else if (to.length > 0) {
-                    // If it's not the current page then navigate to it
-                    if (!isCurrent) {
-                      e.preventDefault()
-                      navigate(to)
-                    }
-                  }
-                }
-          }
+          href={isLeaf || isCurrent ? undefined : to}
         >
           {label}
         </Button>