merge Image & PostImage

src/components/atoms/Exif.module.scss

@@ -2,7 +2,7 @@
 @import 'mixins';
 
 .exif {
-  margin-top: -($spacer);
+  margin-top: -($spacer * $line-height);
   margin-bottom: $spacer * 2;
 }
 

src/components/atoms/Image.module.scss

@@ -1,20 +1,54 @@
+@import 'variables';
 @import 'mixins';
 
-.imageWrap {
+.imageTitle {
+  @include transition();
+
+  font-size: $font-size-h3;
+  font-family: $font-family-headings;
+  line-height: $line-height-headings;
+  font-weight: $font-weight-headings;
+  font-style: normal;
+  text-align: left;
+  margin: 0;
+  position: absolute;
+  top: 10%;
+  padding: $spacer / 3 $spacer;
+  background: rgba($link-color, 0.85);
+  color: #fff !important;
+  text-shadow: 0 1px 0 #000;
+  left: 0;
+  opacity: 0;
+  transform: translate3d(0, -20px, 0);
+}
+
+.image {
   @include media-frame;
+  @include breakoutviewport;
 
-  margin-left: auto;
+  max-width: none;
-  margin-right: auto;
+  margin: $spacer * $line-height auto;
-  margin-bottom: $spacer;
   display: block;
+  border-radius: $border-radius;
 
-  @media (min-width: 940px) {
+  a & {
-    max-width: 940px;
+    position: relative;
-    border-radius: $border-radius;
+    display: block;
-    overflow: hidden;
   }
 
-  a:hover & {
+  // single photo post teasers
+  &:only-child {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  a:hover &,
+  a:focus & {
     border-color: $link-color !important;
+
+    .imageTitle {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
   }
 }

src/components/atoms/Image.tsx

@@ -1,17 +1,14 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
-import styles from './Image.module.scss'
 import { ImageProps } from '../../@types/Image'
+import styles from './Image.module.scss'
 
-export const Image = ({ fluid, fixed, alt }: ImageProps) => (
+export const Image = ({ title, fluid, fixed, alt, original }: ImageProps) => (
-  <Img
+  <figure className={styles.image} data-original={original && original.src}>
-    className={styles.imageWrap}
+    <Img backgroundColor="transparent" fluid={fluid} fixed={fixed} alt={alt} />
-    backgroundColor="transparent"
+    {title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
-    fluid={fluid}
+  </figure>
-    fixed={fixed}
-    alt={alt}
-  />
 )
 
 export const imageSizeDefault = graphql`

src/components/molecules/Featured.module.scss

@@ -47,6 +47,10 @@
     }
   }
 
+  figure {
+    margin: 0;
+  }
+
   :global(.gatsby-image-wrapper) {
     margin-bottom: 0;
   }

src/components/molecules/RelatedPosts.module.scss

@@ -35,6 +35,10 @@
     }
   }
 
+  figure {
+    margin: 0;
+  }
+
   img {
     margin-bottom: 0;
   }

src/pages/photos.module.scss

@@ -21,6 +21,8 @@
   }
 
   figure {
+    margin: 0;
+
     > div {
       margin: 0;
     }

src/pages/photos.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { graphql, Link } from 'gatsby'
 import Page from '../templates/Page'
-import PostImage from '../templates/Post/PostImage'
-import styles from './photos.module.scss'
 import { Post } from '../@types/Post'
+import { Image } from '../components/atoms/Image'
+import styles from './photos.module.scss'
 
 const page = {
   frontmatter: {
@@ -21,7 +21,7 @@ const PhotoThumb = ({ photo }: { photo: Post }) => {
     <article className={styles.photo}>
       {image && (
         <Link to={slug}>
-          <PostImage title={title} fluid={fluid} alt={title} />
+          <Image title={title} fluid={fluid} alt={title} />
         </Link>
       )}
     </article>

src/styles/_code.scss

@@ -31,6 +31,8 @@ kbd {
 }
 
 pre {
+  @include breakoutviewport;
+
   position: relative;
   display: block;
   padding: 0;
@@ -45,11 +47,6 @@ pre {
   -webkit-overflow-scrolling: touch;
   max-height: 800px;
 
-  @media (min-width: $screen-sm) {
-    margin-left: -($spacer);
-    margin-right: -($spacer);
-  }
-
   code {
     padding: $spacer / 2;
     white-space: pre;

src/styles/_variables.scss

@@ -77,7 +77,7 @@ $color-headings--dark: $brand-main-light;
 // Spacing
 /////////////////////////////////////
 
-$spacer: ($font-size-base * $line-height);
+$spacer: 1.7rem;
 $padding-base-vertical: 0.75rem;
 $padding-base-horizontal: 1.25rem;
 

src/templates/Page.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import { Post } from '../@types/Post'
 import SEO from '../components/atoms/SEO'
 import Layout from '../components/Layout'
 import styles from './Page.module.scss'
-import { Post } from '../@types/Post'
 
 export default function Page({
   title,

src/templates/Post/PostImage.module.scss

@@ -1,38 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.imageTitle {
-  transition: 0.1s ease-out;
-  font-size: $font-size-h3;
-  font-family: $font-family-headings;
-  line-height: $line-height-headings;
-  font-weight: $font-weight-headings;
-  font-style: normal;
-  text-align: left;
-  margin: 0;
-  position: absolute;
-  top: 10%;
-  padding: $spacer / 3 $spacer;
-  background: rgba($link-color, 0.85);
-  color: #fff !important;
-  text-shadow: 0 1px 0 #000;
-  left: 0;
-  opacity: 0;
-  transform: translate3d(0, -20px, 0);
-}
-
-.image {
-  display: block;
-
-  a & {
-    position: relative;
-    display: block;
-  }
-
-  a:hover & {
-    .imageTitle {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-}

src/templates/Post/PostImage.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { Image } from '../../components/atoms/Image'
-import styles from './PostImage.module.scss'
-import { ImageProps } from '../../@types/Image'
-
-const PostImage = ({ title, fluid, fixed, alt, original }: ImageProps) => (
-  <figure className={styles.image} data-original={original && original.src}>
-    <Image fluid={fluid} fixed={fixed} alt={alt} />
-    {title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
-  </figure>
-)
-
-export default PostImage

src/templates/Post/PostLead.module.scss

@@ -2,9 +2,10 @@
 
 .lead {
   font-size: $font-size-large;
-  margin-bottom: $spacer;
+  margin-bottom: $spacer * $line-height;
 }
 
 .index {
   font-size: $font-size-base;
+  margin-top: $spacer * $line-height;
 }

src/templates/Post/PostLinkActions.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Link } from 'gatsby'
 import { ReactComponent as Forward } from '../../images/forward.svg'
 import { ReactComponent as Infinity } from '../../images/infinity.svg'
-import styles from './PostLinkActions.module.scss'
 import stylesPostMore from './PostMore.module.scss'
+import styles from './PostLinkActions.module.scss'
 
 const PostLinkActions = ({
   linkurl,

src/templates/Post/PostTitle.module.scss

@@ -8,7 +8,7 @@
   font-size: $font-size-h1;
   color: $color-headings;
   margin-top: 0;
-  margin-bottom: $spacer;
+  margin-bottom: $spacer * $line-height;
 
   :global(.dark) & {
     color: $color-headings--dark;

src/templates/Post/index.module.scss

@@ -54,13 +54,3 @@
     }
   }
 }
-
-.imageWrap {
-  @include breakoutviewport();
-
-  figure {
-    max-width: none;
-    margin-top: $spacer * 1.5;
-    margin-bottom: 0;
-  }
-}

src/templates/Post/index.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { graphql } from 'gatsby'
+import { Post as PostMetadata } from '../../@types/Post'
 import Layout from '../../components/Layout'
-import PostImage from './PostImage'
+import Exif from '../../components/atoms/Exif'
+import SEO from '../../components/atoms/SEO'
+import RelatedPosts from '../../components/molecules/RelatedPosts'
 import PostTitle from './PostTitle'
 import PostLead from './PostLead'
 import PostContent from './PostContent'
 import PostActions from './PostActions'
 import PostLinkActions from './PostLinkActions'
-import SEO from '../../components/atoms/SEO'
 import PostMeta from './PostMeta'
-import Exif from '../../components/atoms/Exif'
-import RelatedPosts from '../../components/molecules/RelatedPosts'
 import styles from './index.module.scss'
-import { Post as PostMetadata } from '../../@types/Post'
+import { Image } from '../../components/atoms/Image'
 
 export default function Post({
   data,
@@ -40,13 +40,11 @@ export default function Post({
           {type === 'post' && <PostLead post={post} />}
           {type === 'photo' && <PostContent post={post} />}
           {image && (
-            <div className={styles.imageWrap}>
+            <Image
-              <PostImage
+              fluid={image.childImageSharp.fluid}
-                fluid={image.childImageSharp.fluid}
+              alt={title}
-                alt={title}
+              original={image.childImageSharp.original}
-                original={image.childImageSharp.original}
+            />
-              />
-            </div>
           )}
           {image && image.fields && <Exif exif={image.fields.exif} />}
 

src/templates/Posts.tsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import { Link, graphql } from 'gatsby'
+import { Post } from '../@types/Post'
 import Layout from '../components/Layout'
-import PostImage from './Post/PostImage'
+import Pagination from '../components/molecules/Pagination'
+import Featured from '../components/molecules/Featured'
 import PostTitle from './Post/PostTitle'
 import PostLead from './Post/PostLead'
 import PostContent from './Post/PostContent'
 import PostMore from './Post/PostMore'
 import PostLinkActions from './Post/PostLinkActions'
 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/index.module.scss'
+import { Image } from '../components/atoms/Image'
-import { Post } from '../@types/Post'
 
 export default function Posts({
   data,
@@ -43,14 +42,12 @@ export default function Posts({
 
         {image && (
           <Link to={slug} title={title}>
-            <div className={stylesPost.imageWrap}>
+            <Image
-              <PostImage
+              title={type === 'photo' ? title : null}
-                title={type === 'photo' ? title : null}
+              fluid={image.childImageSharp.fluid}
-                fluid={image.childImageSharp.fluid}
+              alt={title}
-                alt={title}
+              original={image.childImageSharp.original}
-                original={image.childImageSharp.original}
+            />
-              />
-            </div>
           </Link>
         )}