Navbar fixes (#62)

* fix nav

* fix header

* change tracks sizing

Author: d0w

app/page.tsx

@@ -12,20 +12,21 @@ const Home = () => {
     <Background>
       <main className="flex flex-col">
         <Navbar routes={routes} />
-        <Header />
+        <div id="header" className="w-full h-screen">
+          <Header />
+        </div>
         <div id="theme" className="flex flex-col items-center justify-center h-screen text-white">
           <RetroRemix />
         </div>
-        
+
         <div className="flex flex-col items-center justify-center min-h-screen text-white"></div>
-        {/* TODO: move to correct spot -- leaving tracks here for now */}
-        <div className="min-h-screen w-full">
+        <div className="h-auto w-full">
           <Tracks />
         </div>
         <div className="flex flex-col items-center justify-center min-h-screen text-white"></div>
         <div id="about" className="flex flex-col items-center justify-center min-h-screen text-white">section</div>
         <div id="schedule" className="flex flex-col items-center justify-center min-h-screen text-white mt-[150px]">
-          <Schedule/>
+          <Schedule />
         </div>
         <div id="faqs" className="flex flex-col items-center justify-center min-h-screen text-white">section</div>
         <div className="flex flex-col items-center justify-center min-h-screen text-white"><ApplyNow /></div>

app/tracks/Tracks.tsx

@@ -10,10 +10,10 @@ import SectionTitle from "@/components/SectionTitle";
 
 const Tracks = () => {
   return (
-    <div>
+    <div className="mx-5 md:mx-40">
       {/* Title for the section */}
       <div className="flex justify-center items-center">
-        <div className="relative w-1/2 isolate">
+        <div className="relative w-3/4 md:w-1/2 isolate">
           <Image
             src={sunglare}
             alt="sunglare"
@@ -28,7 +28,7 @@ const Tracks = () => {
         </div>
       </div>
 
-      <div>
+      <div className="mt-10">
         <Track trackNum={1} imgSrc={leaf} alignment={1} />
         <Track trackNum={2} imgSrc={orange} alignment={3} />
         <Track trackNum={3} imgSrc={disk} alignment={1} />
@@ -38,4 +38,4 @@ const Tracks = () => {
   );
 };
 
-export default Tracks;
+export default Tracks;

app/tracks/components/track.tsx

@@ -38,21 +38,21 @@ const Track = ({ trackNum, imgSrc, alignment }: TrackProps) => {
         <Image
           src={imgSrc}
           alt={`Track ${trackNum}`}
-          className="w-1/2 h-auto object-cover track-image"
+          className="md:w-1/2 h-auto object-cover track-image"
           onClick={() => setExpandedTrack(!expandedTrack)}
         />
         {expandedTrack ? (
           <Image
             src={alignment === 1 ? expandedBlueLeft : alignment === 3 ? expandedBlueRight : expandedBlueLeft}
             alt="Expanded"
-            className="w-1/2 h-auto object-cover track-image img-shadow"
+            className="md:w-1/2 h-auto object-cover track-image img-shadow"
             onClick={() => setExpandedTrack(false)}
           />
         ) : (
           <Image
             src={alignment === 1 ? expandWhiteLeft : alignment === 3 ? expandWhiteRight : expandWhiteLeft}
             alt="Expand"
-            className="w-1/2 h-auto object-cover track-image img-shadow"
+            className="md:w-1/2 h-auto object-cover track-image img-shadow"
             onClick={() => setExpandedTrack(true)}
           />
         )}

components/Background.tsx

@@ -64,7 +64,7 @@ const Background = ({ showCity = true, className, children }: BackgroundProps):
         alt="Waterbead"
       />
 
-      <div className="relative z-20 pt-1">
+      <div className="relative z-20">
         {children}
       </div>
     </div>

components/Header.tsx

@@ -10,14 +10,14 @@ import LoginSponsorButton from "@/components/LoginSponsorButton";
 
 const Header = () => {
   return (
-    <header className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-visible">
+    <header className="relative w-full h-full flex flex-col items-center justify-center overflow-visible">
       {/* Background splash effect */}
       <div className="absolute inset-0 z-0">
         <Image
           src={splash}
           alt="Water splash background"
           fill
-          className="scale-150 overflow-visible opacity-70 translate-x-10 md:translate-x-60 lg:translate-y-[50%] pointer-events-none"
+          className="scale-150 overflow-visible opacity-70 translate-x-10 md:translate-x-60 pointer-events-none"
           priority
         />
       </div>
@@ -66,7 +66,7 @@ const Header = () => {
         />
       </div>
 
-      <div className="absolute left-[-140px] md:left-[-300px] top-[70%] md:top-[62%] -translate-y-1/2 lg:mt-[20%] z-20 w-[320px] h-[320px] md:w-[1020px] md:h-[1020px]">
+      <div className="absolute left-[-140px] md:left-[-300px] top-[70%] md:top-[62%] -translate-y-1/2 z-20 w-[320px] h-[320px] md:w-[1020px] md:h-[1020px]">
         <Image
           src={fishFlower}
           alt="Fish with flower"
@@ -76,7 +76,7 @@ const Header = () => {
         />
       </div>
 
-      <div className="absolute right-0 top-1/2 -translate-y-1/2 z-20 w-[120px] h-[120px] md:w-[360px] md:h-[360px] lg:mt-[20%]">
+      <div className="absolute right-0 top-1/2 -translate-y-1/2 z-20 w-[120px] h-[120px] md:w-[360px] md:h-[360px]">
         <Image
           src={fishComputer}
           alt="Fish with computer"
@@ -148,7 +148,7 @@ const Header = () => {
       </div>
 
 
-      <div className="relative z-50 mt-8 flex flex-col gap-4 items-center pointer-events-auto lg:mt-[30%]"
+      <div className="relative z-50 mt-8 flex flex-col gap-4 items-center pointer-events-auto"
       >
         <LoginSponsorButton></LoginSponsorButton>
       </div>

components/Navbar.tsx

@@ -57,14 +57,14 @@ const Navbar = ({ routes }: NavbarProps) => {
 
   return (
     <>
-      <nav className="w-full items-center justify-between px-10 md:py-5 py-10 md:fixed flex z-100">
-        <div>
+      <nav className="absolute w-full items-center justify-between px-10 py-5 md:fixed flex z-100">
+        <div className="">
           <Link href="/">
-            <Image src={logo} alt="logo" />
+            <Image src={logo} alt="logo" className="md:w-16 md:h-16 w-12 h-12" />
           </Link>
 
           <Link href="https://mlh.io" target="_blank" rel="noreferrer">
-            <Image src={MLHTrustBadge} alt="MLH Trust Badge" className="h-30 w-auto -top-2 left-[45vw] md:left-[150px] absolute" />
+            <Image src={MLHTrustBadge} alt="MLH Trust Badge" className="h-15 md:h-30 w-auto top-0 left-[110px] md:left-[150px] absolute" />
           </Link>
         </div>
         <div className="hidden md:flex gap-[1vw] px-4">

components/SectionTitle.tsx

@@ -4,7 +4,6 @@ import glass from "@/public/trackTitle.svg";
 const SectionTitle = ({ title }: { title: string }) => {
   return (
     <div className="flex justify-center items-center">
-      {/* <div className="relative w-1/2 isolate"> */}
       <Image
         src={glass}
         alt="Title"
@@ -16,7 +15,6 @@ const SectionTitle = ({ title }: { title: string }) => {
       >
         {title}
       </span>
-      {/* </div> */}
     </div>
   );
 };