consistent hpoto link styles, add images to related posts

_src/_assets/styl/content-featured.styl

@@ -38,6 +38,11 @@
     display: block
     position: relative
 
+    &:hover,
+    &:focus
+        img
+            border-color: $link-color
+
 .featured-title
     @extend .transition
     transition-property: transform, opacity
@@ -52,7 +57,7 @@
     font-size: $font-size-small
     padding: ($spacer/3)
     background: $link-color
-    background: alpha($link-color, .7)
+    background: alpha($link-color, .85)
     color: #fff
     text-shadow: 0 1px 0 #000
     left: 0

_src/_assets/styl/content-photo.styl

@@ -75,6 +75,10 @@
 .photo-link
     display: block
 
+    &:hover
+        img
+            border-color: $link-color
+
     &:active
         background: none
 

_src/_assets/styl/content-related.styl

@@ -13,26 +13,33 @@
     margin-bottom: $spacer
 
 .related-post
+    picture
+        img
+            @extend .media-frame
 
     .post-title
-        @extend .h5
+        @extend .h5, .transition
-        margin: 0
+        margin-top: ($spacer / 3)
+        margin-bottom: 0
+        padding: 0 2px
 
-    .post-title,
     .post-title-link
         @extend .transition
-        color: $brand-grey-light
+        display: block
 
         &:hover,
         &:focus
-            color: $link-color
+            .post-title
+                color: $link-color
+            picture
+                img
+                    border-color: $link-color-hover
 
         &:active
-            color: #fff
+            .post-title
-            transition: none
+                color: #fff
+                transition: none
 
-    .post-title-link
-        display: block
 
 //
 // Related Photos
@@ -44,9 +51,11 @@
 
     .photo-link
         display: block
-        border: 2px solid transparent
+        img
+            @extend .media-frame
 
         &:hover,
         &:focus
-            border-color: $link-color-hover
+            img
-            border-radius: $border-radius-base
+                border-color: $link-color-hover
+                border-radius: $border-radius-base

_src/_assets/styl/content.styl

@@ -63,12 +63,17 @@
             margin-right: -16%
 
     img
-        box-shadow: 0 1px 3px rgba(0,0,0,.2)
+        @extend .media-frame
         border-radius: 0
 
         @media $breakpoint2
             border-radius: $border-radius-base
 
+.hentry__teaser--link
+    &:hover,
+    &:focus
+        img
+            border-color: $link-color
 
 // Post Content
 /////////////////////////////////////

_src/_assets/styl/media.styl

@@ -37,3 +37,13 @@ img.aligncenter
         margin: 0 $spacer $spacer 0
     img.alignright
         margin: 0 0 $spacer $spacer
+
+
+// Image frame style
+/////////////////////////////////////
+
+.media-frame
+    @extend .transition
+    border: 2px solid transparent
+    border-radius: $border-radius-base
+    box-shadow: 0 1px 3px alpha($brand-grey,.2)

_src/_includes/articles.html

@@ -56,7 +56,7 @@
         <section class="entry-content">
 
             {% if post.image %}
-                <a class="hentry__teaser" href="{{ post.url }}">
+                <a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
                     {% picture {{ post.image }} %}
                 </a>
             {% endif %}

_src/_includes/relatedposts.html

@@ -9,7 +9,8 @@
 
                 <article class="related-post grid__col">
                     <a class="post-title-link" href="{{ post.url }}">
-                        <h1 class="post-title">{{ post.title }}</h1>
+                        {% picture featured {{ post.image }} %}
+                        <h1 class="post-title">{{ post.title | titlecase }}</h1>
                     </a>
                 </article>
 

_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md

@@ -11,6 +11,8 @@ date: 2012-07-16 14:36:58+00:00
 categories:
     - design
     - goodies
+tags:
+    - css
 ---
 
 There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.