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

improve homepage portrait:portrait layout

Browse Source
This commit is contained in:
Chuck Dries 2022-07-13 13:25:11 -07:00
parent e62dfb280d
commit 0e258b2f57
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/index.js
View File

@ -127,9 +127,9 @@ const IndexPage = ({
>
<div
className={classnames(
"landscape:flex-auto flex flex-col items-center justify-between",
"landscape:flex-auto flex flex-col items-center",
imageIsLandscape
? "portrait:items-center landscape:w-screen"
? "portrait:items-center landscape:w-screen justify-between"
: "landscape:justify-center portrait:w-screen"
)}
style={{ gridArea: "1/1" }}
@ -142,34 +142,36 @@ const IndexPage = ({
isClient={isClient}
/>
<div
className={classnames(
"rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2 md:mb-[-90px]",
isClient ? "cool-border-big" : "bg-gray-50",
!imageIsLandscape && "landscape:mr-4" // text is on left side of image, make some room for drop shadow
)}
className={classnames("flex flex-col", !imageIsLandscape && "portrait:flex-auto ")}
>
<h1
<div
className={classnames(
"mb-0 mt-0 text-center font-black z-20 text-5xl sm:text-7xl md:text-8xl lg:text-9xl"
"rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2",
isClient ? "cool-border-big" : "bg-gray-50",
!imageIsLandscape && "landscape:mr-4" // text is on left side of image, make some room for drop shadow
)}
style={{ lineHeight: "85%" }}
>
Chuck Dries
</h1>
<h2
className={classnames(
"p-3 text-center z-20 font-bold text-lg md:text-2xl lg:text-3xl"
)}
style={{ lineHeight: "110%" }}
>
Full Stack Software Engineer &amp; Photographer
</h2>
<h1
className={classnames(
"mb-0 mt-0 text-center font-black z-20 text-5xl sm:text-7xl md:text-8xl lg:text-9xl"
)}
style={{ lineHeight: "85%" }}
>
Chuck Dries
</h1>
<h2
className={classnames(
"p-3 text-center z-20 font-bold text-lg md:text-2xl lg:text-3xl"
)}
style={{ lineHeight: "110%" }}
>
Full Stack Software Engineer &amp; Photographer
</h2>
</div>
</div>
<div
className={classnames(
"mt-[100px]",
imageIsLandscape ? "block portrait:hidden" : "block"
imageIsLandscape ? "block portrait:hidden" : ""
)}
>
<ActionButtons