style: adjust font size of logo h1 and h2 for better mobile responsiveness layout

Author: elainefan331

src/components/NavBar/NavItems.tsx

@@ -54,6 +54,10 @@ const NavItems: React.FC = () => {
                 variant="h1"
                 sx={{
                   color: Colors.yellow,
+                  fontSize: {
+                    xs: "2.2rem", // font size on mobile
+                    sm: "2.5rem",
+                  },
                 }}
               >
                 NeuroJSON.io
@@ -62,6 +66,10 @@ const NavItems: React.FC = () => {
                 variant="h2"
                 sx={{
                   color: Colors.lightGray,
+                  fontSize: {
+                    xs: "1rem", // font size on mobile
+                    sm: "1.2rem",
+                  },
                 }}
               >
                 Free Data Worth Sharing

src/design/theme.ts

@@ -1,4 +1,4 @@
-import { orange, purple } from "@mui/material/colors";
+// import { orange, purple } from "@mui/material/colors";
 import { createTheme } from "@mui/material/styles";
 
 const primary = {
@@ -46,13 +46,11 @@ const theme = createTheme({
     h1: {
       fontFamily: "Raleway",
       fontWeight: 700,
-      // fontSize: "2rem",
       fontSize: "2.5rem",
       textTransform: "none",
     },
     h2: {
       fontWeight: 600,
-      // fontSize: "1.75rem",
       fontSize: "1.2rem",
       textTransform: "none",
       color: Colors.secondary.main,