improve js disabled / first load experience

src/components/index/ActionButtons.js

@@ -5,8 +5,9 @@ import { Link } from "gatsby";
 const getButtonClasses = (isClient) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
-    isClient &&
+    isClient 
-      `text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2`
+      ? 'text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2'
+      : 'text-gray-200'
   );
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (

src/components/index/Nav.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 
 const getNavClasses = (isClient) =>
-  classnames("hover:underline mx-2 md:mx-3", isClient && "text-vibrant-light");
+  classnames("hover:underline mx-2 md:mx-3", isClient ? "text-vibrant-light" : 'text-gray-200');
 
 const Nav = ({ ar, isClient }) => (
   <nav

src/pages/index.js

@@ -105,7 +105,7 @@ const IndexPage = ({
   const vibrant = getVibrant(image);
   const ar = getAspectRatio(image);
 
-  const isLandscape = isClient ? ar > 1 : false;
+  const isLandscape = isClient ? ar > 1 : true;
 
   return (
     <>
@@ -118,7 +118,7 @@ const IndexPage = ({
       </Helmet>
       <main
         className={classnames(
-          "font-serif hero",
+          "font-serif",
           isLandscape
             ? "landscape:grid portrait:flex portrait:flex-col"
             : "portrait:grid landscape:flex landscape:flex-row"
@@ -135,10 +135,12 @@ const IndexPage = ({
           <div className="flex flex-col items-center">
             <h1
               className={classnames(
-                "mb-0 mt-0 text-center font-black filter drop-shadow-dark z-20 text-7xl md:text-8xl lg:text-9xl",
+                "mb-0 mt-0 text-center font-black z-20 text-7xl md:text-8xl lg:text-9xl",
-                isLandscape
+                isClient ? 'filter drop-shadow-dark' : 'text-white',
-                  ? "text-vibrant-light landscape:text-gray-50 landscape:opacity-80"
+                isClient &&
-                  : "text-gray-50 opacity-80 landscape:text-vibrant-light"
+                  (isLandscape
+                    ? "text-vibrant-light landscape:text-gray-50 landscape:opacity-80"
+                    : "text-gray-50 opacity-80 landscape:text-vibrant-light")
               )}
               style={{ lineHeight: "85%" }}
             >
@@ -146,10 +148,11 @@ const IndexPage = ({
             </h1>
             <h2
               className={classnames(
-                "p-3 text-center z-20 filter drop-shadow-dark font-bold text-xl lg:text-2xl",
+                "p-3 text-center z-20 font-bold text-xl lg:text-2xl",
-                isLandscape
+                isClient ? 'filter drop-shadow-dark' : 'text-white',
+                isClient && (isLandscape
                   ? "text-vibrant-light landscape:text-gray-100"
-                  : "text-gray-100 landscape:text-vibrant-light"
+                  : "text-gray-100 landscape:text-vibrant-light")
               )}
               style={{ lineHeight: "110%" }}
             >
@@ -157,13 +160,17 @@ const IndexPage = ({
             </h2>
           </div>
 
-            <div className={classnames(isLandscape ? "block portrait:hidden" : "block")}>
+          <div
-              <ActionButtons
+            className={classnames(
-                image={image}
+              isLandscape ? "block portrait:hidden" : "block"
-                isClient={isClient}
+            )}
-                shuffleImage={shuffleImage}
+          >
-              />
+            <ActionButtons
-            </div>
+              image={image}
+              isClient={isClient}
+              shuffleImage={shuffleImage}
+            />
+          </div>
         </div>
         {isClient ? (
           <GatsbyImage
@@ -181,17 +188,17 @@ const IndexPage = ({
           />
         ) : (
           <div
-            className="landscape:h-screen portrait:h-two-thirds-vw w-full"
+            className="landscape:h-screen portrait:h-two-thirds-vw w-full bg-gray-800"
             style={{ gridArea: "1/1" }}
           ></div>
         )}
         {isLandscape && (
           <div className="hidden portrait:flex justify-center my-2">
-          <ActionButtons
+            <ActionButtons
-            image={image}
+              image={image}
-            isClient={isClient}
+              isClient={isClient}
-            shuffleImage={shuffleImage}
+              shuffleImage={shuffleImage}
-          />
+            />
           </div>
         )}
       </main>