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",
"clean": "gatsby clean",
"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": {
"@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 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]);
return (<>
<Helmet>
@ -37,8 +39,8 @@ const GalleryImage = ({ data }) => {
/>
</Helmet>
<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={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}>
<div className="min-h-screen pt-4 flex flex-col justify-center">
<div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}>
<div className="flex-grow-0">
<GatsbyImage
alt={name}
@ -53,7 +55,7 @@ const GalleryImage = ({ data }) => {
// minHeight: '500px',
}} />
</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">
{hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
<p className="mr-1">{meta.iptc.caption}</p>

2
gatsby/tailwind.config.js
View File

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