nicer photo index view

_src/_assets/styl/_kremalicious/content-photo.styl

@@ -67,7 +67,10 @@
 
 
 .photo-link
-    display: block
+    display: block;
+    
+    img
+        @extend .media-frame
 
     &,
     &:hover,
@@ -75,9 +78,11 @@
     &:active
         box-shadow: none
 
-    &:hover
+    &:hover,
+    &:focus
         img
-            border-color: $link-color
+            border-color: $link-color-hover
+            border-radius: $border-radius-base
 
     &:active
         background: none

_src/_assets/styl/_kremalicious/content-related.styl

@@ -48,14 +48,3 @@
     @extend .divider-top
     margin-top: $spacer
     padding-top: $spacer
-
-    .photo-link
-        display: block
-        img
-            @extend .media-frame
-
-        &:hover,
-        &:focus
-            img
-                border-color: $link-color-hover
-                border-radius: $border-radius-base

_src/_includes/photos.html

@@ -0,0 +1,7 @@
+<article class="grid__col">
+
+    <a class="photo-link" href="{{ post.url }}" title="{{ post.title }}">
+        {% picture photothumb {{ post.image }} %}
+    </a>
+
+</article>

_src/_layouts/archive.html

@@ -2,7 +2,7 @@
 layout: base
 ---
 
-<section role="main" id="main" class="grid">
+<section role="main" id="main">
 
     {% if page.type == 'category' %}
     <h1 class="page-title">{{ page.title }}</h1>
@@ -12,9 +12,17 @@ layout: base
     <h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
     {% endif %}
     
+    {% if page.path contains "photos" %}<div class="grid grid--gutters grid--half grid-medium--third">{% endif %}
         {% for post in page.posts %}
+            
+            {% if post.layout == "photo" %}
+                {% include photos.html %}
+            {% else %}
                 {% include articles.html %}
+            {% endif %}
+            
         {% endfor %}
+    {% if page.path contains "photos" %}</div>{% endif %}
 
 </section>