From a5ef0eff2cb74283c1f086bec66c4dac860c98d1 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Fri, 18 Jun 2021 12:16:33 -0700
Subject: [PATCH] Rearrange portrait gallery when browser is also portrait TODO
 re-right align

---
 gatsby/package.json                   | 2 +-
 gatsby/src/components/GalleryImage.js | 8 +++++---
 gatsby/tailwind.config.js             | 2 ++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/gatsby/package.json b/gatsby/package.json
index 39ff4d1..7c3ebf3 100644
--- a/gatsby/package.json
+++ b/gatsby/package.json
@@ -14,7 +14,7 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "lint-fix": "eslint --fix --ext .jsx,.js src",
-    "deploy": "yarn build && rsync -azP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website-staging"
+    "deploy": "yarn build && rsync -rzP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website-staging"
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
diff --git a/gatsby/src/components/GalleryImage.js b/gatsby/src/components/GalleryImage.js
index c2ae7c7..d989e8a 100644
--- a/gatsby/src/components/GalleryImage.js
+++ b/gatsby/src/components/GalleryImage.js
@@ -27,6 +27,8 @@ const GalleryImage = ({ data }) => {
   const meta = getMeta(image);
   const vibrant = getVibrant(image, true);
 
+  const orientationClasses = ar > 1 ? 'flex-col' : 'landscape:flex-row-reverse portrait:flex-col';
+  console.log(ar, orientationClasses);
   const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
   return (<>
     <Helmet>
@@ -37,8 +39,8 @@ const GalleryImage = ({ data }) => {
       />
     </Helmet>
     <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
-    <div className="min-h-screen flex flex-col justify-center">
-      <div className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}>
+    <div className="min-h-screen pt-4 flex flex-col justify-center">
+      <div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage
             alt={name}
@@ -53,7 +55,7 @@ const GalleryImage = ({ data }) => {
               // minHeight: '500px',
             }} />
         </div>
-        <div className={classnames('flex-shrink-0 mr-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
+        <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
           <div className="flex-auto mr-1">
             {hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
             <p className="mr-1">{meta.iptc.caption}</p>
diff --git a/gatsby/tailwind.config.js b/gatsby/tailwind.config.js
index 3a3657b..656503f 100644
--- a/gatsby/tailwind.config.js
+++ b/gatsby/tailwind.config.js
@@ -10,6 +10,8 @@ module.exports = {
       'lg': '1024px',
       'xl': '1280px',
       '2xl': '1536px',
+      'portrait': {'raw': '(orientation: portrait)'},
+      'landscape': {'raw': '(orientation: landscape)'},
     },
     spacing: {
       '0': '0px',