From b02a548b17695e0db83e3a19007a5a9c1de8da02 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 20 Jun 2021 19:54:52 -0700
Subject: [PATCH] add G shortcut to jump to gallery

---
 src/components/GalleryImage.js | 9 ++++++---
 src/pages/index.js             | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage.js
index ef97750..be8bbfa 100644
--- a/src/components/GalleryImage.js
+++ b/src/components/GalleryImage.js
@@ -32,6 +32,9 @@ const GalleryImage = ({ data, pageContext }) => {
         }
         return;
       }
+      case 'KeyG': {
+        navigate('/photogallery/');
+      }
       }
     };
     document.addEventListener('keydown', keyListener);
@@ -74,15 +77,15 @@ const GalleryImage = ({ data, pageContext }) => {
         <Link
           className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
           to="/photogallery/"
-        >gallery</Link>
+        >gallery <span className="bg-gray-300 text-black">g</span></Link>
         {pageContext.prevImage && <Link
           className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
           to={`/photogallery/${pageContext.prevImage}/`}
-        >previous</Link>}
+        >previous <span className="bg-gray-300 text-black">&#11104;</span></Link>}
         {pageContext.nextImage && <Link
           className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
           to={`/photogallery/${pageContext.nextImage}/`}
-        >next</Link>}
+        >next <span className="bg-gray-300 text-black">&#11106;</span></Link>}
       </nav>
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
diff --git a/src/pages/index.js b/src/pages/index.js
index d56fa05..ae320e3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -92,7 +92,8 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
     </Helmet>
     {/* WIP: ipad portrait hits md breakpoint, looks bad */}
     <main
-      className={classnames('font-serif hero', ar > 1 ? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')}
+      className={classnames('font-serif hero', ar > 1
+        ? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')}
     >
       {isClient ? 
         <GatsbyImage