fix teaser/photo display

_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
 

_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
 /////////////////////////////////////

_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 %}
 

_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>

_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 }} %}
 

_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 }}