Merge branch 'experimental-homepage-update' into main

src/components/Nav.tsx

@@ -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

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"

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%",
             }}
           />
         ) : (

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 {

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));
-}