update gallery aesthetics; add gallery image zoom mode

src/components/GalleryImage/GalleryImage.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { graphql, navigate, Link } from "gatsby";
 import {
   getAspectRatio,
@@ -29,6 +29,8 @@ const GalleryImage = ({ data, pageContext }) => {
   const image = data.allFile.edges[0].node;
   const ar = getAspectRatio(image);
 
+  const [zoom, setZoom] = useState(false);
+
   React.useEffect(() => {
     const keyListener = (e) => {
       switch (e.code) {
@@ -73,6 +75,8 @@ const GalleryImage = ({ data, pageContext }) => {
     ar > 1
       ? "flex-col mx-auto"
       : "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
+  const verticalPad = ar > 1 ? "170px" : "70px";
+
   const shutterSpeed = React.useMemo(
     () => getShutterFractionFromExposureTime(meta.ExposureTime || 0),
     [meta]
@@ -126,19 +130,27 @@ const GalleryImage = ({ data, pageContext }) => {
           )}
         </nav>
         <div className={classnames("flex", orientationClasses)}>
-          <div className="flex-grow-0">
+          <div
+            className="flex-grow-0 mb-2 overflow-hidden"
+            style={{
+              maxWidth: zoom
+                ? "unset"
+                : `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
+              width: zoom ? `max(calc(100vw - 16px), calc(100vh * ${ar}))` : 'unset'
+              // minHeight: zoom ? "100vh" : "unset",
+            }}
+          >
             <GatsbyImage
               alt={name}
-              className=""
+              className={classnames(
+                "border-4 border-muted-light",
+                zoom ? "cursor-zoom-out" : "cursor-zoom-in"
+              )}
               image={getImage(image)}
               key={image.base}
               loading="eager"
               objectFit="contain"
-              style={{
+              onClick={() => setZoom((_zoom) => !_zoom)}
-                maxWidth: `calc(max(90vh, 500px) * ${ar})`,
-                maxHeight: "90vh",
-                // minHeight: '500px',
-              }}
             />
           </div>
           <div
@@ -163,7 +175,9 @@ const GalleryImage = ({ data, pageContext }) => {
                 href={image.publicURL}
                 onClick={() => {
                   try {
-                    window.plausible("Download Wallpaper", { props: { image: image.base } });
+                    window.plausible("Download Wallpaper", {
+                      props: { image: image.base },
+                    });
                   } catch {
                     // do nothing
                   }
@@ -178,12 +192,27 @@ const GalleryImage = ({ data, pageContext }) => {
                 style={{ width: 30 }}
               ></div>
             }
-            <div className="flex flex-col">
+            <div className="flex flex-col items-end">
               <MetadataItem
                 data={dateTaken.toLocaleDateString()}
                 icon="calendar-outline"
                 title="date taken"
               />
+              <div className="flex justify-between w-[350px]">
+                <MetadataItem
+                  data={shutterSpeed}
+                  icon="stopwatch-outline"
+                  title="shutter speed"
+                />
+                {meta.FNumber && (
+                  <MetadataItem
+                    data={`f/${meta.FNumber}`}
+                    icon="aperture-outline"
+                    title="aperture"
+                  />
+                )}
+                <MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
+              </div>
               <MetadataItem
                 data={locationString}
                 icon="map-outline"
@@ -208,19 +237,6 @@ const GalleryImage = ({ data, pageContext }) => {
                   title="lens"
                 />
               )}
-              <MetadataItem
-                data={shutterSpeed}
-                icon="stopwatch-outline"
-                title="shutter speed"
-              />
-              {meta.FNumber && (
-                <MetadataItem
-                  data={`f/${meta.FNumber}`}
-                  icon="aperture-outline"
-                  title="aperture"
-                />
-              )}
-              <MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
             </div>
           </div>
         </div>

src/components/GalleryImage/MetadataItem.js

@@ -2,9 +2,9 @@ import React from "react";
 
 const MetadataItem = ({ icon, data, title }) =>
   data ? (
-    <div className="flex justify-end items-end mr-2">
+    <div className="flex justify-end items-end mr-2 font-mono">
       <div className="flex flex-col items-end my-2">
-        <span className="font-mono text-sm opacity-60 m-0 ">{title}</span>
+        <span className="text-sm opacity-60 m-0 ">{title}</span>
         <span className="text-lg leading-4">{data}</span>
       </div>
       <span className="icon-offset ml-2 mt-1 text-2xl">

src/styles/global.css

@@ -32,6 +32,14 @@
   .scroll-padding-6 {
     scroll-padding: theme("spacing.6");
   }
+  .cursor-zoom-in {
+    cursor: -webkit-zoom-in;
+    cursor: zoom-in;
+  }
+  .cursor-zoom-out {
+    cursor: -webkit-zoom-out;
+    cursor: zoom-out;
+  }
   @supports (backdrop-filter: none) {
     .blurred-or-opaque-bg-1 {
       @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;

src/utils.js

@@ -25,7 +25,7 @@ export const getHelmetSafeBodyStyle = (vibrant, screenHeight) => {
     "--vibrant": vibrant.Vibrant,
     "--dark-vibrant": vibrant.DarkVibrant,
     "--light-vibrant": vibrant.LightVibrant,
-    "--height-screen": screenHeight ? `${screenHeight}px` : '100vh'
+    "--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
   };
   if (typeof window === "undefined") {
     return style;
@@ -45,7 +45,10 @@ const gcd = (a, b) => {
 
 export const getShutterFractionFromExposureTime = (exposureTime) => {
   if (exposureTime === 0.016666666666666666) {
-    return '1/60'
+    return "1/60";
+  }
+  if (exposureTime === 0.0011111111111111111) {
+    return "1/900";
   }
   let fraction = exposureTime;
   const len = fraction.toString().length - 2;
@@ -58,7 +61,7 @@ export const getShutterFractionFromExposureTime = (exposureTime) => {
   numerator /= divisor;
   denominator /= divisor;
   if (numerator > 1) {
-    return `${exposureTime}`
+    return `${exposureTime}`;
   }
   return `${numerator}/${denominator}`;
 };

tailwind.config.js

@@ -2,7 +2,7 @@ const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}"],
-  mode: 'jit',
+  mode: "jit",
   // darkMode: 'media', // or 'media' or 'class'
   theme: {
     screens: {
@@ -33,17 +33,17 @@ module.exports = {
     },
     extend: {
       height: {
-        "actual-screen": "var(--height-screen)"
+        "actual-screen": "var(--height-screen)",
       },
       dropShadow: {
-        'dark': '0 1px 2px rgba(0, 0, 0, 0.8)',
+        dark: "0 1px 2px rgba(0, 0, 0, 0.8)",
       },
       fontSize: {
-        'huge-1': '95px',
+        "huge-1": "95px",
-        'huge-2': 'max(7.8vw, 120px)'
+        "huge-2": "max(7.8vw, 120px)",
       },
       colors: {
-        buzzwordsPrimary: '#F6C54B',
+        buzzwordsPrimary: "#F6C54B",
         vibrant: {
           DEFAULT: ({ opacityVariable, opacityValue }) => {
             if (opacityValue !== undefined) {