Tweaks to make everything fit on mobile, enable gallery

Author: andy-sorge

app/(docs)/docs/[...slug]/page.tsx

@@ -5,13 +5,11 @@ import path from "path"
 export function generateStaticParams() {
   const docsContents = readdirSync(path.join(process.cwd(), "docs-root"), { recursive: true, withFileTypes: true, encoding: "utf-8" })
   const docsFiles = docsContents.filter(i => i.isFile())
-  
+
   const staticParams = docsFiles.map((file) => ({
     slug: file.parentPath.split("docs-root/")[1].split("/").concat(file.name.replace(".mdx", ""))
   }))
-  
-  console.log(staticParams)
-  
+
   return staticParams
 }
 

app/(main)/page.tsx

@@ -29,9 +29,12 @@ const Page = async () => {
       <div className={styles.titleWrapper}>
         <h1 className={styles.title}>Palouse RoboSub</h1>
       </div>
-	  <div className={styles.graySection}>
-	  <br/>
-		<p style={{ textAlign: "center" }}>WSU&apos;s Palouse RoboSub club develops underwater submarines designed to participate in the intercollegiate RoboSub national competitions. Located in the basement of Dana Hall, Palouse RoboSub combines Electrical, Mechanical, and Computer Engineering to create complex AUVs and ROVs.</p>
+	    <div className={styles.graySection}>
+		    <p style={{ textAlign: "center" }}>
+          WSU&apos;s Palouse RoboSub club develops underwater submarines designed to participate in the intercollegiate
+          RoboSub national competitions. Located in the basement of Dana Hall, Palouse RoboSub combines Electrical,
+          Mechanical, and Computer Engineering to create complex AUVs and ROVs.
+        </p>
         <h2 style={{ fontSize: "40px" }}>Support Palouse RoboSub!</h2>
         <div className={styles.flexRow}>
           <div>If you are a student please consider <Link href="/join">joining</Link>!</div>
@@ -44,7 +47,6 @@ const Page = async () => {
         <div className={styles.flexRow}>
           <div>
             We regularly document our activities to share our progress and help the public understand our work.
-
             <Link href="/blog" className={styles.link}>Check the blog out here <ArrowRight/></Link>
           </div>
           <div>

components/footer.tsx

@@ -12,7 +12,7 @@ const Footer = () => {
           <Image src="/vcea.png" alt="Voiland College of Engineering and Architecture" width={300} height={75} />
         </a>
       </div>
-      <div className={styles.flexRow}>
+      <div className={styles.links}>
         <div className={styles.flexCol} style={{ marginRight: "10px" }}>
           <div className={styles.flexRow}>
             <Image src="/linkedin.svg" alt="LinkedIn" height={24} width={24} />

components/header.tsx

@@ -26,7 +26,7 @@ const Header = () => {
           <Link href="/officers" className={styles.link}>Officers</Link>
           <Link href="/sponsors" className={styles.link}>Sponsors</Link>
           <Link href="/blog" className={styles.link}>Blog</Link>
-		  {/*<Link href="/gallery" className={styles.link}>Gallery</Link>*/}
+		      <Link href="/gallery" className={styles.link}>Gallery</Link>
           <Link href="/join" className={styles.joinButton}>JOIN US</Link>
           <Link href="/donate" className={styles.donateButton}>DONATE</Link>
         </div>
@@ -36,7 +36,7 @@ const Header = () => {
         <Link href="/officers" className={styles.link}>Officers</Link>
         <Link href="/sponsors" className={styles.link}>Sponsors</Link>
         <Link href="/blog" className={styles.link}>Blog</Link>
-		{/*<Link href="/gallery" className={styles.link}>Gallery</Link>*/}
+		    <Link href="/gallery" className={styles.link}>Gallery</Link>
         <Link href="/join" className={styles.joinButton}>JOIN US</Link>
         <Link href="/donate" className={styles.donateButton}>DONATE</Link>
       </div>

styles/footer.module.css

@@ -22,10 +22,21 @@
     gap: 4px;
 }
 
+.links {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+}
+
 @media (max-width: 768px) {
     .footer {
         flex-direction: column-reverse;
         gap: 24px;
         align-items: start;
     }
+    .links {
+        flex-direction: column;
+        align-items: start;
+    }
 }

styles/gallery-image.module.css

@@ -1,6 +1,5 @@
 .container {
     position: relative;
-    max-height: 60vh;
     width: 100%;
     margin-bottom: 48px;
     display: flex;
@@ -11,23 +10,22 @@
 .image {
     object-fit: contain;
     width: 100%;
-    height: 100%;
+    height: auto;
+    max-height: 60vh;
+    display: block;
 }
 
 .caption {
     background-color: #A60F2D;
     color: white;
-    width: min-content;
     padding: 8px 16px;
     font-size: 30px;
-    text-wrap: nowrap;
+    text-align: center;
 }
 
 @media (max-width: 768px) {
     .caption {
-        width: 100%;
-        text-wrap: wrap;
-        text-align: center;
         font-size: 24px;
+        padding: 6px 12px;
     }
-}
+}

styles/home.module.css

@@ -76,4 +76,29 @@
 .post:nth-child(odd) {
     background-color: #EBEBEB;
     border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+    .mainPhoto {
+        width: 100%;
+        max-height: 80vh;
+        object-fit: contain;
+        height: auto;
+    }
+    .title {
+        font-size: 36px;
+        text-wrap: wrap;
+        width: 100%;
+    }
+    .graySection {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+    .flexRow {
+        flex-direction: column;
+    }
+    .section {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
 }

styles/officer-bio.module.css

@@ -7,4 +7,10 @@
     width: min-content;
     clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
     min-width: 300px;
+}
+
+@media (max-width: 768px) {
+    .bioWrapper {
+        width: 100%;
+    }
 }