featured tweaks

_config.yml

@@ -100,18 +100,18 @@ picture:
       source_large:
         media: "(min-width: 87.500em)"
         width: "1000"
-        height: "600"
+        height: "650"
       source_medium:
         media: "(min-width: 40.625em)"
         width: "800"
-        height: "500"
+        height: "550"
       source_small:
         media: "(min-width: 30em)"
         width: "600"
-        height: "400"
+        height: "450"
       source_default:
         width: "400"
-        height: "200"
+        height: "250"
     featured:
       ppi: [1, 2]
       attr:
@@ -120,11 +120,10 @@ picture:
       source_medium:
         media: "(min-width: 40.625em)"
         width: "275"
-      source_small:
-        media: "(min-width: 30em)"
-        width: "160"
+        height: "120"
       source_default:
-        width: "480"
+        width: "190"
+        height: "100"
     photothumb:
       ppi: [1, 2]
       attr:

_src/_assets/styl/content-featured.styl

@@ -8,27 +8,65 @@
     @extend .divider-bottom
     padding-bottom: ($line-height-computed*2)
 
-    @media $breakpoint2
-        padding-bottom: ($line-height-computed*3)
-
     .grid
         margin-bottom: 0
 
+    .grid__col
+        &:first-child
+            margin-left: -8%
+        &:last-child
+            margin-right: -8%
+
     @media $breakpoint2
+        padding-bottom: ($line-height-computed*3)
         .grid__col
             padding-top: 0
+            &:first-child
+                margin-left: -16%
+            &:last-child
+                margin-right: -16%
+
+    .hentry__teaser
+        picture
+            margin: 0
+
+            @media $breakpoint1
+                margin-left: 0
+                margin-right: 0
 
 .featured-link
     display: block
+    position: relative
 
     @media $breakpoint2
         &:hover
             transform: scale(1.03)
 
 .featured-title
-    @extend .visuallyhidden
+    @extend .transition
+    margin: 0
+    position: absolute
+    top: 25%
+    min-width: 45%
+    text-align: right
+    font-family: $headings-font-family
+    font-weight: $headings-font-weight
+    font-style: normal
+    font-size: $font-size-small
+    padding: ($line-height-computed/3)
+    background: $link-color
+    background: alpha($link-color, .7)
+    color: #fff
+    text-shadow: 0 1px 0 #000
+    left: 0
 
-.featured-image
+    opacity: 0
+    transform: translate(0, -20px)
+
+    .featured-link:hover &
+        opacity: 1
+        transform: translate(0, 0)
+
+img.featured-image
     display: block
     margin-bottom: 0
-    box-shadow: 0 1px 3px rgba(0,0,0,.2)

_src/_assets/styl/content.styl

@@ -26,11 +26,8 @@
     width: 100%
 
     @media $breakpoint2
-        padding-top: ($line-height-computed*4)
-        padding-bottom: ($line-height-computed*4)
-
-        .page-index &:first-child
-            padding-top: ($line-height-computed*3)
+        padding-top: ($line-height-computed*3)
+        padding-bottom: ($line-height-computed*3)
 
     .page-single &
         border: none
@@ -57,6 +54,7 @@
 
 .hentry__teaser
     picture
+        max-width: none
         display: block
         margin: ($line-height-computed*1.5) -8%
 
@@ -64,14 +62,6 @@
             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

_src/_assets/styl/media.styl

@@ -8,7 +8,7 @@
 // Responsive Media
 /////////////////////////////////////
 
-figure, img, svg, video, audio, embed, canvas
+figure, img, svg, video, audio, embed, canvas, picture
     max-width: 100%
     height: auto
     margin: 0 auto

_src/_includes/featured.html

@@ -1,6 +1,6 @@
 
 <aside class="featured">
-    <div class="grid grid--full grid-small--fit grid--gutters">
+    <div class="grid grid--fit grid-medium--gutters">
         {% for post in site.posts %}
             {% if post.featured %}
             <article class="grid__col">

_src/_posts/2009-01-05-the-mac-in-futurama.md

@@ -5,6 +5,7 @@ title: The Mac in Futurama
 author: Matthias Kretschmann
 date: 2009-01-05 03:14:45+00:00
 
+image: futurama-mac-teaser.png
 category: design
 tags:
     - futurama
@@ -14,7 +15,6 @@ slug: the-mac-in-futurama
 wordpress_id: 440
 ---
 
-![The Mac in Futurama](/media/futurama-mac-teaser.png)
 Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
 
 So the following screens from Futurama refer all to Macs available in or before 1999. Also you'll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.

_src/_posts/2009-02-17-out-of-whale-oil.md

@@ -8,6 +8,8 @@ author: Matthias Kretschmann
 
 date: 2009-02-17 20:11:55+00:00
 wordpress_id: 533
+
+featured: true
 category: goodies
 tags:
     - wallpaper

_src/_posts/2011-12-15-badged.md

@@ -5,7 +5,6 @@ title: Badged - iOS Style Notification Badges for WordPress
 image: Badged-Teaser-kremalicious@2x.png
 author: Matthias Kretschmann
 updated: 2014-10-11 07:56:46+00:00
-featured: true
 
 date: 2011-12-15 07:56:46+00:00
 wordpress_id: 1468

gulpfile.js

@@ -345,7 +345,7 @@ gulp.task('s3:assets', function() {
 //
 // Dev Server
 //
-gulp.task('server', function() {
+gulp.task('server', ['build'], function() {
     browser.init({
         server: DIST,
         port: PORT