From 79b2fa9a63f734a6f98a98dc49707abba4b200a0 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuckd@axosoft.com>
Date: Fri, 18 Jun 2021 19:04:40 -0700
Subject: [PATCH] improve gallery image page layout
---
gatsby/gatsby-node.js | 9 ---------
gatsby/src/components/GalleryImage.js | 4 ++--
gatsby/src/pages/index.js | 4 ----
3 files changed, 2 insertions(+), 15 deletions(-)
diff --git a/gatsby/gatsby-node.js b/gatsby/gatsby-node.js
index e36a1e0..8222741 100644
--- a/gatsby/gatsby-node.js
+++ b/gatsby/gatsby-node.js
@@ -38,20 +38,11 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
}
}
- // console.log('asdf', JSON.stringify(vibrantData.Vibrant.getTitleTextColor()));
-
const vibrant = R.map((swatch) => ({
rgb: swatch.getRgb(),
titleTextColor: swatch.getTitleTextColor(),
bodyTextColor: swatch.getBodyTextColor(),
})
- // ({
- // // rgb: swatch.getRgb(),
- // // hsl: swatch.getHsl(),
- // // hex: swatch.getHex(),
- // // // titleTextColor: swatch.getTitleTextColor(),
- // // // bodyTextColor: swatch.getBodyTextColor(),
- // })
, vibrantData);
return {
diff --git a/gatsby/src/components/GalleryImage.js b/gatsby/src/components/GalleryImage.js
index d989e8a..fd6fa17 100644
--- a/gatsby/src/components/GalleryImage.js
+++ b/gatsby/src/components/GalleryImage.js
@@ -27,7 +27,7 @@ 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';
+ const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
console.log(ar, orientationClasses);
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
return (<>
@@ -40,7 +40,7 @@ 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 pt-4 flex flex-col justify-center">
- <div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}>
+ <div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0">
<GatsbyImage
alt={name}
diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js
index 5c23b79..bfe8800 100644
--- a/gatsby/src/pages/index.js
+++ b/gatsby/src/pages/index.js
@@ -74,7 +74,6 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
- {/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
</li>
</ul>
</div>
@@ -109,10 +108,7 @@ export const query = graphql`
childImageSharp {
gatsbyImageData(
layout: FULL_WIDTH
- # placeholder: BLURRED
- # placeholder: TRACED_SVG
placeholder: NONE
- # blurredOptions: {width: 50}
breakpoints: [750, 1080, 1366, 1920, 2560]
)
fields {