Optimize for mobile

rutgersesports · Oct 24, 2023 · ce5a3eb · ce5a3eb
1 parent 5072dbc
commit ce5a3eb
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/src/pages/scarlet-knightmare.tsx b/src/pages/scarlet-knightmare.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import styles from '../styles/base.module.css'
+import pageStyles from '../styles/scarlet-knight.module.css'
 import NavigationBar from '../components/navigation-bar'
 import Footer from '../components/footer'
 import ImageHeader from '@/components/image-header'
@@ -84,8 +85,13 @@ export default function Events() {
       />
       <BodyText>
         <div style={{ display: 'flex', marginTop: '50px', marginBottom: '50px', justifyContent: 'space-between' }}>
-          <Image src={bodyImage1} alt="Woman playing Valorant." width={500} style={{ marginRight: '50px' }} />
-          <div>
+          <Image
+            className={styles['hide-if-mobile']}
+            src={bodyImage1}
+            alt="Woman playing Valorant."
+            style={{ marginRight: '50px', objectFit: 'contain', minWidth: '200px', height: 'auto' }}
+          />
+          <div style={{ minWidth: '350px' }}>
             <h1>What is Scarlet Knightmare?</h1>
             <p>
               An event hosted by Rutgers Esports run by students. We typically hold friendly competitions such as a
@@ -95,8 +101,15 @@ export default function Events() {
             </p>
           </div>
         </div>
-        <div style={{ display: 'flex', marginTop: '50px', marginBottom: '50px', justifyContent: 'space-between' }}>
-          <div>
+        <div
+          style={{
+            display: 'flex',
+            marginTop: '50px',
+            marginBottom: '50px',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div style={{ minWidth: '350px' }}>
             <h1>What is Artist Alley?</h1>
             <p>
               Artist Alley is an event where artists can advertise and sell their work to the Rutgers community. You can
@@ -106,13 +119,15 @@ export default function Events() {
             </p>
           </div>
           <Image
+            className={styles['hide-if-mobile']}
             src={bodyImage2}
             alt="Two women and one man sitting next to each other surrounded by their work."
-            width={500}
-            style={{ marginLeft: '50px' }}
+            style={{ minWidth: '200px', marginLeft: '50px', height: 'auto', objectFit: 'contain' }}
           />
         </div>
-        <Schedule title="Event Schedule" events={events} />
+        <div style={{ marginBottom: '50px' }}>
+          <Schedule title="Event Schedule" events={events} />
+        </div>
       </BodyText>
       <Footer />
     </div>

diff --git a/src/styles/base.module.css b/src/styles/base.module.css
@@ -1,3 +1,9 @@
 .base {
   text-align: center;
 }
+
+@media (max-width: 874px) {
+  .hide-if-mobile {
+    display: none;
+  }
+}
diff --git a/src/styles/events.module.css b/src/styles/events.module.css
@@ -0,0 +1,5 @@
+.body-image {
+  object-fit: 'contain';
+  min-width: '300px';
+  height: 'auto';
+}
diff --git a/src/styles/image-header.module.css b/src/styles/image-header.module.css
@@ -12,13 +12,13 @@
 
 .image-header h1 {
   color: white;
-  font-size: 3.5rem;
+  font-size: 70px;
   margin: 0;
 }
 
 .image-header h2 {
   color: white;
-  font-size: 1.5rem;
+  font-size: 30px;
   margin: 0;
 }
 
@@ -27,6 +27,18 @@
     height: 650px;
     background-size: 130% auto;
   }
+
+  .image-header h1 {
+    color: white;
+    font-size: 6vw;
+    margin: 0;
+  }
+
+  .image-header h2 {
+    color: white;
+    font-size: 2.5vw;
+    margin: 0;
+  }
 }
 
 @media only screen and (max-width: 1224px) {

diff --git a/src/styles/navigation-bar.module.css b/src/styles/navigation-bar.module.css
@@ -67,7 +67,7 @@ code owner.
 
 /* Ultra Small
 -----------------------*/
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1000px) {
   .logo {
     display: none;
   }