From 0a8b5eda9d39f75ea06d6d583d1d3cdba7d40285 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 6 Oct 2019 18:25:00 +0200
Subject: [PATCH] new photos layout

---
 src/components/Post/PostImage.module.scss |  5 ----
 src/components/atoms/Transitions.ts       | 21 +++++++++--------
 src/pages/photos.module.scss              | 28 +++++++++++++++--------
 src/pages/photos.tsx                      | 13 +++++++----
 src/templates/Post.module.scss            | 14 ++++++++++++
 src/templates/Post.tsx                    |  4 +++-
 src/templates/Posts.tsx                   | 13 +++++++----
 7 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/src/components/Post/PostImage.module.scss b/src/components/Post/PostImage.module.scss
index da0a36e3..e486a81b 100644
--- a/src/components/Post/PostImage.module.scss
+++ b/src/components/Post/PostImage.module.scss
@@ -23,12 +23,7 @@
 }
 
 .postImage {
-  @include breakoutviewport();
-
-  max-width: none;
   display: block;
-  margin-top: $spacer * 1.5;
-  margin-bottom: $spacer * 1.5;
 
   a & {
     position: relative;
diff --git a/src/components/atoms/Transitions.ts b/src/components/atoms/Transitions.ts
index c2b4c86d..bfb1a527 100644
--- a/src/components/atoms/Transitions.ts
+++ b/src/components/atoms/Transitions.ts
@@ -7,24 +7,25 @@ export const fadeIn = {
   }
 }
 
+const transition = { type: 'spring' }
+
+const enter = {
+  y: 0,
+  ...transition
+}
+
 export const moveInTop = {
-  enter: {
-    y: 0,
-    transition: { type: 'spring' }
-  },
+  ...enter,
   exit: {
     y: '-2rem',
-    transition: { type: 'spring' }
+    ...transition
   }
 }
 
 export const moveInBottom = {
-  enter: {
-    y: 0,
-    transition: { type: 'spring' }
-  },
+  ...enter,
   exit: {
     y: '2rem',
-    transition: { type: 'spring' }
+    ...transition
   }
 }
diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss
index 76dbaebd..6ab9415a 100644
--- a/src/pages/photos.module.scss
+++ b/src/pages/photos.module.scss
@@ -2,25 +2,33 @@
 @import 'mixins';
 
 .photos {
-  @include breakoutviewport;
+  @include breakoutviewport--full;
 
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacer;
   padding-left: $spacer;
   padding-right: $spacer;
 
-  @media (min-width: $screen-md) {
-    padding-left: 0;
-    padding-right: 0;
+  @media (min-width: $screen-sm) {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
 }
 
 .photo {
-  flex: 0 0 48%;
-  margin-bottom: 4%;
-
   a {
     display: block;
   }
+
+  figure {
+    > div {
+      margin: 0;
+    }
+  }
+
+  figcaption {
+    font-size: $font-size-base;
+    padding-left: $spacer / 2;
+    padding-right: $spacer / 2;
+  }
 }
diff --git a/src/pages/photos.tsx b/src/pages/photos.tsx
index 54269099..92ba02eb 100644
--- a/src/pages/photos.tsx
+++ b/src/pages/photos.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { graphql, Link } from 'gatsby'
-import Image from '../components/atoms/Image'
-import Page from '../templates/Page'
-
-import styles from './photos.module.scss'
 import { FluidObject } from 'gatsby-image'
+import Page from '../templates/Page'
+import PostImage from '../components/Post/PostImage'
+import styles from './photos.module.scss'
 
 const page = {
   frontmatter: {
@@ -34,7 +33,11 @@ const PhotoThumbs = ({ edges }: { edges: PhotoNode[] }) =>
       <article className={styles.photo} key={node.id}>
         {image && (
           <Link to={slug}>
-            <Image fluid={image.childImageSharp.fluid} alt={title} />
+            <PostImage
+              title={title}
+              fluid={image.childImageSharp.fluid}
+              alt={title}
+            />
           </Link>
         )}
       </article>
diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss
index 7d913b1f..466c1022 100644
--- a/src/templates/Post.module.scss
+++ b/src/templates/Post.module.scss
@@ -6,7 +6,21 @@
   padding-top: $spacer;
   padding-bottom: $spacer * 3;
 
+  > a {
+    display: block;
+  }
+
   &:only-child {
     padding-bottom: $spacer;
   }
 }
+
+.postImageWrap {
+  @include breakoutviewport();
+
+  figure {
+    max-width: none;
+    margin-top: $spacer * 1.5;
+    margin-bottom: 0;
+  }
+}
diff --git a/src/templates/Post.tsx b/src/templates/Post.tsx
index bef224d7..83479bef 100644
--- a/src/templates/Post.tsx
+++ b/src/templates/Post.tsx
@@ -39,7 +39,9 @@ export default function Post({
           {type === 'post' && <PostLead post={post} />}
           {type === 'photo' && <PostContent post={post} />}
           {image && (
-            <PostImage fluid={image.childImageSharp.fluid} alt={title} />
+            <div className={styles.postImageWrap}>
+              <PostImage fluid={image.childImageSharp.fluid} alt={title} />
+            </div>
           )}
           {image && image.fields && <Exif exif={image.fields.exif} />}
 
diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx
index f4936026..2933d77e 100644
--- a/src/templates/Posts.tsx
+++ b/src/templates/Posts.tsx
@@ -11,6 +11,7 @@ import SEO from '../components/atoms/SEO'
 import Pagination from '../components/molecules/Pagination'
 import Featured from '../components/molecules/Featured'
 import styles from './Posts.module.scss'
+import stylesPost from './Post.module.scss'
 
 export default function Posts({
   data,
@@ -36,11 +37,13 @@ export default function Posts({
 
         {image && (
           <Link to={slug} title={title}>
-            <PostImage
-              title={type === 'photo' ? title : null}
-              fluid={image.childImageSharp.fluid}
-              alt={title}
-            />
+            <div className={stylesPost.postImageWrap}>
+              <PostImage
+                title={type === 'photo' ? title : null}
+                fluid={image.childImageSharp.fluid}
+                alt={title}
+              />
+            </div>
           </Link>
         )}