chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tune color mix and fix palette layout in portrait display of landscape images

Browse Source
This commit is contained in:
Chuck Dries 2023-01-07 13:10:20 -08:00
parent ba82aa78cf
commit 9795717e21
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/GalleryImage/GalleryImage.js
View File

@ -135,8 +135,9 @@ const GalleryImage = ({ data, location: { state } }) => {
locationString = location.join(", "); locationString = location.join(", ");
} }
const vibrant = getVibrant(image, true); const vibrant = getVibrant(image, true);
const BLEND = 'hsl'
const darkAccent = chroma 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(); .hex();
const canonicalSize = getCanonicalSize(image); const canonicalSize = getCanonicalSize(image);
@ -162,7 +163,7 @@ const GalleryImage = ({ data, location: { state } }) => {
className="text-black transition-colors" className="text-black transition-colors"
// style={getHelmetSafeBodyStyle(vibrant)} // style={getHelmetSafeBodyStyle(vibrant)}
style={getHelmetSafeBodyStyle({ style={getHelmetSafeBodyStyle({
background: chroma.mix(vibrant.Vibrant, "white", 0.7).hex(), background: chroma.mix(vibrant.Vibrant, "white", 0.7, BLEND).hex(),
})} })}
/> />
</Helmet> </Helmet>
@ -263,9 +264,8 @@ const GalleryImage = ({ data, location: { state } }) => {
<div <div
className={classnames( className={classnames(
"grid grid-cols-6 h-[40px] w-[240px]", "grid grid-cols-6 h-[40px] w-[240px]",
ar <= 1 && "self-end" ar <= 1 ? "self-end" : "portrait:self-end"
)} )}
style={getVibrantStyle(vibrant)}
> >
<div <div
style={{ background: `rgba(${vibrant.Vibrant.join(",")})` }} style={{ background: `rgba(${vibrant.Vibrant.join(",")})` }}