diff --git a/app/about/page.tsx b/app/about/page.tsx index ae232d0..bb5039e 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -5,10 +5,10 @@ import { Suspense } from 'react'; export default function About() { return ( }> -
+ {/*
*/} {/* */} -
+ {/*
*/} ); } \ No newline at end of file diff --git a/app/news/page.module.css b/app/news/page.module.css index 5582ee6..b8b4057 100644 --- 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 index 18e2b07..b1fe3b6 100644 --- 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%; + } } \ No newline at end of file diff --git a/components/GalleryPhoto/GalleryDisplay.tsx b/components/GalleryPhoto/GalleryDisplay.tsx index 3b2230a..6a63fc7 100644 --- 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 ( -
+
diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index f48f7de..b785795 100644 --- 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; + } } \ No newline at end of file diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx index 4f8bd62..fe2dae7 100644 --- 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 ( - + ); } \ No newline at end of file diff --git a/components/VideoPlayer/VideoPlayer.tsx b/components/VideoPlayer/VideoPlayer.tsx index c173439..4c1c610 100644 --- 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 ( -
+
); diff --git a/components/about/AboutSection.module.css b/components/about/AboutSection.module.css new file mode 100644 index 0000000..3b06b44 --- /dev/null +++ b/components/about/AboutSection.module.css @@ -0,0 +1,10 @@ +.container { + display: flex; + flex-direction: row; +} + +@media (max-width: 1300px) { + .container { + flex-direction: column; + } +} \ No newline at end of file diff --git a/components/about/AboutSection.tsx b/components/about/AboutSection.tsx index d668aba..2372041 100644 --- 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 ( -
+
{/* Left Section: Heading + Content */}
-

+

{title}

-
+

{description} @@ -34,7 +35,7 @@ export default async function AboutSection() {

{/* Right Section: Image (Full Height) */} -
+