Fixed Mobile Header and Dropdown Spcaing + Changed Landing Page Photos

Author: ashwinparthas

public/photos/nature/_DSC0539.JPEG public/photos/Big_Sur.JPEGpublic/photos/nature/_DSC0539.JPEG renamed to public/photos/Big_Sur.JPEG

@@ -502,6 +502,48 @@ img {
   }
 }
 
+@media (max-width: 640px) {
+  .category-header {
+    height: 56px;
+    padding: 0 14px;
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .category-header-spacer {
+    width: 24px;
+  }
+
+  .category-name {
+    font-size: 19px;
+    letter-spacing: 0.04em;
+  }
+
+  .category-switch-button {
+    padding: 6px 8px;
+    font-size: 0.55rem;
+    letter-spacing: 0.18em;
+  }
+
+  .category-switch-menu {
+    right: 0;
+    left: auto;
+    transform: none;
+    min-width: 140px;
+    top: calc(100% + 8px);
+  }
+
+  .category-switch-link {
+    font-size: 0.56rem;
+    padding: 7px;
+  }
+}
+
+@media (max-width: 420px) {
+  .category-name {
+    font-size: 17px;
+  }
+}
+
 @media (max-width: 600px) {
   .category-grid {
     column-count: 1;

public/photos/SF_House.PNG public/photos/street/SF_House.PNGpublic/photos/SF_House.PNG renamed to public/photos/street/SF_House.PNG

@@ -12,7 +12,6 @@ const images = [
   { src: "/photos/nature/_DSC0450.JPEG", alt: "DSC0450" },
   { src: "/photos/nature/_DSC0473.JPEG", alt: "DSC0473" },
   { src: "/photos/nature/_DSC0535.JPEG", alt: "DSC0535" },
-  { src: "/photos/nature/_DSC0539.JPEG", alt: "DSC0539" },
   { src: "/photos/nature/_DSC0543.JPEG", alt: "DSC0543" },
   { src: "/photos/nature/_DSC0550.JPEG", alt: "DSC0550" },
   { src: "/photos/nature/_DSC0609.JPEG", alt: "DSC0609" },

src/app/globals.css

@@ -5,34 +5,34 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { withBasePath } from "@/lib/basePath";
 
 type Photo = {
-  category: "Landscape" | "Nature" | "Street";
+  title: string;
   src: string;
   featured: boolean;
 };
 
 const photos: Photo[] = [
   {
-    category: "Landscape",
+    title: "Brooklyn Bridge",
     src: "/photos/Bridge.png",
     featured: true
   },
   {
-    category: "Nature",
+    title: "Monarch Butterfly",
     src: "/photos/Butterfly.png",
     featured: true
   },
   {
-    category: "Landscape",
+    title: "Dreamy Subway Station",
     src: "/photos/Dreamy_Subway.PNG",
     featured: true
   },
   {
-    category: "Street",
-    src: "/photos/SF_House.PNG",
+    title: "Big Sur Waves",
+    src: "/photos/Big_Sur.JPEG",
     featured: true
   },
   {
-    category: "Landscape",
+    title: "Wilhelmina Windmill",
     src: "/photos/Windmill.png",
     featured: true
   },
@@ -309,9 +309,6 @@ export default function Home() {
             <img
               src={withBasePath(lightbox.items[lightbox.index].src)}
             />
-            <span className="meta">
-              {lightbox.items[lightbox.index].category}
-            </span>
           </figure>
         </div>
       )}

src/app/nature/page.tsx

@@ -2,6 +2,7 @@ import CategoryGallery from "@/components/CategoryGallery";
 
 const images = [
   { src: "/photos/street/Phone_Booth.JPG", alt: "Phone Booth" },
+  { src: "/photos/street/SF_House.PNG", alt: "SF House" },
   { src: "/photos/street/_DSC0354.PNG", alt: "DSC0354" },
   { src: "/photos/street/_DSC0502.PNG", alt: "DSC0502" },
   { src: "/photos/street/_DSC0514.PNG", alt: "DSC0514" },