switch to srcset, kick out picturefill

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

@@ -15,12 +15,9 @@
         padding-bottom: ($spacer*3)
 
     .hentry__teaser
-        picture
+        @media $screen-xs
-            margin: 0
+            margin-left: 0
-
+            margin-right: 0
-            @media $screen-xs
-                margin-left: 0
-                margin-right: 0
 
 .featured-link
     @extend .link--nounderline

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

@@ -11,7 +11,6 @@
         margin-top: -($spacer * 1.5)
 
     figure
-        @extend .aligncenter
         position: relative
         display: inline-block
 
@@ -31,15 +30,8 @@
             color: #fff
             text-shadow: 0 1px 0 #000
 
-            left: -($spacer)
+            left: 0
-            top: $spacer * 6
+            top: $spacer * 4
-
-            @media $screen-sm
-                left: -($spacer * 4)
-
-            @media $screen-lg
-                left: -($spacer * 4)
-
             opacity: 0
             transform: translate3d(0, -20px, 0)
 

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

@@ -13,9 +13,8 @@
     margin-bottom: $spacer
 
 .related-post
-    picture
+    img
-        img
+        @extend .media-frame
-            @extend .media-frame
 
     .post-title
         @extend .h5, .transition, .text-dimmed
@@ -31,9 +30,8 @@
         &:focus
             .post-title
                 color: $link-color
-            picture
+            img
-                img
+                border-color: $link-color-hover
-                    border-color: $link-color-hover
 
         &:active
             .post-title

_src/_assets/styl/_kremalicious/content.styl

@@ -77,12 +77,11 @@
 /////////////////////////////////////
 
 .hentry__teaser
-    picture
+    @extend .breakoutviewport
-        @extend .breakoutviewport
+    max-width: none
-        max-width: none
+    display: block
-        display: block
+    margin-top: ($spacer*1.5)
-        margin-top: ($spacer*1.5)
+    margin-bottom: ($spacer*1.5)
-        margin-bottom: ($spacer*1.5)
 
     img
         @extend .media-frame

_src/_includes/head.html

@@ -79,9 +79,6 @@
         })(document);
     </script>
 
-    <!-- Picturefill  -->
-    <script src="/assets/js/picturefill.min.js" async></script>
-
     <!-- Canonical URL -->
     <link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
 

_src/_includes/picture.html

@@ -24,7 +24,4 @@
     {% endif %}
 {% endif %}
 
-<picture>
+<img src="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }} 1x, {{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }} 2x" alt="{{ post.title }}">
-    <source srcset="{{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }}" media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
-    <img srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" alt="">
-</picture>

gulpfile.babel.js

@@ -214,8 +214,7 @@ export const criticalCss = done => {
 export const js = () =>
     src([
         SRC + '/_assets/js/*.js',
-        '!' + SRC + '/_assets/js/_*.js',
+        '!' + SRC + '/_assets/js/_*.js'
-        'node_modules/picturefill/dist/picturefill.js'
     ])
     .pipe($.sourcemaps.init())
     .pipe($.include({

package.json

@@ -40,7 +40,6 @@
   "dependencies": {
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
-    "picturefill": "^3.0.2",
     "simple-jekyll-search": "^1.4.1",
     "time-elements": "^0.6.1",
     "vex-js": "^4.0.0",