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

enlarge palette and remove color preprocessing

Browse Source
This commit is contained in:
Chuck Dries 2023-01-07 02:31:04 -08:00
parent 5a4e5f69a8
commit 0e4248e29e
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
2 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
gatsby-node.ts
View File

@ -40,41 +40,41 @@ function processColors(vibrantData: Palette, imagePath: string) {
let DarkMuted = chroma(vibrantData.DarkMuted!.getRgb());
let LightMuted = chroma(vibrantData.LightMuted!.getRgb());
// first pass - darken bg and lighten relevant fg colors
if (
badContrast(DarkVibrant, Vibrant) ||
badContrast(DarkVibrant, LightMuted)
) {
DarkVibrant = DarkVibrant.darken();
}
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten();
}
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten();
}
// // first pass - darken bg and lighten relevant fg colors
// if (
// badContrast(DarkVibrant, Vibrant) ||
// badContrast(DarkVibrant, LightMuted)
// ) {
// DarkVibrant = DarkVibrant.darken();
// }
// if (badContrast(DarkVibrant, Vibrant)) {
// Vibrant = Vibrant.brighten();
// }
// if (badContrast(DarkVibrant, Vibrant)) {
// Vibrant = Vibrant.brighten();
// }
// second pass - first doesn't always do enough
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(2);
}
if (badContrast(DarkVibrant, LightMuted)) {
LightMuted = LightMuted.brighten(2);
}
// // second pass - first doesn't always do enough
// if (badContrast(DarkVibrant, Vibrant)) {
// Vibrant = Vibrant.brighten(2);
// }
// if (badContrast(DarkVibrant, LightMuted)) {
// LightMuted = LightMuted.brighten(2);
// }
// only used for hover styles, so we should give it a shot but it's not a huge deal if it's not very legible
if (badContrast(Muted, LightMuted)) {
Muted = Muted.darken();
}
// // only used for hover styles, so we should give it a shot but it's not a huge deal if it's not very legible
// if (badContrast(Muted, LightMuted)) {
// Muted = Muted.darken();
// }
if (badContrast(DarkVibrant, Vibrant)) {
console.warn("contrast still too low", imagePath);
logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
}
if (badContrast(DarkVibrant, LightMuted)) {
console.warn("contrast still too low", imagePath);
logColorsWithContrast(LightMuted, DarkVibrant, "LM-DV");
}
// if (badContrast(DarkVibrant, Vibrant)) {
// console.warn("contrast still too low", imagePath);
// logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
// }
// if (badContrast(DarkVibrant, LightMuted)) {
// console.warn("contrast still too low", imagePath);
// logColorsWithContrast(LightMuted, DarkVibrant, "LM-DV");
// }
return {
Vibrant: Vibrant.rgb(),

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

@ -240,7 +240,7 @@ const GalleryImage = ({ data, location: { state } }) => {
<h1 className="text-4xl mt-0 font-sans">{name}</h1>
)}
<p className="landscape:mr-2">{meta.Caption}</p>
<div className="grid grid-cols-6 w-full h-[30px]">
<div className="grid grid-cols-6 h-[40px] w-[240px]">
<div className="bg-vibrant"></div>
<div className="bg-vibrant-light"></div>
<div className="bg-vibrant-dark"></div>