Fix navbar cutoff on small screens and enforce Raleway for headers, Ubuntu for body text

Author: elainefan331

src/design/Layouts/FullScreen.tsx

@@ -26,7 +26,7 @@ const FullScreen = () => {
           borderBottom: `2px solid ${Colors.primary.dark}`,
           boxShadow: `0px 0px 10px ${Colors.lightGray}`,
           left: "0",
-          height: "6rem",
+          minHeight: "6rem",
         }}
       >
         <Toolbar sx={{ marginTop: "0.5rem" }}>
@@ -36,7 +36,7 @@ const FullScreen = () => {
             justifyContent={justifyContentValue}
             sx={{ maxWidth: "100%" }}
           >
-            <Grid item sm={12} md={12} lg={5}>
+            <Grid item sm={12} md={5} lg={5}>
               <Button
                 sx={{
                   display: "flex",
@@ -65,8 +65,13 @@ const FullScreen = () => {
               </Button>
             </Grid>
             {/* Navigation links*/}
-            <Grid item>
-              <Grid container spacing={3} justifyContent="flex-end">
+            <Grid item paddingLeft="2rem">
+              <Grid
+                container
+                spacing={3}
+                justifyContent="center"
+                // border="2px solid red"
+              >
                 {[
                   { text: "ABOUT", url: "https://neurojson.org/Doc/Start" },
                   { text: "WIKI", url: "https://neurojson.org/Wiki" },

src/design/theme.ts

@@ -37,37 +37,30 @@ export const Colors = {
 
 const theme = createTheme({
   typography: {
-    fontFamily: [
-      "Raleway",
-      "Ubuntu",
-      '"IBM Plex Sans"',
-      "-apple-system",
-      "BlinkMacSystemFont",
-      '"Segoe UI"',
-      "Roboto",
-      '"Helvetica Neue"',
-      "Arial",
-      "sans-serif",
-    ].join(","),
+    fontFamily: ["Raleway", "Ubuntu"].join(","),
     h1: {
       fontFamily: "Raleway",
       fontWeight: 700,
-      fontSize: "2rem",
+      // fontSize: "2rem",
+      fontSize: "2.5rem",
       textTransform: "none",
     },
     h2: {
       fontWeight: 600,
-      fontSize: "1.75rem",
+      // fontSize: "1.75rem",
+      fontSize: "1.2rem",
       textTransform: "none",
       color: Colors.secondary.main,
     },
     body1: {
       fontSize: "1rem",
       color: Colors.textPrimary,
+      fontFamily: "Ubuntu",
     },
     body2: {
       fontSize: "0.875rem",
       color: Colors.textSecondary,
+      fontFamily: "Ubuntu",
     },
   },
 });