adjust event schedule and faqs width and title and description text f…

…or smaller screens
mvhacks · Jan 12, 2025 · bbdead7 · bbdead7
1 parent be6c8be
commit bbdead7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx
@@ -24,8 +24,8 @@ export default function Faqs() {
         sx={{
           backgroundColor: "transparent",
           color: "white !important",
-          marginLeft: "10%",
-          marginRight: "10%",
+          marginLeft: { xs: "3%", sm: "10%", md: "10%" },
+          marginRight: { xs: "3%", sm: "10%", md: "10%" },      
           "& .MuiAccordion-root": {
             backgroundColor: "transparent",
           },

diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
@@ -22,9 +22,16 @@ const rows = [
   createData("8:00 PM", "Closing Ceremony"),
 ];
 
-export default function Faqs() {
+export default function Schedule() {
   return (
-    <div style={{ paddingLeft: "15%", paddingRight: "15%", paddingTop: "8%", paddingBottom: "5%"}}>
+    <div
+      style={{
+        paddingLeft: "5%",
+        paddingRight: "5%",
+        paddingTop: "8%",
+        paddingBottom: "5%",
+      }}
+    >
       <Typography
         level="h2"
         sx={{
@@ -40,7 +47,8 @@ export default function Faqs() {
       <Table
         hoverRow
         sx={{
-          width: { xs: "100%", sm: "90%", md: "80%", lg: "70%", xl: "60%" },
+          width: "100%",
+          maxWidth: { xs: "100%", sm: "80%", md: "60%", lg: "50%" },
           margin: "0 auto",
           backgroundColor: "#221a46",
           color: "white !important",

diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -14,7 +14,7 @@ export default function Title() {
         <Typography
           level="h1"
           textColor="common.white"
-          sx={{ fontWeight: "bold", fontSize: { xs: "14vw", sm: "10vw", md: "9vw", lg: "7vw" }, marginLeft: "10%", lineHeight: "80%", marginTop: "1%"}}
+          sx={{ fontWeight: "bold", fontSize: { xs: "12vw", sm: "10vw", md: "9vw", lg: "7vw" }, marginLeft: "10%", lineHeight: "80%", marginTop: "1%"}}
         >
           MV HACKS
           <br />
@@ -26,7 +26,12 @@ export default function Title() {
         <Typography
           level="h3"
           textColor="common.white"
-          sx={{ fontWeight: "normal", marginLeft: "10%" }}
+          sx={{ 
+            fontWeight: "normal", 
+            marginLeft: "10%", 
+            fontSize: {xs: "6vw", sm: "4vw", md: "3vw", lg: "1.65vw"},
+            marginBottom: "1%", 
+          }}
         >
           THE HACKATHON FOR{" "}
           <Box
@@ -43,16 +48,26 @@ export default function Title() {
             <Typography
               level="h3"
               textColor="common.white"
-              sx={{ fontWeight: "normal" }}
+              sx={{ fontWeight: "normal", fontSize: {xs: "6vw", sm: "4vw", md: "3vw", lg: "1.65vw"}  }}
             >
               EVERYONE
             </Typography>
           </Box>
         </Typography>
-        <Typography level="body-lg" variant="plain" textColor="common.white" sx={{maxWidth: "500px", marginLeft: "10%", marginBottom:"20px"}}>
+        <Typography 
+          level="body-lg" 
+          variant="plain" 
+          textColor="common.white" 
+          sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
+        >
           Each year, high school hackers from across the Bay Area come together at MVHacks to create cool projects, learn from experts, and participate in 12 hours of hacking! Hackers of all skill levels are welcome to compete, individually or as a group. 
           The date and time of this event are not finalized yet, but will be in Spring 2025 in the Bay Area.
-          <Typography level="title-lg" variant="plain" sx={{color: "rgb(150,122,162)"}}>*You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.</Typography>{' '}
+          <Typography 
+            level="title-lg" 
+            variant="plain" 
+            sx={{color: "rgb(150,122,162)", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"}}}
+          >
+            *You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.</Typography>{' '}
         </Typography>
       </div>
       <Button