From f905c9fd9c6707265ca8df4b72d52aed7c245eb0 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Fri, 20 May 2022 00:03:42 -0700
Subject: [PATCH] groovier borders

---
 src/components/index/ActionButtons.js | 2 +-
 src/components/index/Nav.js           | 9 +++++----
 src/pages/index.js                    | 3 ++-
 src/styles/index.css                  | 6 +++++-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
index d54c562..b265e11 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.js
@@ -12,7 +12,7 @@ const getButtonClasses = (isClient) =>
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
   <div className="flex flex-col">
-    <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 border-2 border-vibrant">
+    <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
       <h3 className="mb-2 drop-shadow">Try my word game!</h3>
       <a className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" href="https://buzzwords.gg">
         Buzzwords
diff --git a/src/components/index/Nav.js b/src/components/index/Nav.js
index af9ef88..14cd424 100644
--- a/src/components/index/Nav.js
+++ b/src/components/index/Nav.js
@@ -10,11 +10,12 @@ const getNavClasses = (isClient) =>
 const Nav = ({ imageIsLandscape, isClient }) => (
   <nav
     className={classnames(
-      imageIsLandscape
-        ? "landscape:w-screen portrait:rounded-xl portrait:m-2 portrait:border-2 border-vibrant-light"
-        : "portrait:w-screen landscape:rounded-xl landscape:m-2 landscape:border-2 border-vibrant-light",
+      // imageIsLandscape
+      //   ? "landscape:w-screen portrait:rounded-3xl portrait:m-2"
+      //   : "portrait:w-screen landscape:rounded-3xl landscape:m-2",
+      "rounded-3xl m-2",
       "p-2 flex justify-center",
-      isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
+      isClient && "bg-vibrant-dark cool-border-small-light"
     )}
     style={{ zIndex: 100 }}
   >
diff --git a/src/pages/index.js b/src/pages/index.js
index 5b45378..e3e165d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -127,7 +127,7 @@ const IndexPage = ({
       >
         <div
           className={classnames(
-            "landscape:flex-auto flex flex-col items-center justify-between",
+            "landscape:flex-auto flex flex-col items-center justify-between w-screen",
             imageIsLandscape
               ? "portrait:items-center"
               : "landscape:justify-center"
@@ -246,6 +246,7 @@ export const query = graphql`
             "DSC06490.jpg" # Japanese garden steps
             "DSC06687.jpg" # Multnomah Falls long exposure
             "DSC06616.jpg" # B&W abstract
+            "DSC05930.jpg" # Sedona thumb
           ]
         }
       }
diff --git a/src/styles/index.css b/src/styles/index.css
index f8274d8..c5e3aed 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -11,10 +11,14 @@ text-vibrant-dark border-vibrant bg-vibrant-light
 }
 .cool-border-small {
   color: rgb(var(--dark-vibrant));
-  border: 1px solid black;
+  border: 1px solid rgb(var(--dark-vibrant));
   background: rgb(var(--light-vibrant));
   box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
 }
 .cool-border-small:hover{
   box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
 }
+.cool-border-small-light {
+  border: 1px solid rgb(var(--light-vibrant));
+  box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
+}
\ No newline at end of file