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

Rearrange portrait gallery when browser is also portrait TODO re-right align

Browse Source
This commit is contained in:
Chuck Dries 2021-06-18 12:16:33 -07:00
parent 28d40895aa
commit a5ef0eff2c
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby/package.json
View File

@ -14,7 +14,7 @@
"serve": "gatsby serve", "serve": "gatsby serve",
"clean": "gatsby clean", "clean": "gatsby clean",
"lint-fix": "eslint --fix --ext .jsx,.js src", "lint-fix": "eslint --fix --ext .jsx,.js src",
"deploy": "yarn build && rsync -azP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website-staging" "deploy": "yarn build && rsync -rzP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website-staging"
}, },
"dependencies": { "dependencies": {
"@mdx-js/mdx": "^1.6.22", "@mdx-js/mdx": "^1.6.22",

8
gatsby/src/components/GalleryImage.js
View File

@ -27,6 +27,8 @@ const GalleryImage = ({ data }) => {
const meta = getMeta(image); const meta = getMeta(image);
const vibrant = getVibrant(image, true); const vibrant = getVibrant(image, true);
const orientationClasses = ar > 1 ? 'flex-col' : 'landscape:flex-row-reverse portrait:flex-col';
console.log(ar, orientationClasses);
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]); const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
return (<> return (<>
<Helmet> <Helmet>
@ -37,8 +39,8 @@ const GalleryImage = ({ data }) => {
/> />
</Helmet> </Helmet>
<Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link> <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
<div className="min-h-screen flex flex-col justify-center"> <div className="min-h-screen pt-4 flex flex-col justify-center">
<div className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}> <div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}>
<div className="flex-grow-0"> <div className="flex-grow-0">
<GatsbyImage <GatsbyImage
alt={name} alt={name}
@ -53,7 +55,7 @@ const GalleryImage = ({ data }) => {
// minHeight: '500px', // minHeight: '500px',
}} /> }} />
</div> </div>
<div className={classnames('flex-shrink-0 mr-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}> <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
<div className="flex-auto mr-1"> <div className="flex-auto mr-1">
{hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>} {hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
<p className="mr-1">{meta.iptc.caption}</p> <p className="mr-1">{meta.iptc.caption}</p>

2
gatsby/tailwind.config.js
View File

@ -10,6 +10,8 @@ module.exports = {
'lg': '1024px', 'lg': '1024px',
'xl': '1280px', 'xl': '1280px',
'2xl': '1536px', '2xl': '1536px',
'portrait': {'raw': '(orientation: portrait)'},
'landscape': {'raw': '(orientation: landscape)'},
}, },
spacing: { spacing: {
'0': '0px', '0': '0px',