From 9795717e21349aedd21f2099409603607d03923f Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 7 Jan 2023 13:10:20 -0800
Subject: [PATCH] tune color mix and fix palette layout in portrait display of
landscape images
---
src/components/GalleryImage/GalleryImage.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index b5e9e88..a81794f 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -135,8 +135,9 @@ const GalleryImage = ({ data, location: { state } }) => {
locationString = location.join(", ");
}
const vibrant = getVibrant(image, true);
+ const BLEND = 'hsl'
const darkAccent = chroma
- .mix(vibrant.Vibrant, "hsla(216, 12%, 90%, 1)", 0.7)
+ .mix(vibrant.Vibrant, "hsla(216, 0%, 90%, 1)", 0.6, BLEND)
.hex();
const canonicalSize = getCanonicalSize(image);
@@ -162,7 +163,7 @@ const GalleryImage = ({ data, location: { state } }) => {
className="text-black transition-colors"
// style={getHelmetSafeBodyStyle(vibrant)}
style={getHelmetSafeBodyStyle({
- background: chroma.mix(vibrant.Vibrant, "white", 0.7).hex(),
+ background: chroma.mix(vibrant.Vibrant, "white", 0.7, BLEND).hex(),
})}
/>
</Helmet>
@@ -263,9 +264,8 @@ const GalleryImage = ({ data, location: { state } }) => {
<div
className={classnames(
"grid grid-cols-6 h-[40px] w-[240px]",
- ar <= 1 && "self-end"
+ ar <= 1 ? "self-end" : "portrait:self-end"
)}
- style={getVibrantStyle(vibrant)}
>
<div
style={{ background: `rgba(${vibrant.Vibrant.join(",")})` }}