From 0e4248e29e4d58bb849d6ebc841aa7195cbc20b8 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 7 Jan 2023 02:31:04 -0800
Subject: [PATCH] enlarge palette and remove color preprocessing

---
 gatsby-node.ts                              | 64 ++++++++++-----------
 src/components/GalleryImage/GalleryImage.js |  2 +-
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/gatsby-node.ts b/gatsby-node.ts
index afda796..22eeae8 100644
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -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(),
diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 2393af3..1c35782 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -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>