From a19a603923455e693b70f87206b27607a5efd90f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 7 Sep 2018 01:00:13 +0200
Subject: [PATCH] photo titles

---
 src/styles/global.scss          |  1 -
 src/templates/Post.jsx          |  2 +-
 src/templates/Post.module.scss  |  2 +-
 src/templates/Posts.jsx         | 13 +++++--
 src/templates/Posts.module.scss | 67 ++++++++++++++++++++-------------
 5 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index fd906d85..f55417c2 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -173,7 +173,6 @@ a {
     &:focus {
         outline: 0;
         color: lighten($link-color, 10%);
-        transform: translate3d(0, -.1rem, 0);
     }
 
     &:active {
diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx
index e42e5493..487a4391 100644
--- a/src/templates/Post.jsx
+++ b/src/templates/Post.jsx
@@ -26,7 +26,7 @@ const Post = ({ data, location }) => {
         <PostLead post={post} />
 
         {image && (
-          <figure className={styles.hentry__teaser}>
+          <figure className={styles.hentryImage}>
             <Image fluid={image.childImageSharp.fluid} alt={title} />
           </figure>
         )}
diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss
index e839130f..c66e1e4e 100644
--- a/src/templates/Post.module.scss
+++ b/src/templates/Post.module.scss
@@ -10,7 +10,7 @@
 // Post/photo teaser
 /////////////////////////////////////
 
-.hentry__teaser {
+.hentryImage {
     @include breakoutviewport();
 
     max-width: none;
diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx
index 070abb93..d9aee64c 100644
--- a/src/templates/Posts.jsx
+++ b/src/templates/Posts.jsx
@@ -22,17 +22,24 @@ const Posts = ({ data, location, pageContext }) => {
 
     return (
       <article className={styles.hentry} key={node.id}>
-        <PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
+        {type !== 'photo' && (
+          <PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
+        )}
 
         {image && (
-          <figure className={styles.hentry__image}>
+          <figure className={styles.hentryImage}>
             <Link to={slug}>
               <Image fluid={image.childImageSharp.fluid} alt={title} />
+              {type === 'photo' && (
+                <figcaption className={styles.hentryImageTitle}>
+                  {title}
+                </figcaption>
+              )}
             </Link>
           </figure>
         )}
 
-        <PostLead post={node} />
+        {type === 'post' && <PostLead post={node} />}
 
         {type === 'post' && <PostMore to={slug}>Continue Reading</PostMore>}
 
diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss
index 5e0f4114..5e91cd2a 100644
--- a/src/templates/Posts.module.scss
+++ b/src/templates/Posts.module.scss
@@ -15,12 +15,51 @@
         padding-top: $spacer * 3;
         padding-bottom: $spacer * 3;
     }
+
+    a {
+        position: relative;
+        display: block;
+    }
+}
+
+.hentryImageTitle {
+    transition: .1s ease-out;
+    font-size: $font-size-h3;
+    font-family: $font-family-headings;
+    line-height: $line-height-headings;
+    font-weight: $font-weight-headings;
+    letter-spacing: -.02em;
+    margin: 0;
+    position: absolute;
+    top: 10%;
+    padding: $spacer / 3 $spacer;
+    background: rgba($link-color, .85);
+    color: #fff;
+    text-shadow: 0 1px 0 #000;
+    left: 0;
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+}
+
+.hentryImage {
+    composes: hentryImage from './Post.module.scss';
+
+    a:hover {
+        > div {
+            border-color: $link-color !important;
+        }
+
+        .hentryImageTitle {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
 }
 
 .archiveTitle {
     @include heading-band();
 
-    font-size: $font-size-h4;
+    font-size: $font-size-h3;
     margin-top: 0;
     margin-bottom: 0;
 
@@ -28,29 +67,3 @@
         margin-left: -117%;
     }
 }
-
-// Post/photo teaser
-/////////////////////////////////////
-
-.hentry__image {
-    @include breakoutviewport();
-
-    max-width: none;
-    display: block;
-    margin-top: $spacer * 1.5;
-    margin-bottom: $spacer * 1.5;
-
-    > div {
-        @include media-frame();
-
-        border-radius: 0;
-
-        @media (min-width: $screen-sm) {
-            border-radius: $border-radius;
-        }
-    }
-
-    img {
-        border-radius: 0;
-    }
-}