chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve js disabled / first load experience

Browse Source
This commit is contained in:
Chuck Dries 2021-09-20 12:43:07 -07:00
parent 6c55299fd3
commit 8db14fe4b5
3 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/index/ActionButtons.js
View File

@ -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 &&
`text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2`
isClient
? 'text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2'
: 'text-gray-200'
);
const ActionButtons = ({ isClient, image, shuffleImage }) => (

2
src/components/index/Nav.js
View File

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

51
src/pages/index.js
View File

@ -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",
isLandscape
? "text-vibrant-light landscape:text-gray-50 landscape:opacity-80"
: "text-gray-50 opacity-80 landscape:text-vibrant-light"
"mb-0 mt-0 text-center font-black z-20 text-7xl md:text-8xl lg:text-9xl",
isClient ? 'filter drop-shadow-dark' : 'text-white',
isClient &&
(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",
isLandscape
"p-3 text-center z-20 font-bold text-xl lg:text-2xl",
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")}>
<ActionButtons
image={image}
isClient={isClient}
shuffleImage={shuffleImage}
/>
</div>
<div
className={classnames(
isLandscape ? "block portrait:hidden" : "block"
)}
>
<ActionButtons
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
image={image}
isClient={isClient}
shuffleImage={shuffleImage}
/>
<ActionButtons
image={image}
isClient={isClient}
shuffleImage={shuffleImage}
/>
</div>
)}
</main>