From 3ea124e7fffc479f58c5c37e98fba87d488adf72 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 16 Oct 2022 20:31:42 -0700
Subject: [PATCH 1/3] try removing background of header text when not against
 image

---
 src/pages/index.tsx   | 14 +++++++++++---
 src/styles/global.css | 18 ++++++++++++++++++
 src/styles/index.css  | 20 --------------------
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4beb852..59a59c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -159,8 +159,13 @@ const IndexPage = ({
           >
             <div
               className={classnames(
-                "rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3",
-                isClient ? "cool-border-big" : "bg-gray-50"
+                "rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10  mb-3",
+                isClient
+                  ? imageIsLandscape
+                    ? "text-vibrant-light landscape:text-vibrant-dark landscape:cool-border-big landscape:border-r-[20px] landscape:border-b-[20px]"
+                    : "text-vibrant-light portrait:text-vibrant-dark portrait:cool-border-big portrait:border-r-[20px] portrait:border-b-[20px]"
+                  : "bg-gray-50 border-r-[20px] border-b-[20px]",
+                isClient && ""
               )}
             >
               <h1
@@ -205,7 +210,10 @@ const IndexPage = ({
             loading="eager"
             style={{
               gridArea: "1/1",
-              width: browserIsLandscape && !imageIsLandscape ? `${ar * 100}vh` : "100%",
+              width:
+                browserIsLandscape && !imageIsLandscape
+                  ? `${ar * 100}vh`
+                  : "100%",
             }}
           />
         ) : (
diff --git a/src/styles/global.css b/src/styles/global.css
index a6ec8a5..4e3a9e8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -57,6 +57,24 @@
       height: 67vw;
     }
   }
+  .cool-border-big {
+    border: 1px solid rgb(var(--dark-vibrant));
+    background: rgb(var(--light-vibrant));
+    box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
+  }
+  .cool-border-small {
+    color: rgb(var(--dark-vibrant));
+    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));
+  }
 }
 
 body {
diff --git a/src/styles/index.css b/src/styles/index.css
index c5e3aed..e57435a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,23 +2,3 @@
 text-vibrant-dark border-vibrant bg-vibrant-light
   
 } */
-
-.cool-border-big {
-  color: rgb(var(--dark-vibrant));
-  border: 1px solid rgb(var(--dark-vibrant));
-  background: rgb(var(--light-vibrant));
-  box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
-}
-.cool-border-small {
-  color: rgb(var(--dark-vibrant));
-  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

From c0b8637aaedef34808b28838b04c235dbe464ae9 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 16 Oct 2022 20:44:37 -0700
Subject: [PATCH 2/3] move buzzwords link to nav

---
 src/components/Nav.tsx                 | 7 ++++++-
 src/components/index/ActionButtons.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 959cc57..b4d7778 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -16,7 +16,7 @@ interface NavProps {
 
 const Nav = ({ isClient, internalLinks, className }: NavProps) => {
   const { observe, currentBreakpoint } = useDimensions({
-    breakpoints: { XS: 0, LG: 690 },
+    breakpoints: { XS: 0, LG: 750 },
     updateOnBreakpointChange: true,
   });
   const [linksMenu, setLinksMenu] = useState(false);
@@ -84,6 +84,11 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
                   : "bg-black border border-white")
             )}
           >
+            <li>
+              <a className={navClasses} href="https://buzzwords.gg">
+                Buzzwords
+              </a>
+            </li>
             <li>
               <a className={navClasses} href="https://twitter.com/chuckletmilk">
                 Twitter
diff --git a/src/components/index/ActionButtons.tsx b/src/components/index/ActionButtons.tsx
index fe9dfe6..dcf9fd2 100644
--- a/src/components/index/ActionButtons.tsx
+++ b/src/components/index/ActionButtons.tsx
@@ -24,7 +24,7 @@ const ActionButtons = ({
   shuffleImage,
 }: ActionButtonsProps) => (
   <div className="flex flex-col mb-2">
-    <div className="text-muted-light p-2 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
+    {/* <div className="text-muted-light p-2 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
       <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
       <a
         className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-1 sm:p-2"
@@ -32,7 +32,7 @@ const ActionButtons = ({
       >
         Buzzwords
       </a>
-    </div>
+    </div> */}
     <div className="flex sm:mx-6 mb-2 sm:mb-6">
       <Link
         className={getButtonClasses(isClient)}

From c022700793d23e8ae2e19452565bcaeb6c91b0c1 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 16 Oct 2022 21:04:31 -0700
Subject: [PATCH 3/3] bring back buzzwords ad, just without a border

---
 src/components/Nav.tsx                 | 6 +++---
 src/components/index/ActionButtons.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index b4d7778..4d0015a 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -16,7 +16,7 @@ interface NavProps {
 
 const Nav = ({ isClient, internalLinks, className }: NavProps) => {
   const { observe, currentBreakpoint } = useDimensions({
-    breakpoints: { XS: 0, LG: 750 },
+    breakpoints: { XS: 0, LG: 690 },
     updateOnBreakpointChange: true,
   });
   const [linksMenu, setLinksMenu] = useState(false);
@@ -84,11 +84,11 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
                   : "bg-black border border-white")
             )}
           >
-            <li>
+            {/* <li>
               <a className={navClasses} href="https://buzzwords.gg">
                 Buzzwords
               </a>
-            </li>
+            </li> */}
             <li>
               <a className={navClasses} href="https://twitter.com/chuckletmilk">
                 Twitter
diff --git a/src/components/index/ActionButtons.tsx b/src/components/index/ActionButtons.tsx
index dcf9fd2..874cb10 100644
--- a/src/components/index/ActionButtons.tsx
+++ b/src/components/index/ActionButtons.tsx
@@ -24,7 +24,7 @@ const ActionButtons = ({
   shuffleImage,
 }: ActionButtonsProps) => (
   <div className="flex flex-col mb-2">
-    {/* <div className="text-muted-light p-2 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
+    <div className="text-muted-light p-3 pt-0 mt-0 m-1 bg-muted-dark rounded-xl flex flex-col text-center z-10">
       <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
       <a
         className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-1 sm:p-2"
@@ -32,7 +32,7 @@ const ActionButtons = ({
       >
         Buzzwords
       </a>
-    </div> */}
+    </div>
     <div className="flex sm:mx-6 mb-2 sm:mb-6">
       <Link
         className={getButtonClasses(isClient)}