From 4e7fd5cc9d92c844b711c8e0acc522b300763e97 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 20 Jun 2021 11:29:59 -0700
Subject: [PATCH] use portrait/landscape to flip hero layout

---
 src/pages/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index bbf453a..d56fa05 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -90,14 +90,15 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
         style={getVibrantToHelmetSafeBodyStyle(vibrant)}
       />
     </Helmet>
+    {/* WIP: ipad portrait hits md breakpoint, looks bad */}
     <main
-      className={classnames('font-serif hero', ar > 1 ? 'flex md:grid flex-col' : 'grid md:flex md: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
           alt=""
           className={classnames(
-            ar > 1 ? 'md:h-screen h-two-thirds-vw' : 'h-screen w-full md:w-1/2',
+            ar > 1 ? 'landscape:h-screen portrait:h-two-thirds-vw' : 'h-screen portrait:w-full landscape:w-1/2',
           )}
           image={getImage(image)}
           loading="eager"