diff --git a/theme/src/components/Banner.tsx b/theme/src/components/Banner.tsx index 2d1c2dc..c23f144 100644 --- a/theme/src/components/Banner.tsx +++ b/theme/src/components/Banner.tsx @@ -14,12 +14,12 @@ const Banner: React.FC = ({ 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 = ({ 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 index 6def232..71e0c60 100644 --- a/theme/src/components/MDXRender.tsx +++ b/theme/src/components/MDXRender.tsx @@ -73,11 +73,11 @@ const MDXRender: React.FC = ({ 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 = ({ 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 index 2c487bc..548af1b 100644 --- a/theme/src/components/menus/SideNav.tsx +++ b/theme/src/components/menus/SideNav.tsx @@ -32,6 +32,8 @@ const SideNav: React.FC = ({ = ({ to, label, children, ...res const theme = useTheme() const { isCurrent, isLeaf, isLink } = withPathAttributes(to, children) - return ( = ({ 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 = ({ 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}