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

use portrait/landscape to flip hero layout

Browse Source
This commit is contained in:
Chuck Dries 2021-06-20 11:29:59 -07:00
parent c7f25ca856
commit 4e7fd5cc9d
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/index.js
View File

@ -90,14 +90,15 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
style={getVibrantToHelmetSafeBodyStyle(vibrant)} style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/> />
</Helmet> </Helmet>
{/* WIP: ipad portrait hits md breakpoint, looks bad */}
<main <main
className={classnames('font-serif hero', ar > 1 ? 'flex md:grid flex-col' : 'grid md:flex md:flex-row-reverse')} className={classnames('font-serif hero', ar > 1 ? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')}
> >
{isClient ? {isClient ?
<GatsbyImage <GatsbyImage
alt="" alt=""
className={classnames( className={classnames(
ar > 1 ? 'md:h-screen h-two-thirds-vw' : 'h-screen w-full md:w-1/2', ar > 1 ? 'landscape:h-screen portrait:h-two-thirds-vw' : 'h-screen portrait:w-full landscape:w-1/2',
)} )}
image={getImage(image)} image={getImage(image)}
loading="eager" loading="eager"