fixes, full width teasers

_config.yml

@@ -84,23 +84,47 @@ picture:
   presets:
     default:
       ppi: [1, 2]
-      attr:
+      source_large:
-        itemprop: "image"
+        media: "(min-width: 87.500em)"
+        width: "1000"
       source_medium:
-        media: "(min-width: 35.556em)"
+        media: "(min-width: 40.625em)"
-        width: "640"
+        width: "800"
       source_small:
-        media: "(min-width: 26.667em)"
+        media: "(min-width: 30em)"
-        width: "480"
+        width: "600"
       source_default:
-        width: "320"
+        width: "400"
+    phototeaser:
+      ppi: [1, 2]
+      source_large:
+        media: "(min-width: 87.500em)"
+        width: "1000"
+        height: "600"
+      source_medium:
+        media: "(min-width: 40.625em)"
+        width: "800"
+        height: "500"
+      source_small:
+        media: "(min-width: 30em)"
+        width: "600"
+        height: "400"
+      source_default:
+        width: "400"
+        height: "200"
     featured:
       ppi: [1, 2]
       attr:
         class: "featured-image"
         itemprop: "image"
+      source_medium:
+        media: "(min-width: 40.625em)"
+        width: "275"
+      source_small:
+        media: "(min-width: 30em)"
+        width: "160"
       source_default:
-        width: "190"
+        width: "480"
     photothumb:
       ppi: [1, 2]
       attr:

_src/_assets/styl/content-featured.styl

@@ -6,21 +6,22 @@
 
 .featured
     @extend .divider-bottom
-    padding-top: ($line-height-computed*2)
     padding-bottom: ($line-height-computed*2)
 
     @media $breakpoint2
-        padding-top: ($line-height-computed*3)
         padding-bottom: ($line-height-computed*3)
 
     .grid
         margin-bottom: 0
 
+    @media $breakpoint2
+        .grid__col
+            padding-top: 0
+
 .featured-link
     display: block
 
     @media $breakpoint2
-
         &:hover
             transform: scale(1.03)
 

_src/_assets/styl/content-photo.styl

@@ -16,15 +16,9 @@
         figcaption
             margin-bottom: 0
 
-        img
-            max-height: 540px
-            width: auto
-            box-shadow: 0 1px 3px rgba(0,0,0,.2)
-
         figcaption
             @extend .transition
             position: absolute
-            left: 0
             top: 25%
             min-width: 45%
             text-align: right
@@ -38,6 +32,11 @@
             color: #fff
             text-shadow: 0 1px 0 #000
 
+            left: -8%
+
+            @media $breakpoint2
+                left: -16%
+
             opacity: 0
             transform: translate(0, -20px)
 

_src/_assets/styl/content.styl

@@ -11,8 +11,7 @@
 .page-title
     @extend .h2, .heading-band
     color: $brand-grey-light
-    margin-top: ($line-height-computed*2)
+    margin: 0
-    margin-bottom: ($line-height-computed/2)
 
     @media $breakpoint2
         margin-left: -108%
@@ -38,13 +37,9 @@
         .page-index &:first-child
             padding-top: ($line-height-computed*3)
 
-        .page-title + &,
-        .paginator-title + &
-            padding-top: ($line-height-computed*2)
-
     .page-single &
         border: none
-        padding-top: ($line-height-computed*2)
+        padding-top: 0
 
         &:before
             @extend .hide
@@ -62,6 +57,35 @@
         @extend .h3
 
 
+// Post/photo teaser
+/////////////////////////////////////
+
+.hentry picture:not(.related-photo picture):not(.masonry picture),
+.featured picture
+    display: block
+    margin-left: -8%
+    margin-right: -8%
+
+    @media $breakpoint2
+        margin-left: -16%
+        margin-right: -16%
+
+    img
+        box-shadow: 0 1px 3px rgba(0,0,0,.2)
+        border-radius: 0
+
+        @media $breakpoint2
+            border-radius: $border-radius-base
+
+.featured picture
+    @media $breakpoint1
+        margin-left: 0
+        margin-right: 0
+    @media $breakpoint2
+        margin-left: 0
+        margin-right: 0
+
+
 // Post Content
 /////////////////////////////////////
 

_src/_assets/styl/layout.styl

@@ -17,6 +17,12 @@
     max-width: 35em
     margin: 0 auto
 
+.site__document
+    padding-top: ($line-height-computed*2)
+
+    @media $breakpoint2
+        padding-top: ($line-height-computed*4)
+
 
 // topbar and footer as fixed
 // site background
@@ -30,6 +36,9 @@
 
     transform: translate3d(0,-200px,0)
 
+    @media $breakpoint1
+        transform: translate3d(0,-160px,0)
+
     .menu-open &
         transform: translate3d(0,0,0)
 

_src/_assets/styl/navigation.styl

@@ -75,8 +75,8 @@
 /////////////////////////////////////
 
 .paginator
-    padding-top: $line-height-computed
+    padding-top: ($line-height-computed*2)
-    padding-bottom: $line-height-computed
+    padding-bottom: ($line-height-computed*2)
 
     .icon
         margin-bottom: -3px

_src/_assets/styl/search.styl

@@ -43,7 +43,7 @@
 .search-popover
     position: absolute
     left: 0
-    top: 71px
+    top: 80px
     z-index: 6
     width: 100%
     padding-top: ($line-height-computed/2)
@@ -51,7 +51,7 @@
     border-bottom: 1px solid rgba(255,255,255,.7)
     box-shadow: 0 1px 4px alpha($brand-dark, .1)
 
-    @media $breakpoint2
+    @media only screen and (min-width: 40.625em) and (min-height: 650px)
         top: 0
 
 

_src/_assets/styl/variables.styl

@@ -146,9 +146,14 @@ $code-color                 = #C1C2C3
 $kbd-bg                     = $code-bg
 $kbd-color                  = $code-color
 
+
 // Responsive breakpoints
 /////////////////////////////////////
 
+$screen-small-min           = 30em
+$screen-medium-min          = 40.625em
+$screen-large-min           = 87.500em
+
 $breakpoint1                = 'only screen and (min-width: 30em)'
 $breakpoint2                = 'only screen and (min-width: 40.625em)'
 $breakpoint3                = 'only screen and (min-width: 87.500em)'

_src/_includes/articles.html

@@ -38,7 +38,7 @@
         <a class="photo-link" href="{{ post.url }}">
             <figure class="hmedia">
 
-                {% picture {{ post.image }} %}
+                {% picture phototeaser {{ post.image }} class="teaser-photo" %}
 
                 <figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
             </figure>

_src/_includes/footer.html

@@ -35,7 +35,7 @@
             </aside>
 
             <section class="footer-copyright">
-                <p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
+                <p>&copy; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
 
                 <p>
                     <a href="https://github.com/kremalicious/kremalicious3">

gulpfile.js

@@ -133,18 +133,10 @@ gulp.task('css', function() {
             src + '/_assets/styl/kremalicious3.styl',
             src + '/_assets/styl/poststyle-2300.styl'
         ])
-        .pipe($.stylus({
+        .pipe($.stylus({ 'include css': true })).on('error', onError)
-            'include css': true
-        })).on('error', onError)
         .pipe(gulp.dest(dist + '/assets/css/'))
-        .pipe($.autoprefixer({
+        .pipe($.autoprefixer({ browsers: 'last 2 versions' })).on('error', onError)
-            browsers: 'last 2 versions'
-        })).on('error', onError)
         .pipe($.combineMq({ beautify: false }))
-        // .pipe($.uncss({
-        //     html: [dist + '/**/*.html'],
-        //     ignore: ['.in', '.collapsing']
-        // }))
         .pipe($.cssmin())
         .pipe($.rename({ suffix: '.min' }))
         .pipe($.header(banner, { pkg: pkg }))
@@ -163,10 +155,8 @@ gulp.task('js-libraries', function() {
 
     return merge(picturefill)
         .pipe($.uglify()).on('error', onError)
-        .pipe($.rename({
+        .pipe($.rename({ suffix: '.min'}))
-            suffix: '.min'
+        .pipe(gulp.dest(dist + '/assets/js/'));
-        }))
-        .pipe(gulp.dest(dist + '/assets/js/'))
 });
 
 // Project js
@@ -181,11 +171,11 @@ gulp.task('js-project', function() {
             'bower_components/time-elements/time-elements.js',
             src + '/_assets/js/*.js'
         ])
+        .pipe($.concat('kremalicious3.js'))
+        .pipe(gulp.dest(dist + '/assets/js/'))
         .pipe($.uglify()).on('error', onError)
-        .pipe($.concat('kremalicious3.min.js'))
+        .pipe($.rename({ suffix: '.min'}))
-        .pipe($.header(banner, {
+        .pipe($.header(banner, { pkg: pkg }))
-            pkg: pkg
-        }))
         .pipe(gulp.dest(dist + '/assets/js/'))
         .pipe($.connect.reload());
 });
@@ -221,7 +211,7 @@ gulp.task('icons', function() {
 gulp.task('svg-fallbacks', function() {
     return gulp.src(dist + '/assets/img/*.svg')
         .pipe($.svg2png())
-        .pipe(gulp.dest(dist + '/assets/img/png/'))
+        .pipe(gulp.dest(dist + '/assets/img/'))
 });