feat: add mobile responsiveness

fullstackatbrown · Dec 24, 2024 · aba01c7 · aba01c7
1 parent 69801ae
commit aba01c7
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 51 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -5,10 +5,10 @@ import { Suspense } from 'react';
 export default function About() {
   return (
     <Suspense fallback={<div></div>}>
-      <div>
+      {/* <div> */}
         <AboutSection />
         {/* <Team /> */}
-      </div>
+      {/* </div> */}
     </Suspense>
   );
 }
diff --git a/app/news/page.module.css b/app/news/page.module.css
@@ -7,17 +7,18 @@
     scroll-snap-type: y mandatory;
     /* padding-left: 10vw;
     padding-right: 10vw; */
-    padding: 6rem;
+    padding: 16px 4vw;
     /* overflow-x: hidden; */
 }
 
 .newsTitle {
-    font-size: 3rem; /* Scales with viewport width for responsiveness */
+    font-size: 3rem;
     color: #ffffff;
     /* padding-left: 5vw;  */
     text-align: left;
-    margin-bottom: 40px;
+    /* margin-bottom: min(40px, 5vh); */
     margin-left: calc((100% - min(100%, 1280px)) / 2);
+    padding: 64px 16px;
 }
 
 /* Ensures posts occupy the full width and center-align in the viewport */

diff --git a/components/Blog/Blog.module.css b/components/Blog/Blog.module.css
@@ -6,12 +6,10 @@
     /* min-height: 70vh; */
     /* max-height: 70vh;  */
     /* margin: 5vh; Centering and adding equal top/bottom margins */
-    margin-top: 20px;
-    margin-bottom: 20px;
     /* margin-left: 5vh;
     margin-right: 5vh; */
     /* border: 2px solid #ddd; */
-    border-radius: 20px;
+    border-radius: 1.5rem;
     /* padding: 2rem; */
     background-color: #222222;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@@ -24,22 +22,23 @@
 .blogHeader {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     margin-bottom: 40px;
+    gap: 24px;
 }
 
 .blogTitle {
-    font-size: 2.4rem; /* Scales with viewport width */
+    font-size: 2.4rem;
     color: #ffffff;
 }
 
 .blogDate {
-    font-size: 1.625rem; /* Scales with viewport width */
+    font-size: 1.25rem;
     color: #ffffff;
 }
 
 .blogContent {
-    font-size: 1.625rem;
+    font-size: 1.25rem;
     font-weight: 200;
     display: flex;
     flex-direction: row;
@@ -50,18 +49,29 @@
 }
 
 .blogImage {
-    /* width: 50%; 
-    height: 70%;
-    max-height: 50vh; */
-    max-width: 50%;
-    max-height: 100%;
+    max-width: 400px;
+    max-height: 400px;
+    width: 45%;
+    height: 100%;
     /* object-fit: cover; */
     border-radius: 8px;
-    aspect-ratio: 1;
-
+    aspect-ratio: 1/1;
 }
 
 .blogDescription {
-    flex-grow: 1;
-    overflow-y: auto;
+    align-self: center;
+}
+
+
+@media (max-width: 1280px) {
+    .blogContent {
+        flex-direction: column;
+    }
+    .blogHeader {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .blogImage {
+        width: 100%;
+    }
 }
diff --git a/components/GalleryPhoto/GalleryDisplay.tsx b/components/GalleryPhoto/GalleryDisplay.tsx
@@ -7,7 +7,7 @@ import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 
 export default function GalleryDisplay(props: { urls: { media: { imgix_url: string, name: string, alt_text: string | undefined, width: number, height: number }[]; }; }) {
   return (
-    <div style={{ margin: "20px", marginLeft: "0px" }}>
+    <div style={{ margin: "20px" }}>
       <ResponsiveMasonry
         columnsCountBreakPoints={{ 700: 1, 1400: 2 }}
       >

diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
@@ -1,6 +1,18 @@
 .navbar {
     background-color: #000000;
     color: #ffffff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+    z-index: 1000;
+}
+
+.navbar.open {
+    transform: translateX(0);
 }
 
 @keyframes fadeInAnimation {
@@ -14,8 +26,6 @@
 }
 
 .navbar-container {
-    position: sticky;
-    top: 0px;
     display: flex;
     justify-content: flex-end;
     flex-direction: column;
@@ -25,10 +35,6 @@
     height: 100vh;
 }
 
-/* try editing the font size so that it scales with the screen nicely,
-prob want to scale with screen height or screen width, kind of unsure yet.
-lowk one idea would be maybe try multiplying screen height and screen width
-so you could scale with screen area? this goes for both links and logo*/
 .navbar-logo {
     margin: 0;
     margin-top: 2rem;
@@ -67,17 +73,39 @@ so you could scale with screen area? this goes for both links and logo*/
     text-decoration: none;
     padding: 0.5rem 0.5rem;
     margin: 0.125rem;
+    font-size: 1rem;
     transition: all 0.3s ease;
     position: relative;
 }
 
-/* .nav-link:hover,
-.nav-link.active {
-    background-color: #222222;
-    border-radius: 4px;
-} */
-
 .nav-link:hover,
 .nav-link.active {
     color: #A3A3A3;
+}
+
+.menu-toggle {
+    position: fixed;
+    top: 4vh;
+    right: 4vh;
+    z-index: 1001;
+    background: none;
+    border: none;
+    color: #ffffff;
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: block;
+}
+
+@media (min-width: 769px) {
+    .navbar {
+        position: sticky;
+        top: 0;
+        transform: none;
+        width: 12.5rem;
+        height: 100vh;
+    }
+
+    .menu-toggle {
+        display: none;
+    }
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
@@ -1,9 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import styles from "./Navbar.module.css";
 import Image from "next/image";
+import { Menu, X } from 'lucide-react';
 
 const routes = [
     { href: "/about", label: "About" },
@@ -14,10 +16,19 @@ const routes = [
 
 export default function Navbar() {
     const pathname = usePathname();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
     return (
-        <nav className={styles.navbar}>
-            <div className={styles["navbar-container"]}>
-                <div className={styles.menu}>
+        <>
+            <button className={styles["menu-toggle"]} onClick={toggleMenu}>
+                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+            <nav className={`${styles.navbar} ${isMenuOpen ? styles.open : ''}`}>
+                <div className={styles["navbar-container"]}>
+                    {/* <div className={styles.menu}>
                     <a href="https://www.instagram.com/soul_sisters2025/" target="_blank" rel="noreferrer noopener">
                         <Image src="/Instagram_Glyph_White.png"
                             alt="Instagram Logo"
@@ -39,9 +50,34 @@ export default function Navbar() {
                 </div>
                 <Link href="/" className={styles["navbar-logo"]}>
                     Soul Sisters
-                </Link>
-
-            </div>
-        </nav>
+                </Link> */}
+
+                    <div className={styles.menu}>
+                        <a href="https://www.instagram.com/soul_sisters2025/" target="_blank" rel="noreferrer noopener">
+                            <Image src="/Instagram_Glyph_White.png"
+                                alt="Instagram Logo"
+                                className={styles["instagram-logo"]}
+                                width={100}
+                                height={100}
+                                loading="eager"
+                            />
+                        </a>
+                        {routes.map((route) => (
+                            <Link
+                                key={route.href}
+                                href={route.href}
+                                className={`${styles["nav-link"]} ${pathname === route.href ? styles.active : ""}`}
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                {route.label}
+                            </Link>
+                        ))}
+                    </div>
+                    <Link href="/" className={styles["navbar-logo"]}>
+                        Soul Sisters
+                    </Link>
+                </div>
+            </nav>
+        </>
     );
 }
diff --git a/components/VideoPlayer/VideoPlayer.tsx b/components/VideoPlayer/VideoPlayer.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from "react";
+import {Volume2, VolumeOff} from 'lucide-react';
 
 interface VideoPlayerProps {
     videoUrl: string;
@@ -14,7 +15,7 @@ export default function VideoPlayer({ videoUrl }: VideoPlayerProps) {
     };
 
     return (
-        <div style={{ paddingRight: "24px", background: "black", position: "relative" }}>
+        <div style={{ paddingLeft: "3.2vh", paddingRight: "3.2vh", background: "black", position: "relative" }}>
             <video
                 src={videoUrl}
                 autoPlay
@@ -32,17 +33,17 @@ export default function VideoPlayer({ videoUrl }: VideoPlayerProps) {
                 onClick={toggleMute}
                 style={{
                     position: "absolute",
-                    bottom: "20px",
-                    right: "20px",
-                    padding: "10px",
-                    background: "rgba(0,0,0,0.9)",
+                    bottom: "4vh",
+                    right: "4vh",
+                    // padding: "10px",
+                    // background: "rgba(0,0,0,0.9)",
                     color: "white",
                     border: "none",
                     borderRadius: "8px",
                     cursor: "pointer"
                 }}
             >
-                {isMuted ? "Unmute" : "Mute"}
+                {isMuted ? <VolumeOff size={24} /> : <Volume2 size={24}/>}
             </button>
         </div>
     );

diff --git a/components/about/AboutSection.module.css b/components/about/AboutSection.module.css
@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 1300px) {
+    .container {
+        flex-direction: column;
+    }
+}
diff --git a/components/about/AboutSection.tsx b/components/about/AboutSection.tsx
@@ -1,5 +1,6 @@
 import cosmic from "@/lib/cosmicClient";
 import Image from "next/image";
+import styles from "./AboutSection.module.css";
 
 export default async function AboutSection() {
     const aboutData = await cosmic.objects
@@ -17,14 +18,14 @@ export default async function AboutSection() {
     The sisters are mentored by NAACP Image Award Nominated filmmakers Jeanne Marie - Almonor and John Shulman.`;
     const image_url = `${metadata?.image?.imgix_url}?q=40&auto=format,compress` || "/images/About.JPG";
     return (
-        <div className="min-h-screen w-full flex flex-row items-center">
+        <div className={`min-h-screen w-full items-center ${styles.container}`}>
             {/* Left Section: Heading + Content */}
             <div style={{ margin: "auto", padding: "16px" }}>
                 <div className="flex flex-col max-w-xl">
-                    <h2 className="text-4xl text-left mb-4 ml-4 py-16">
+                    <h2 className="text-5xl text-left mb-4 ml-4 py-16">
                         {title}
                     </h2>
-                    <section className="bg-neutral-800 p-12 rounded-lg shadow-md">
+                    <section className={`rounded-3xl bg-neutral-800 p-12 shadow-md`}>
                         <div className="flex flex-col w-full space-y-4 p-6" style={{ whiteSpace: 'pre-line' }}>
                             <p className="text-gray-200 leading-relaxed text-xl font-extralight">
                                 {description}
@@ -34,7 +35,7 @@ export default async function AboutSection() {
                 </div>
             </div>
             {/* Right Section: Image (Full Height) */}
-            <div className="h-screen justify-self-end">
+            <div className={`rounded-3xl h-screen justify-self-end`}>
                 <Image
                     src={image_url}
                     alt="film-picture"

diff --git a/package-lock.json b/package-lock.json