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(", ");
}
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(",")})` }}