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 DarkMuted = chroma(vibrantData.DarkMuted!.getRgb());
let LightMuted = chroma(vibrantData.LightMuted!.getRgb()); let LightMuted = chroma(vibrantData.LightMuted!.getRgb());
// first pass - darken bg and lighten relevant fg colors // // first pass - darken bg and lighten relevant fg colors
if ( // if (
badContrast(DarkVibrant, Vibrant) || // badContrast(DarkVibrant, Vibrant) ||
badContrast(DarkVibrant, LightMuted) // badContrast(DarkVibrant, LightMuted)
) { // ) {
DarkVibrant = DarkVibrant.darken(); // DarkVibrant = DarkVibrant.darken();
} // }
if (badContrast(DarkVibrant, Vibrant)) { // if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(); // Vibrant = Vibrant.brighten();
} // }
if (badContrast(DarkVibrant, Vibrant)) { // if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(); // Vibrant = Vibrant.brighten();
} // }
// second pass - first doesn't always do enough // // second pass - first doesn't always do enough
if (badContrast(DarkVibrant, Vibrant)) { // if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(2); // Vibrant = Vibrant.brighten(2);
} // }
if (badContrast(DarkVibrant, LightMuted)) { // if (badContrast(DarkVibrant, LightMuted)) {
LightMuted = LightMuted.brighten(2); // 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 // // 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)) { // if (badContrast(Muted, LightMuted)) {
Muted = Muted.darken(); // Muted = Muted.darken();
} // }
if (badContrast(DarkVibrant, Vibrant)) { // if (badContrast(DarkVibrant, Vibrant)) {
console.warn("contrast still too low", imagePath); // console.warn("contrast still too low", imagePath);
logColorsWithContrast(Vibrant, DarkVibrant, "V-DV"); // logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
} // }
if (badContrast(DarkVibrant, LightMuted)) { // if (badContrast(DarkVibrant, LightMuted)) {
console.warn("contrast still too low", imagePath); // console.warn("contrast still too low", imagePath);
logColorsWithContrast(LightMuted, DarkVibrant, "LM-DV"); // logColorsWithContrast(LightMuted, DarkVibrant, "LM-DV");
} // }
return { return {
Vibrant: Vibrant.rgb(), 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> <h1 className="text-4xl mt-0 font-sans">{name}</h1>
)} )}
<p className="landscape:mr-2">{meta.Caption}</p> <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"></div>
<div className="bg-vibrant-light"></div> <div className="bg-vibrant-light"></div>
<div className="bg-vibrant-dark"></div> <div className="bg-vibrant-dark"></div>