From 48ec5417ac3376eacc4ee8aadb77948f50f40392 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 9 Sep 2017 22:36:04 +0200
Subject: [PATCH] switch to srcset, kick out picturefill

---
 .../_assets/styl/_kremalicious/content-featured.styl |  9 +++------
 _src/_assets/styl/_kremalicious/content-photo.styl   | 12 ++----------
 _src/_assets/styl/_kremalicious/content-related.styl | 10 ++++------
 _src/_assets/styl/_kremalicious/content.styl         | 11 +++++------
 _src/_includes/head.html                             |  3 ---
 _src/_includes/picture.html                          |  5 +----
 gulpfile.babel.js                                    |  3 +--
 package.json                                         |  1 -
 8 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/_src/_assets/styl/_kremalicious/content-featured.styl b/_src/_assets/styl/_kremalicious/content-featured.styl
index bc9022ff..272817a2 100644
--- a/_src/_assets/styl/_kremalicious/content-featured.styl
+++ b/_src/_assets/styl/_kremalicious/content-featured.styl
@@ -15,12 +15,9 @@
         padding-bottom: ($spacer*3)
 
     .hentry__teaser
-        picture
-            margin: 0
-
-            @media $screen-xs
-                margin-left: 0
-                margin-right: 0
+        @media $screen-xs
+            margin-left: 0
+            margin-right: 0
 
 .featured-link
     @extend .link--nounderline
diff --git a/_src/_assets/styl/_kremalicious/content-photo.styl b/_src/_assets/styl/_kremalicious/content-photo.styl
index d8af08c7..abf9a754 100644
--- a/_src/_assets/styl/_kremalicious/content-photo.styl
+++ b/_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)
-            top: $spacer * 6
-
-            @media $screen-sm
-                left: -($spacer * 4)
-
-            @media $screen-lg
-                left: -($spacer * 4)
-
+            left: 0
+            top: $spacer * 4
             opacity: 0
             transform: translate3d(0, -20px, 0)
 
diff --git a/_src/_assets/styl/_kremalicious/content-related.styl b/_src/_assets/styl/_kremalicious/content-related.styl
index 37170be1..7871907b 100644
--- a/_src/_assets/styl/_kremalicious/content-related.styl
+++ b/_src/_assets/styl/_kremalicious/content-related.styl
@@ -13,9 +13,8 @@
     margin-bottom: $spacer
 
 .related-post
-    picture
-        img
-            @extend .media-frame
+    img
+        @extend .media-frame
 
     .post-title
         @extend .h5, .transition, .text-dimmed
@@ -31,9 +30,8 @@
         &:focus
             .post-title
                 color: $link-color
-            picture
-                img
-                    border-color: $link-color-hover
+            img
+                border-color: $link-color-hover
 
         &:active
             .post-title
diff --git a/_src/_assets/styl/_kremalicious/content.styl b/_src/_assets/styl/_kremalicious/content.styl
index f35eb2e6..9f1d257b 100644
--- a/_src/_assets/styl/_kremalicious/content.styl
+++ b/_src/_assets/styl/_kremalicious/content.styl
@@ -77,12 +77,11 @@
 /////////////////////////////////////
 
 .hentry__teaser
-    picture
-        @extend .breakoutviewport
-        max-width: none
-        display: block
-        margin-top: ($spacer*1.5)
-        margin-bottom: ($spacer*1.5)
+    @extend .breakoutviewport
+    max-width: none
+    display: block
+    margin-top: ($spacer*1.5)
+    margin-bottom: ($spacer*1.5)
 
     img
         @extend .media-frame
diff --git a/_src/_includes/head.html b/_src/_includes/head.html
index 293f4f28..4310b54a 100644
--- a/_src/_includes/head.html
+++ b/_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','' }}">
 
diff --git a/_src/_includes/picture.html b/_src/_includes/picture.html
index 7bc27d89..7405098b 100644
--- a/_src/_includes/picture.html
+++ b/_src/_includes/picture.html
@@ -24,7 +24,4 @@
     {% endif %}
 {% endif %}
 
-<picture>
-    <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>
+<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 }}">
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 17f36e30..ca77cdc7 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -214,8 +214,7 @@ export const criticalCss = done => {
 export const js = () =>
     src([
         SRC + '/_assets/js/*.js',
-        '!' + SRC + '/_assets/js/_*.js',
-        'node_modules/picturefill/dist/picturefill.js'
+        '!' + SRC + '/_assets/js/_*.js'
     ])
     .pipe($.sourcemaps.init())
     .pipe($.include({
diff --git a/package.json b/package.json
index d15785d1..3d3eaed5 100644
--- a/package.json
+++ b/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",