navbar style updates

2022-10-20 20:52:17 -07:00 · 2022-10-20 20:52:17 -07:00 · 44b4332583
commit 44b4332583
parent e7b3f058ea
5 changed files with 38 additions and 16 deletions
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@ -157,7 +157,7 @@ const GalleryImage = ({ data, location: { state } }) => {
              href: getGalleryPageUrl({ keyword: filterKeyword, sortKey }, image.base),
              label: (
                <>
-                  Home <kbd>esc</kbd>
+                  Home <kbd className="font-normal">esc</kbd>
                </>
              ),
            },
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@ -22,14 +22,13 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
  const [linksMenu, setLinksMenu] = useState(false);

  const navClasses = classnames(
-    "hover:underline mx-2 md:mx-3",
-    isClient ? "text-vibrant-light" : "text-gray-200"
+    "hover:underline mx-2 md:mx-3 text-gray-200"
  );
  return (
    <nav
      className={classnames(
-        "m-2 flex justify-center font-sans w-full",
-        isClient ? "text-vibrant-light" : "text-gray-200",
+        "p-2 mt-0 flex justify-center w-full font-serif",
+        "text-gray-200 bg-black border-b border-b-white",
        className
      )}
      ref={observe}
@ -50,7 +49,7 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
              </li>
            ))}
        </ul>
-        {internalLinks && currentBreakpoint !== "XS" && <>|</>}
+        {internalLinks && currentBreakpoint !== "XS" && <span className={navClasses}>|</span>}
        {currentBreakpoint === "XS" && (
          <button
            className="mx-2 hover:underline inline-flex align-middle"
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -164,15 +164,13 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
        <title>Photo Gallery | Chuck Dries</title>
        <body className="bg-black text-white" />
      </Helmet>
-      <div className="sm:sticky top-0 pt-1 z-10 bg-black">
-        <Nav
-          className="mb-4"
-          internalLinks={[{ href: "/", label: "Home" }]}
-        />
+      <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>
+        {/* <div className="w-full gradient h-[10px]"></div> */}
        <div className="flex flex-col md:flex-row md:items-end justify-between">
          <KeywordsPicker
            keywords={[
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -70,6 +70,31 @@
    border: 1px solid rgb(var(--light-vibrant));
    box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
  }
+  .text-shadow {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    & kbd {
+      text-shadow: none;
+    }
+  }
+  .text-outline {
+    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
+      -1px -1px 0 #fff;
+  }
+  .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%
+    );
+  }
 }

 body {
@ -92,5 +117,9 @@ a {
 }

 kbd {
-    @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
+  @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
+}
+
+button {
+  @apply cursor-auto;
 }
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -1,4 +0,0 @@
-/* main.hero {
-text-vibrant-dark border-vibrant bg-vibrant-light
-  
-} */