From 1968908e2414c9c62c95219bd27b394cbc917432 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Thu, 17 Nov 2022 21:25:40 -0800
Subject: [PATCH] link homepage images

---
 src/components/MasonryGallery.tsx |  4 +---
 src/components/Nav.tsx            |  2 +-
 src/pages/index.tsx               | 26 ++++++++++++++++++--------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/MasonryGallery.tsx b/src/components/MasonryGallery.tsx
index 4c85e9f..fdcf548 100644
--- a/src/components/MasonryGallery.tsx
+++ b/src/components/MasonryGallery.tsx
@@ -50,9 +50,7 @@ const MasonryGallery = ({
   const { breakpoint } = useBreakpoint(breakpoints, 'xs')
 
   // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 51 ~ breakpoint", breakpoint)
   const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`;
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 55 ~ galleryWidth", galleryWidth)
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),
@@ -161,7 +159,7 @@ const MasonryGallery = ({
                   )`
                 : "",
             }}
-            to={`/photogallery/${image.base}`}
+            to={`/photogallery/${image.base}/`}
           >
             {debugHue && (
               <span className="text-white z-20 absolute bg-black">
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 7522763..e52ba92 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -84,7 +84,6 @@ const Nav = ({ internalLinks, className }: NavProps) => {
         "my-4 flex flex-col-reverse md:flex-row items-center w-full font-sans px-4 md:px-8",
         className
       )}
-      style={{ zIndex: 100 }}
     >
       <div className="md:flex items-baseline flex-auto">
         <h1 className="font-bold mr-2">Chuck Dries</h1>
@@ -107,6 +106,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
             ))}
         </ul>
         <Popover
+          containerClassName="z-30 p-1"
           content={<ExternalLinks />}
           isOpen={linksMenu}
           onClickOutside={() => setLinksMenu(false)}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 20345c2..2bd4f41 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { graphql, PageProps } from "gatsby";
+import { graphql, Link, PageProps } from "gatsby";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import { Helmet } from "react-helmet";
 // import { take } from "ramda";
@@ -90,13 +90,23 @@ const IndexPage = ({
             { href: "/photogallery/", label: "Gallery" },
           ]}
         />
-        {isClient && <GatsbyImage
-          alt=""
-          className="flex-auto m-4 md:m-8 mt-0 md:mt-0"
-          image={img!}
-          loading="eager"
-          objectFit={browserIsLandscape ? "cover" : "contain"}
-        />}
+        {isClient && (
+          <Link
+            className="flex-auto flex flex-col  m-4 md:m-8 mt-0 md:mt-0"
+            to={`/photogallery/${image.base}/`}
+          >
+            <GatsbyImage
+              alt=""
+              className="h-[calc(100vh-160px)]" // reeeeee
+              image={img!}
+              loading="eager"
+              objectFit={browserIsLandscape ? "cover" : "contain"}
+              style={{
+                height: "calc(100vh-160px)",
+              }}
+            />
+          </Link>
+        )}
       </main>
     </>
   );