diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js
index 016256b1..8c93d333 100644
--- a/_src/_assets/js/_search.js
+++ b/_src/_assets/js/_search.js
@@ -26,7 +26,7 @@ var Search = (function(w, d) {
                 // show search field
                 _config.searcharea
                     .removeClass('is-ready animation-bounceOutUp')
-                    .addClass('is-ready animation-slideDown')
+                    .addClass('is-ready animation-slidedown')
                     .on('animationend webkitAnimationEnd oAnimationEnd', function(){
                         _config.body.addClass('has-search-open');
                     });
@@ -93,7 +93,7 @@ var Search = (function(w, d) {
         searchReset: function() {
             // revert all search elements
             _config.searcharea
-                .removeClass('animation-slideDown')
+                .removeClass('animation-slidedown')
                 .addClass('animation-bounceOutUp')
                 .on('animationend webkitAnimationEnd oAnimationEnd', function(){
                     _config.body.removeClass('has-search-open');
diff --git a/_src/_assets/styl/_kremalicious/animations.styl b/_src/_assets/styl/_kremalicious/animations.styl
index 7e941b0b..00ed28cc 100644
--- a/_src/_assets/styl/_kremalicious/animations.styl
+++ b/_src/_assets/styl/_kremalicious/animations.styl
@@ -16,19 +16,20 @@ gpuacceleration()
     gpuacceleration()
 
 
-// Loading Thingy
+// Slide Up
 ////////////////////////////////////
 
-.loading
-    @extend .gpuacceleration
-    animation: loadingThingy .2s infinite
-
-@keyframes loadingThingy
+@keyframes slideUp
     0%
-        opacity: 1
-    100%
+        transform: translate3d(0, 100px, 0)
         opacity: 0
 
+    100%
+        transform: translate3d(0, 0, 0)
+        opacity: 1
+
+.animation-slideup
+    animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
 
 //
 // Bounce
@@ -39,18 +40,14 @@ gpuacceleration()
 
 // Down
 @keyframes slideDown
-    0%, 60%, 75%, 90%, 100%
-        // http://cubic-bezier.com/#.06,.85,.54,1.39
-        transition-timing-function: cubic-bezier(.06,.85,.54,1)
-
     0%
         transform: translate3d(0, -100px, 0)
 
     100%
         transform: none
 
-.animation-slideDown
-    animation: slideDown .2s both
+.animation-slidedown
+    animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
 
 // Up
 @keyframes bounceOutUp
diff --git a/_src/_assets/styl/_kremalicious/buttons.styl b/_src/_assets/styl/_kremalicious/buttons.styl
index 9a09507f..805a2174 100644
--- a/_src/_assets/styl/_kremalicious/buttons.styl
+++ b/_src/_assets/styl/_kremalicious/buttons.styl
@@ -53,6 +53,7 @@ a.btn
         background-color: transparent
         box-shadow: 0 1px 0 #fff
         transition: none
+        outline: 0
 
     &:focus
        outline: 0
@@ -72,7 +73,7 @@ a.btn
     &.col3
         margin-bottom: ($spacer/2)
 
-        @media $breakpoint2
+        @media $screen-sm
             margin-bottom: 0
     span
         font-size: .9em
@@ -156,7 +157,7 @@ a.btn-primary
     display: block
     margin-top: 0
 
-    @media $breakpoint1
+    @media $screen-xs
         display: flex
         margin-top: -($gutter-space)
 
diff --git a/_src/_assets/styl/_kremalicious/code.styl b/_src/_assets/styl/_kremalicious/code.styl
index 3281c39a..c55f69f1 100644
--- a/_src/_assets/styl/_kremalicious/code.styl
+++ b/_src/_assets/styl/_kremalicious/code.styl
@@ -30,28 +30,31 @@ kbd
     box-shadow: inset 0 1px 0 rgba(#fff, .4)
 
 pre
+    @extend .breakoutviewport
     display: block
     padding: 0
-    margin: 0 0 $spacer
+    margin-bottom: $spacer
     line-height: $line-height
     color: $code-color
     background-color: $code-bg
-    border-radius: $border-radius-base
 
     // make 'em scrollable
     overflow: scroll
     -webkit-overflow-scrolling: touch
     max-height: 300px
 
-    @media $breakpoint2
+    @media $screen-sm
         max-height: 500px
 
+    @media $screen-md
+        border-radius: $border-radius-base
+
     // Account for some code outputs that place code tags in pre tags
     code
         white-space: pre
         overflow: auto
         display: block
-        padding: ($spacer/2) 12px
+        padding: ($spacer/2) $spacer
         font-size: inherit
         color: inherit
         background-color: transparent
diff --git a/_src/_assets/styl/_kremalicious/content-featured.styl b/_src/_assets/styl/_kremalicious/content-featured.styl
index c76acb7e..21ee4c1b 100644
--- a/_src/_assets/styl/_kremalicious/content-featured.styl
+++ b/_src/_assets/styl/_kremalicious/content-featured.styl
@@ -5,38 +5,20 @@
 //
 
 .featured
+    @extend .breakoutviewport
     padding-bottom: ($spacer*2)
 
     .grid
         margin-bottom: 0
 
-    .grid__col
-        &:first-child
-            margin-left: -($spacer)
-        &:last-child
-            margin-right: -($spacer)
-
-    @media $breakpoint2
+    @media $screen-sm
         padding-bottom: ($spacer*3)
-        .grid__col
-            padding-top: 0
-            &:first-child
-                margin-left: -($spacer * 2)
-            &:last-child
-                margin-right: -($spacer * 2)
-
-    @media $breakpoint3
-        .grid__col
-            &:first-child
-                margin-left: -($spacer * 4)
-            &:last-child
-                margin-right: -($spacer * 4)
 
     .hentry__teaser
         picture
             margin: 0
 
-            @media $breakpoint1
+            @media $screen-xs
                 margin-left: 0
                 margin-right: 0
 
diff --git a/_src/_assets/styl/_kremalicious/content-link.styl b/_src/_assets/styl/_kremalicious/content-link.styl
index 280cd4f7..8882b0d6 100644
--- a/_src/_assets/styl/_kremalicious/content-link.styl
+++ b/_src/_assets/styl/_kremalicious/content-link.styl
@@ -11,7 +11,7 @@
     padding: ($spacer/3) 0
     max-width: 70%
 
-    @media $breakpoint2
+    @media $screen-sm
         max-width: 50%
 
 .permalink-link
diff --git a/_src/_assets/styl/_kremalicious/content-photo.styl b/_src/_assets/styl/_kremalicious/content-photo.styl
index b5a9445f..3433a5e1 100644
--- a/_src/_assets/styl/_kremalicious/content-photo.styl
+++ b/_src/_assets/styl/_kremalicious/content-photo.styl
@@ -7,11 +7,6 @@
 .hentry.format-photo
     @extend .textcenter
 
-    .hentry__teaser
-        picture
-            margin-top: 0
-            margin-bottom: 0
-
     figure
         @extend .aligncenter
         position: relative
@@ -36,10 +31,10 @@
             left: -($spacer)
             top: $spacer
 
-            @media $breakpoint2
+            @media $screen-sm
                 left: -($spacer * 2)
 
-            @media $breakpoint3
+            @media $screen-lg
                 left: -($spacer * 4)
 
             opacity: 0
@@ -57,7 +52,7 @@
         padding-top: 0
         padding-bottom: ($spacer*3)
 
-        @media $breakpoint2
+        @media $screen-sm
             padding-top: 0
             padding-bottom: ($spacer*6)
 
diff --git a/_src/_assets/styl/_kremalicious/content.styl b/_src/_assets/styl/_kremalicious/content.styl
index 1e37997e..6a8e0ba2 100644
--- a/_src/_assets/styl/_kremalicious/content.styl
+++ b/_src/_assets/styl/_kremalicious/content.styl
@@ -28,7 +28,7 @@
     &:first-child
         padding-top: 0
 
-    @media $breakpoint2
+    @media $screen-sm
         padding-top: ($spacer*3)
         padding-bottom: ($spacer*3)
 
@@ -56,25 +56,17 @@
 
 .hentry__teaser
     picture
+        @extend .breakoutviewport
         max-width: none
         display: block
-        margin: ($spacer*1.5)
-        margin-left: -($spacer)
-        margin-right: -($spacer)
-
-        @media $breakpoint2
-            margin-left: -($spacer * 2)
-            margin-right: -($spacer * 2)
-
-        @media $breakpoint3
-            margin-left: -($spacer * 4)
-            margin-right: -($spacer * 4)
+        margin-top: ($spacer*1.5)
+        margin-bottom: ($spacer*1.5)
 
     img
         @extend .media-frame
         border-radius: 0
 
-        @media $breakpoint2
+        @media $screen-sm
             border-radius: $border-radius-base
 
 .hentry__teaser--link
@@ -131,6 +123,7 @@
 .time
     margin-bottom: ($spacer*2)
 
+
 // Categories & Tags
 /////////////////////////////////////
 
diff --git a/_src/_assets/styl/_kremalicious/grid.styl b/_src/_assets/styl/_kremalicious/grid.styl
index 443901a3..6fe40f25 100644
--- a/_src/_assets/styl/_kremalicious/grid.styl
+++ b/_src/_assets/styl/_kremalicious/grid.styl
@@ -66,21 +66,21 @@
     > .grid__col
         padding: $gutter-space 0 0 $gutter-space
 
-@media $breakpoint1
+@media $screen-xs
     .grid-small--gutters
         margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
 
         > .grid__col
             padding: $gutter-space 0 0 $gutter-space
 
-@media $breakpoint2
+@media $screen-sm
     .grid-medium--gutters
         margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
 
         > .grid__col
             padding: $gutter-space 0 0 $gutter-space
 
-@media $breakpoint3
+@media $screen-lg
     .grid-large--gutters
         margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
 
@@ -122,7 +122,7 @@
         flex: 0 0 82.5%
 
 
-@media $breakpoint1
+@media $screen-xs
     .grid-small--fit
         > .grid__col
             flex: 1
@@ -154,7 +154,7 @@
             flex: 0 0 82.5%
 
 
-@media $breakpoint2
+@media $screen-sm
     .grid-medium--fit
         > .grid__col
             flex: 1
@@ -185,7 +185,7 @@
         > .grid__col
             flex: 0 0 82.5%
 
-@media $breakpoint3
+@media $screen-lg
     .grid-large--fit
         > .grid__col
             flex: 1
diff --git a/_src/_assets/styl/_kremalicious/header.styl b/_src/_assets/styl/_kremalicious/header.styl
index 25f63e53..51d73c1d 100644
--- a/_src/_assets/styl/_kremalicious/header.styl
+++ b/_src/_assets/styl/_kremalicious/header.styl
@@ -5,23 +5,30 @@
 //
 
 .site__header
-    width: 100%
     background: $body-bg
     margin-top: ($spacer/2)
     margin-bottom: ($spacer/2)
 
-    @media $breakpoint2
+    @media $screen-sm
         margin-top: $spacer
         margin-bottom: $spacer
 
     .grid
+        @extend .breakoutviewport
+        padding-left: $spacer
+        padding-right: $spacer
         position: relative
 
+        @media $screen-md
+            padding-left: 0
+            padding-right: 0
+
         > .banner,
         > .nav-main
             padding-top: 0
 
 
+
 // Logo
 /////////////////////////////////////
 
@@ -33,7 +40,7 @@
     width: 47px
     height: 31px
 
-    @media $breakpoint2
+    @media $screen-sm
         width: 183px
 
     @media $highDPI
diff --git a/_src/_assets/styl/_kremalicious/layout.styl b/_src/_assets/styl/_kremalicious/layout.styl
index 30441835..dfb19452 100644
--- a/_src/_assets/styl/_kremalicious/layout.styl
+++ b/_src/_assets/styl/_kremalicious/layout.styl
@@ -10,17 +10,18 @@
     padding: 0 $spacer
     width: 100%
 
-    @media $breakpoint2
+    @media $screen-sm
         padding: 0 ($spacer * 2)
 
 .container
     max-width: 35em
-    margin: 0 auto
+    margin-left: auto
+    margin-right: auto
 
 .site__document
     padding-top: ($spacer*2)
 
-    @media $breakpoint2
+    @media $screen-sm
         padding-top: ($spacer*4)
 
 
@@ -34,9 +35,9 @@
     border-bottom: 1px solid rgba(255,255,255,.7)
     box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
 
-    transform: translate3d(0,-($spacer*6.5),0)
+    transform: translate3d(0,-($spacer*7.2),0)
 
-    @media $breakpoint2
+    @media $screen-sm
         transform: translate3d(0,-($spacer*5),0)
 
     .has-menu-open &
@@ -45,13 +46,13 @@
 .site__footer
     margin-top: -($spacer*6.5)
 
-    @media $breakpoint2
+    @media $screen-sm
         margin-top: 0
 
     .has-menu-open &
         margin-top: 0
 
-@media $breakpoint2 and (min-height: 650px)
+@media $screen-sm and (min-height: 650px)
     .site
         position: relative
 
diff --git a/_src/_assets/styl/_kremalicious/media.styl b/_src/_assets/styl/_kremalicious/media.styl
index 6ed91924..08a873fa 100644
--- a/_src/_assets/styl/_kremalicious/media.styl
+++ b/_src/_assets/styl/_kremalicious/media.styl
@@ -32,7 +32,7 @@ img.aligncenter
     display: block
     margin: $spacer auto
 
-@media $breakpoint2
+@media $screen-sm
     img.alignleft
         margin: 0 $spacer $spacer 0
     img.alignright
diff --git a/_src/_assets/styl/_kremalicious/mixins.styl b/_src/_assets/styl/_kremalicious/mixins.styl
index cd94d5c0..c05cf16c 100644
--- a/_src/_assets/styl/_kremalicious/mixins.styl
+++ b/_src/_assets/styl/_kremalicious/mixins.styl
@@ -184,6 +184,7 @@ transition()
     padding: ($spacer/2) $spacer ($spacer/2) 100%
     margin-left: -100%
 
+
 // Lead paragraph
 /////////////////////////////////////
 
@@ -192,6 +193,33 @@ transition()
     line-height: ($spacer*1.15)
 
 
+// Layout breakout
+/////////////////////////////////////
+
+breakoutviewport()
+    margin-left: calc(-50vw + 50%)
+    margin-right: calc(-50vw + 50%)
+
+    @media $screen-md
+        breakoutviewport--base()
+
+breakoutviewport--base()
+    margin-left: -($gutter-space * 4)
+    margin-right: -($gutter-space * 4)
+
+breakoutviewport--full()
+    margin-left: calc(-50vw + 50%)
+    margin-right: calc(-50vw + 50%)
+
+.breakoutviewport
+    breakoutviewport()
+
+.breakoutviewport--base
+    breakoutviewport--base()
+
+.breakoutviewport--full
+    breakoutviewport--full()
+
 // Button sizing
 /////////////////////////////////////
 
diff --git a/_src/_assets/styl/_kremalicious/navigation.styl b/_src/_assets/styl/_kremalicious/navigation.styl
index 75ecbf6f..8ea623d0 100644
--- a/_src/_assets/styl/_kremalicious/navigation.styl
+++ b/_src/_assets/styl/_kremalicious/navigation.styl
@@ -12,9 +12,12 @@
     display: inline-block
     margin: 0
     position: absolute
-    right: 0
+    right: $spacer
     top: -($spacer/4)
 
+    @media $screen-md
+        right: 0
+
     &:focus
         outline: 0
 
@@ -47,7 +50,6 @@
     padding: $spacer 0
     margin-top: $spacer
     margin-bottom: 0
-    width: 100%
     background: $body-bg
     display: flex   // .nav-popver overwrite
     margin-left: 0  // .grid overwrite
@@ -64,7 +66,7 @@
     @extend .category
     font-size: $font-size-small
     text-shadow: 0 1px 0 rgba(#fff, .5)
-    padding: $padding-base-vertical $padding-base-horizontal
+    padding: $padding-base-horizontal
     margin-bottom: 0
     margin-top: 0
     display: block
diff --git a/_src/_assets/styl/_kremalicious/search.styl b/_src/_assets/styl/_kremalicious/search.styl
index 29a68776..0769bfe7 100644
--- a/_src/_assets/styl/_kremalicious/search.styl
+++ b/_src/_assets/styl/_kremalicious/search.styl
@@ -14,11 +14,11 @@
         pointer-events: none
 
 .search-btn
-    right: 50px
+    right: 70px
     padding: .65em .85em
 
-.site-search
-    margin-right: 4%
+    @media $screen-md
+        right: 50px
 
 .search-close
     position: absolute
@@ -31,17 +31,27 @@
 .search-area
     @extend .transition
     position: absolute
-    width: 100%
     left: 0
     top: -7px
     z-index: 3
+    margin-left: ($spacer / 2)
+    margin-right: ($spacer / 2)
+    width: "calc(100% - %s)" % $spacer
 
     // hidden by default
     display: none
 
+    @media $screen-sm
+        margin-left: 0
+        margin-right: 0
+        width: 100%
+
     &.is-ready
         display: block
 
+    .form-control
+        background: #fff
+
 
 .search-popover
     position: absolute
@@ -55,7 +65,7 @@
     overflow: auto
     -webkit-overflow-scrolling: touch
 
-    @media $breakpoint2
+    @media $screen-sm
         top: ($spacer * 3)
 
 .search-results
diff --git a/_src/_assets/styl/_kremalicious/tables.styl b/_src/_assets/styl/_kremalicious/tables.styl
index 0543756c..0311699b 100644
--- a/_src/_assets/styl/_kremalicious/tables.styl
+++ b/_src/_assets/styl/_kremalicious/tables.styl
@@ -46,7 +46,7 @@ table tbody tr:hover th
     overflow-x: auto
     min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
 
-    @media (max-width: $screen-small-min)
+    @media (max-width: $screen-xs-min)
         width: 100%
         margin-bottom: ($spacer * 0.75)
         overflow-y: hidden
diff --git a/_src/_assets/styl/_kremalicious/typography.styl b/_src/_assets/styl/_kremalicious/typography.styl
index 926fdadd..63fc88d7 100644
--- a/_src/_assets/styl/_kremalicious/typography.styl
+++ b/_src/_assets/styl/_kremalicious/typography.styl
@@ -12,7 +12,7 @@
 html
     font-size: $font-size-root
 
-    @media $breakpoint3
+    @media $screen-lg
         font-size: $font-size-root-lg
 
 body
@@ -35,7 +35,7 @@ body
     -moz-osx-font-smoothing: grayscale
     -moz-font-feature-settings: 'liga', 'kern'
 
-    letter-spacing: -0.01em
+    letter-spacing: -.01em
 
     .wf-active &
         letter-spacing: normal
@@ -67,7 +67,7 @@ h1, h2, h3, h4, h5, h6,
     line-height: $headings-line-height
     color: $headings-color
     font-weight: 500
-    letter-spacing: -.09em
+    letter-spacing: -.04em
 
     .wf-active &
         font-weight: $headings-font-weight
@@ -87,27 +87,27 @@ h6, .h6
 
 h1, .h1
     font-size: $font-size-h2
-    @media $breakpoint1
+    @media $screen-xs
         font-size: $font-size-h1
 
 h2, .h2
     font-size: $font-size-h3
-    @media $breakpoint1
+    @media $screen-xs
         font-size: $font-size-h2
 
 h3, .h3
     font-size: $font-size-h4
-    @media $breakpoint1
+    @media $screen-xs
         font-size: $font-size-h3
 
 h4, .h4
     font-size: $font-size-h5
-    @media $breakpoint1
+    @media $screen-xs
         font-size: $font-size-h4
 
 h5, .h5
     font-size: $font-size-h6
-    @media $breakpoint1
+    @media $screen-xs
         font-size: $font-size-h5
 
 h6, .h6
@@ -278,10 +278,10 @@ blockquote
     position: relative
     padding-left: 20px
 
-    @media $breakpoint1
+    @media $screen-xs
         padding-left: 40px
 
-    @media $breakpoint3
+    @media $screen-lg
         padding-left: 60px
 
     // quotation marks
@@ -293,10 +293,10 @@ blockquote
         left: -10px
         top: -20px
 
-        @media $breakpoint1
+        @media $screen-xs
             left: 0
 
-        @media $breakpoint3
+        @media $screen-lg
             top: -30px
 
     p:last-child
diff --git a/_src/_assets/styl/_kremalicious/variables.styl b/_src/_assets/styl/_kremalicious/variables.styl
index bfb17104..d31fc71a 100644
--- a/_src/_assets/styl/_kremalicious/variables.styl
+++ b/_src/_assets/styl/_kremalicious/variables.styl
@@ -139,13 +139,15 @@ $kbd-color                  = $code-color
 // Responsive breakpoints
 /////////////////////////////////////
 
-$screen-small-min           = 30em
-$screen-medium-min          = 40.625em
-$screen-large-min           = 87.500em
+$screen-xs-min            = 30em
+$screen-sm-min            = 40.625em
+$screen-md-min            = 60em
+$screen-lg-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)'
+$screen-xs                = 'only screen and (min-width: 30em)'
+$screen-sm                = 'only screen and (min-width: 40.625em)'
+$screen-md                = 'only screen and (min-width: 60em)'
+$screen-lg                = 'only screen and (min-width: 87.500em)'
 
 
 // High dpi media query
diff --git a/_src/_assets/styl/_kremalicious/vex.styl b/_src/_assets/styl/_kremalicious/vex.styl
index 060abe9a..c058a9fb 100644
--- a/_src/_assets/styl/_kremalicious/vex.styl
+++ b/_src/_assets/styl/_kremalicious/vex.styl
@@ -72,7 +72,7 @@ body.vex-open
         padding: 0
         position: relative
         width: 100%
-        max-width: $screen-small-min
+        max-width: $screen-xs-min
         border-radius: $border-radius-base
         border: 1px solid alpha($brand-grey-light, .2)
 
diff --git a/_src/_assets/styl/_page-about.styl b/_src/_assets/styl/_page-about.styl
index 87535cca..b8bfdf46 100644
--- a/_src/_assets/styl/_page-about.styl
+++ b/_src/_assets/styl/_page-about.styl
@@ -19,7 +19,7 @@
             @extend .divider-bottom
             color: $text-color-light
 
-            @media $breakpoint2
+            @media $screen-sm
                 max-width: 60%
                 margin-left: auto
                 margin-right: auto
diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl
index 15a92f10..fcaaa955 100644
--- a/_src/_assets/styl/kremalicious3.styl
+++ b/_src/_assets/styl/kremalicious3.styl
@@ -15,6 +15,7 @@
 
 // Core CSS
 @import '_kremalicious/typography'
+@import '_kremalicious/animations'
 @import '_kremalicious/grid'
 @import '_kremalicious/layout'
 @import '_kremalicious/forms'
@@ -25,7 +26,6 @@
 @import '_kremalicious/code'
 @import '_kremalicious/syntax'
 @import '_kremalicious/alerts'
-@import '_kremalicious/animations'
 @import '_kremalicious/vex'
 
 // Content