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

clean code

Browse Source
This commit is contained in:
Chuck Dries
2021-09-21 12:39:06 -07:00
parent 21bc7638c4
commit 984258cf76
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/index.js
View File

@@ -105,7 +105,7 @@ const IndexPage = ({
const vibrant = getVibrant(image); const vibrant = getVibrant(image);
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
const isLandscape = isClient ? ar > 1 : true; const imageIsLandscape = isClient ? ar > 1 : true;
return ( return (
<> <>
@@ -119,7 +119,7 @@ const IndexPage = ({
<main <main
className={classnames( className={classnames(
"font-serif", "font-serif",
isLandscape imageIsLandscape
? "landscape:grid portrait:h-screen portrait:flex flex-col justify-evenly" ? "landscape:grid portrait:h-screen portrait:flex flex-col justify-evenly"
: "portrait:grid landscape:flex flex-row" : "portrait:grid landscape:flex flex-row"
)} )}
@@ -127,7 +127,9 @@ const IndexPage = ({
<div <div
className={classnames( className={classnames(
"landscape:flex-auto flex flex-col items-center justify-between", "landscape:flex-auto flex flex-col items-center justify-between",
isLandscape ? "portrait:items-center" : "landscape:justify-center" imageIsLandscape
? "portrait:items-center"
: "landscape:justify-center"
)} )}
style={{ gridArea: "1/1" }} style={{ gridArea: "1/1" }}
> >
@@ -136,9 +138,9 @@ const IndexPage = ({
<h1 <h1
className={classnames( className={classnames(
"mb-0 mt-0 text-center font-black 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",
isClient ? 'filter drop-shadow-dark' : 'text-white', isClient ? "filter drop-shadow-dark" : "text-white",
isClient && isClient &&
(isLandscape (imageIsLandscape
? "text-vibrant-light landscape:text-gray-50 landscape:opacity-80" ? "text-vibrant-light landscape:text-gray-50 landscape:opacity-80"
: "text-gray-50 opacity-80 landscape:text-vibrant-light") : "text-gray-50 opacity-80 landscape:text-vibrant-light")
)} )}
@@ -149,10 +151,11 @@ const IndexPage = ({
<h2 <h2
className={classnames( className={classnames(
"p-3 text-center z-20 font-bold text-xl lg:text-2xl", "p-3 text-center z-20 font-bold text-xl lg:text-2xl",
isClient ? 'filter drop-shadow-dark' : 'text-white', isClient ? "filter drop-shadow-dark" : "text-white",
isClient && (isLandscape isClient &&
? "text-vibrant-light landscape:text-gray-100" (imageIsLandscape
: "text-gray-100 landscape:text-vibrant-light") ? "text-vibrant-light landscape:text-gray-100"
: "text-gray-100 landscape:text-vibrant-light")
)} )}
style={{ lineHeight: "110%" }} style={{ lineHeight: "110%" }}
> >
@@ -162,7 +165,7 @@ const IndexPage = ({
<div <div
className={classnames( className={classnames(
isLandscape ? "block portrait:hidden" : "block" imageIsLandscape ? "block portrait:hidden" : "block"
)} )}
> >
<ActionButtons <ActionButtons
@@ -177,7 +180,7 @@ const IndexPage = ({
<GatsbyImage <GatsbyImage
alt="" alt=""
className={classnames( className={classnames(
isLandscape imageIsLandscape
? "landscape:h-screen portrait:h-two-thirds-vw" ? "landscape:h-screen portrait:h-two-thirds-vw"
: "h-screen portrait:w-full landscape:w-1/2" : "h-screen portrait:w-full landscape:w-1/2"
)} )}
@@ -193,7 +196,7 @@ const IndexPage = ({
style={{ gridArea: "1/1" }} style={{ gridArea: "1/1" }}
></div> ></div>
)} )}
{isLandscape && ( {imageIsLandscape && (
<div className="hidden portrait:flex justify-center my-2"> <div className="hidden portrait:flex justify-center my-2">
<ActionButtons <ActionButtons
image={image} image={image}