From bdf9065e9b59b95ac2ab55e4431e93c45bad9a3d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 26 Sep 2015 22:47:34 +0200
Subject: [PATCH] fix teaser/photo display

---
 _src/_assets/styl/content.styl | 36 +++++++++++++++-------------------
 _src/_assets/styl/media.styl   |  5 -----
 _src/_includes/articles.html   |  8 ++++----
 _src/_includes/featured.html   |  2 +-
 _src/_layouts/photo.html       |  2 +-
 _src/_layouts/post.html        |  4 +++-
 6 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl
index 95b948ab..bc8c9cae 100644
--- a/_src/_assets/styl/content.styl
+++ b/_src/_assets/styl/content.styl
@@ -60,16 +60,23 @@
 // Post/photo teaser
 /////////////////////////////////////
 
-.hentry picture:not(.related-photo picture):not(.masonry picture),
-.featured picture
-    display: block
-    margin-left: -8%
-    margin-right: -8%
+.hentry__teaser
+    picture
+        display: block
+        margin: ($line-height-computed*1.5) -8%
 
-    @media $breakpoint2
-        margin-left: -16%
-        margin-right: -16%
+        @media $breakpoint2
+            margin-left: -16%
+            margin-right: -16%
 
+    .featured &
+        picture
+            @media $breakpoint1
+                margin-left: 0
+                margin-right: 0
+
+
+.hentry__teaser
     img
         box-shadow: 0 1px 3px rgba(0,0,0,.2)
         border-radius: 0
@@ -77,14 +84,6 @@
         @media $breakpoint2
             border-radius: $border-radius-base
 
-.featured picture
-    @media $breakpoint1
-        margin-left: 0
-        margin-right: 0
-    @media $breakpoint2
-        margin-left: 0
-        margin-right: 0
-
 
 // Post Content
 /////////////////////////////////////
@@ -97,12 +96,9 @@
     h1
         font-size: ceil($font-size-base * 2.5)
 
-    img:not(.teaser)
+    img:not(.hentry__teaser img)
         margin-bottom: ($line-height-computed/2)
 
-    .teaser
-        box-shadow: 0 1px 3px rgba(0,0,0,.2)
-
     p:last-child
         margin-bottom: 0
 
diff --git a/_src/_assets/styl/media.styl b/_src/_assets/styl/media.styl
index 9d4c17ca..cb7eb7e1 100644
--- a/_src/_assets/styl/media.styl
+++ b/_src/_assets/styl/media.styl
@@ -21,11 +21,6 @@ figure, img, svg, video, audio, embed, canvas
 img
     vertical-align: middle
 
-.teaser,
-.teaser img
-    margin-top: ($line-height-computed*1.5)
-    margin-bottom: ($line-height-computed*1.5)
-
 
 // Media Positioning
 /////////////////////////////////////
diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html
index 6cf3f06e..e6501253 100644
--- a/_src/_includes/articles.html
+++ b/_src/_includes/articles.html
@@ -36,9 +36,9 @@
     <article class="hentry format-photo">
 
         <a class="photo-link" href="{{ post.url }}">
-            <figure class="hmedia">
+            <figure class="hentry__teaser hmedia">
 
-                {% picture phototeaser {{ post.image }} class="teaser-photo" %}
+                {% picture phototeaser {{ post.image }} %}
 
                 <figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
             </figure>
@@ -56,8 +56,8 @@
         <section class="entry-content">
 
             {% if post.image %}
-                <a href="{{ post.url }}">
-                    {% picture {{ post.image }} class="teaser" %}
+                <a class="hentry__teaser" href="{{ post.url }}">
+                    {% picture {{ post.image }} %}
                 </a>
             {% endif %}
 
diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html
index 678d4d34..d03ba44c 100644
--- a/_src/_includes/featured.html
+++ b/_src/_includes/featured.html
@@ -4,7 +4,7 @@
         {% for post in site.posts %}
             {% if post.featured %}
             <article class="grid__col">
-                <a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
+                <a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
                     {% picture featured {{ post.image }} %}
                     <h1 class="featured-title">{{ post.title | titlecase }}</h1>
                 </a>
diff --git a/_src/_layouts/photo.html b/_src/_layouts/photo.html
index beca8e65..1111d889 100644
--- a/_src/_layouts/photo.html
+++ b/_src/_layouts/photo.html
@@ -6,7 +6,7 @@ layout: base
 
     <article class="hentry format-photo col6">
 
-        <figure class="hmedia">
+        <figure class="hentry__teaser hmedia">
 
             {% picture {{ page.image }} %}
 
diff --git a/_src/_layouts/post.html b/_src/_layouts/post.html
index 33d7328a..81071fc6 100644
--- a/_src/_layouts/post.html
+++ b/_src/_layouts/post.html
@@ -11,7 +11,9 @@ layout: base
 
         <section class="entry-content">
             {% if page.image %}
-                {% picture {{ page.image }} class="teaser" %}
+                <figure class="hentry__teaser">
+                    {% picture {{ page.image }} %}
+                </figure>
             {% endif %}
 
             {{ content }}