From 78c9126300e94964609eba9f4acf3d9ac2e68c91 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 24 Oct 2022 18:40:11 -0700
Subject: [PATCH] =?UTF-8?q?=5Fduot=C3=B3ne=5F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Nav.tsx | 10 +++++-----
 src/pages/index.tsx    | 20 ++++++++++++--------
 src/styles/global.css  | 29 +++++++++++++++++------------
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index c60b668..1864570 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -5,7 +5,8 @@ import useDimensions from "react-cool-dimensions";
 
 import Menu from "@spectrum-icons/workflow/Menu";
 
-const navClasses = "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
+const navClasses =
+  "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
 
 const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
   <ul
@@ -13,7 +14,7 @@ const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
       "z-30 bg-vibrant-dark rounded overflow-hidden",
       isVertical
         ? "inline-flex flex-wrap justify-center"
-        : "absolute rounded-md top-[40px] border border-white"
+        : "absolute rounded-md top-[40px] border border-vibrant-light"
     )}
   >
     <li>
@@ -80,7 +81,7 @@ interface NavProps {
 
 const Nav = ({ internalLinks, className }: NavProps) => {
   const { observe, currentBreakpoint } = useDimensions({
-    breakpoints: { XS: 0, LG: 690 },
+    breakpoints: { XS: 0, LG: 750 },
     updateOnBreakpointChange: true,
   });
   const [linksMenu, setLinksMenu] = useState(false);
@@ -89,7 +90,6 @@ const Nav = ({ internalLinks, className }: NavProps) => {
     <nav
       className={classnames(
         "mt-0 flex justify-center w-full font-serif",
-        "bg-vibrant-dark",
         className
       )}
       ref={observe}
@@ -111,7 +111,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
             ))}
         </ul>
         {internalLinks && currentBreakpoint !== "XS" && (
-          <span className="block p-3 text-gray-200">|</span>
+          <span className="block p-3 text-vibrant-light opacity-75">|</span>
         )}
         {currentBreakpoint === "XS" && (
           <button
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f8adf32..afd7427 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -170,18 +170,22 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
             DarkMuted: [0, 0, 0],
             LightMuted: [255, 255, 255],
             Vibrant: [255, 255, 255],
-            LightVibrant: [255, 255, 255],
-            DarkVibrant: [0, 0, 0],
+            LightVibrant: [0, 0, 0],
+            DarkVibrant: [231, 229, 228],
           })}
         />
       </Helmet>
-      <div className="top-0 z-10 bg-black">
-        <Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} />
-        <div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
-          <h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
-          <h2 className="">Full Stack Software Engineer & Photographer</h2>
+      <div className="top-0 z-10">
+        <div className="bg-vibrant-dark text-black pb-1">
+          <Nav
+            className="mb-4"
+            internalLinks={[{ href: "/", label: "Home" }]}
+          />
+          <div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
+            <h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
+            <h2 className="">Full Stack Software Engineer & Photographer</h2>
+          </div>
         </div>
-        {/* <div className="w-full gradient h-[10px]"></div> */}
         <div className="flex flex-col md:flex-row md:items-end justify-between">
           <KeywordsPicker
             keywords={[
diff --git a/src/styles/global.css b/src/styles/global.css
index 68f7726..be1dbe6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -82,17 +82,22 @@
   }
   .gradient {
     background-image: linear-gradient(
-      45deg,
-      hsl(226deg 100% 20%) 0%,
-      hsl(279deg 68% 26%) 24%,
-      hsl(309deg 85% 28%) 39%,
-      hsl(324deg 92% 37%) 51%,
-      hsl(339deg 72% 50%) 60%,
-      hsl(356deg 91% 62%) 68%,
-      hsl(15deg 100% 62%) 76%,
-      hsl(32deg 100% 57%) 83%,
-      hsl(45deg 100% 50%) 91%,
-      hsl(55deg 100% 50%) 100%
+      180deg,
+      hsl(31deg 24% 44%) 0%,
+      hsl(27deg 25% 42%) 7%,
+      hsl(22deg 26% 40%) 14%,
+      hsl(18deg 27% 37%) 21%,
+      hsl(12deg 28% 35%) 29%,
+      hsl(9deg 29% 32%) 36%,
+      hsl(4deg 30% 30%) 43%,
+      hsl(0deg 31% 27%) 50%,
+      hsl(0deg 31% 23%) 57%,
+      hsl(0deg 31% 19%) 64%,
+      hsl(0deg 32% 15%) 71%,
+      hsl(0deg 30% 12%) 79%,
+      hsl(0deg 30% 8%) 86%,
+      hsl(0deg 30% 4%) 93%,
+      hsl(0deg 0% 0%) 100%
     );
   }
 }
@@ -122,4 +127,4 @@ kbd {
 
 button {
   @apply cursor-auto;
-}
\ No newline at end of file
+}