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 }) => {
{image && (
-
+
)}
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 (
-
+ {type !== 'photo' && (
+
+ )}
{image && (
-
+
+ {type === 'photo' && (
+
+ {title}
+
+ )}
)}
-
+ {type === 'post' && }
{type === 'post' && Continue Reading}
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;
- }
-}