add homepage button to view image details and change back buttons to actually go back

src/components/GalleryImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql, Link } from 'gatsby';
+import { graphql, Link, navigate } from 'gatsby';
 import {
   getAspectRatio,
   getMeta,
@@ -39,7 +39,11 @@ const GalleryImage = ({ data }) => {
         style={getVibrantToHelmetSafeBodyStyle(vibrant)}
       />
     </Helmet>
-    <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
+    <button
+      className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
+      onClick={() => navigate(-1)}
+      type="button"
+    >back</button>
     <div className="min-h-screen pt-5 flex flex-col justify-center">
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
@@ -58,28 +62,33 @@ const GalleryImage = ({ data }) => {
         </div>
         <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-5 flex-col flex-auto text-right')}>
           <div className="flex-auto mr-2">
-            {hasName(image) && <h1 className="text-2xl mt-3 font-serif">{name}</h1>}
+            <p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
+            {hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
             <p className="mr-2">{meta.iptc.caption}</p>
           </div>
-          {(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
+          {(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="location">
-            <span className="relative mr-1" style={{top: '2px'}}>
+            <span className="icon-offset mr-1">
               <ion-icon name="location-sharp"></ion-icon>
             </span>
             <span className="mr-1">{locationString}</span>
           </div>}
-          {shutterSpeed && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
+          {shutterSpeed && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="shutter speed">
-            <span className="relative mr-1" style={{top: '2px'}}><ion-icon name="stopwatch-sharp"></ion-icon></span>
+            <span className="icon-offset mr-1">
+              <ion-icon name="stopwatch-sharp"></ion-icon>
+            </span>
             <span className="mr-1">{shutterSpeed}</span>
           </div>}
-          {meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
+          {meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="aperture">
-            <span className="relative mr-1" style={{top: '2px'}}>
+            <span className="icon-offset mr-1">
               <ion-icon name="aperture-sharp"></ion-icon>
             </span>
             <span className="mr-1">f/{meta.exif.FNumber}</span>
           </div>}
-          {meta.exif.ISO && <div className="align-baseline ml-2 text-lg">
+          {meta.exif.ISO && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="ISO">
-            <span className="font-mono" style={{fontSize: '12px'}}>ISO</span>
+            <span className="icon-offset mr-1">
-            <span className="mx-1">{meta.exif.ISO}</span>
+              <ion-icon name="film-outline"></ion-icon>
+            </span>
+            <span className="mr-1">{meta.exif.ISO}</span>
           </div>}
         </div>
       </div>

src/pages/index.js

@@ -115,15 +115,40 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
               </ul>
             </div>
           </section>
-          <div>
+          <div className="align-top">
+            <Link
+              className={classnames(
+                'hover:underline icon-offset inline-block p-2 px-4 my-3 mr-3 text-3xl rounded-md border-2 font-bold font-serif',
+                isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} 
+              style={{top: '5px'}}
+              title="view image details"
+              to={`/photogallery/${image.base}/`}
+            >
+              <span className="icon-offset"><ion-icon name="image"></ion-icon></span>
+              <span
+                className="absolute text-muted-dark"
+                style={{
+                  fontSize: 18,
+                  bottom: 6,
+                  right: 9,
+                  height: 18,
+                  width: 18,
+                  background: 'rgb(var(--light-muted))',
+                  borderRadius: '50%',
+                  transform: 'rotate(-15deg)',
+                }}
+              ><span className="absolute" style={{top: '-8px'}}><ion-icon name="arrow-redo-circle-sharp"></ion-icon></span></span>
+            </Link>
             <button
               className={classnames(
-                'hover:underline inline-block p-3 px-5 my-3 mr-3 text-lg rounded-md border-2 font-bold font-serif',
+                'hover:underline icon-offset inline-block p-2 px-4 my-3 mr-3 text-3xl rounded-md border-2 font-bold font-serif',
                 isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
               onClick={shuffleImage} 
+              style={{top: '5px'}}
+              title="shuffle image"
               type="button"
             >
-              Shuffle <span className="relative" style={{top: '2px'}}><ion-icon name="shuffle"></ion-icon></span>
+              <span className="icon-offset"><ion-icon name="shuffle"></ion-icon></span>
             </button>
             <Link
               className={classnames(

src/pages/photogallery.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { graphql } from 'gatsby';
-import { Link } from 'gatsby';
+import { navigate } from 'gatsby';
 import { Helmet } from 'react-helmet';
 
 import MasonryGallery from '../components/MasonryGallery';
@@ -20,7 +20,11 @@ const GalleryPage = ({ data }) => {
       <body className="bg-black text-white" />
     </Helmet>
     <div className="bg-black min-h-screen 2xl:container">
-      <Link className="hover:underline hover:text-blue-200 text-blue-300 arrow-left-before" to="/">home</Link>
+      <button
+        className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
+        onClick={() => navigate(-1)}
+        type="button"
+      >back</button>
       <h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
       <div className="mx-auto">
         <MasonryGallery

src/styles/global.css

@@ -13,6 +13,10 @@
   transition: color .2s, background-color .2s;
 } */
 @layer utilities {
+  .icon-offset {
+    position: relative;
+    top: 2px;
+  }
   .scroll-snap-none {
     scroll-snap-type: none;
   }