grid fixes

_src/_assets/styl/buttons.styl

@@ -154,24 +154,25 @@ a.btn-primary
     .icon
         width: 15px
         height: 15px
-        margin: 1px 0 0 0
+        margin: 1px 3px 0 0
         fill: #0089cb
+        float: left
 
 
 // Close button
 /////////////////////////////////////
 
 .close
-    @extend .textcenter
-    width: 16px
-    height: 16px
-    line-height: 12px
-    font-size: $font-size-small
+    @extend .textcenter, .transition
+    width: 14px
+    height: 14px
     padding: 0
-    border-radius: 16px
+    border-radius: 50%
     display: block
-    background: $brand-grey-light
+    background: lighten($brand-grey-light, 50%)
     color: #fff
+    line-height: 1
+    font-size: $font-size-mini
 
     &:hover,
     &:focus
@@ -185,12 +186,18 @@ a.btn-primary
 /////////////////////////////////////
 
 .content-download
-    @extend .clearfix
+    @extend .grid, .grid--gutters
+
+    display: block
+    margin-top: 0
+
+    @media $breakpoint1
+        display: flex
+        margin-top: -($gutter-space)
 
     a
-        @extend .btn
-        padding-left: 15px
-        padding-right: 15px
+        @extend .btn, .grid__col
+        margin: $gutter-space 0 0 $gutter-space
         display: block
 
         span

_src/_assets/styl/content-featured.styl

@@ -6,7 +6,8 @@
 
 .featured
     @extend .divider-bottom
-    padding-top: $line-height-computed
+    padding-top: ($line-height-computed*2)
+    padding-bottom: ($line-height-computed*2)
 
     @media $breakpoint2
         padding-top: ($line-height-computed*3)
@@ -17,10 +18,8 @@
 
 .featured-link
     display: block
-    margin-bottom: $line-height-computed
 
     @media $breakpoint2
-        margin-bottom: 0
 
         &:hover
             transform: scale(1.03)

_src/_assets/styl/content-related.styl

@@ -17,7 +17,6 @@
     .post-title
         @extend .h5
         margin: 0
-        margin-bottom: $line-height-computed
 
     .post-title,
     .post-title-link

_src/_assets/styl/footer.styl

@@ -4,7 +4,7 @@
 // Footer
 //
 
-.footer__content
+.site__footer
     @extend .textcenter
     border-top: 1px solid rgba(255,255,255,.7)
     box-shadow: inset 0 1px 4px alpha($brand-dark, .2)

_src/_assets/styl/grid.styl

@@ -71,7 +71,8 @@
     > .grid__col
         flex: 0 0 16.5%
 
-.grid--2of6
+.grid--2of6,
+.grid--third
     > .grid__col
         flex: 0 0 33%
 
@@ -88,12 +89,38 @@
     > .grid__col
         flex: 0 0 82.5%
 
+
+@media $breakpoint1
+    .grid-small--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-small--2of6,
+    .grid-small--third
+        > .grid__col
+            flex: 0 0 33%
+
+    .grid-small--3of6,
+    .grid-small--half
+        > .grid__col
+            flex: 0 0 50%
+
+    .grid-small--4of6
+        > .grid__col
+            flex: 0 0 66%
+
+    .grid-small--5of6
+        > .grid__col
+            flex: 0 0 82.5%
+
+
 @media $breakpoint2
     .grid-medium--1of6
         > .grid__col
             flex: 0 0 16.5%
 
-    .grid-medium--2of6
+    .grid-medium--2of6,
+    .grid-medium--third
         > .grid__col
             flex: 0 0 33%
 
@@ -115,7 +142,8 @@
         > .grid__col
             flex: 0 0 16.5%
 
-    .grid-large--2of6
+    .grid-large--2of6,
+    .grid-large--third
         > .grid__col
             flex: 0 0 33%
 

_src/_assets/styl/header.styl

@@ -4,7 +4,7 @@
 // Header
 //
 
-.header
+.site__header
     width: 100%
     background: $body-bg
     margin-top: ($line-height-computed/2)

_src/_assets/styl/layout.styl

@@ -29,7 +29,7 @@
     box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
 
 @media only screen and (min-width: 40.625em) and (min-height: 650px)
-    body
+    .site
         position: relative
 
     .site__document
@@ -42,17 +42,17 @@
         .menu-open &
             margin-top: 220px
 
-    .header,
-    .footer
+    .site__header,
+    .site__footer
         position: fixed
         border: none
 
-    .header
+    .site__header
         z-index: 1
         top: 0
         border: none
 
-    .footer
+    .site__footer
         z-index: 0
         bottom: 0
         box-shadow: none

_src/_assets/styl/navigation.styl

@@ -41,10 +41,14 @@
 .nav-popover
     @extend .divider-top, .list-unstyled
     padding: $line-height-computed 0
-    margin-top: 60px
+    margin-top: 30px
     margin-bottom: 0
     width: 100%
     background: $body-bg
+    display: flex
+
+    .grid__col
+        padding-top: 0
 
 .nav-link
     @extend .h6, .textcenter

_src/_assets/styl/search.styl

@@ -5,8 +5,9 @@
 //
 
 &.search-open-blur
-    @extend .transition
     filter: blur(10px)
+    user-select: none
+    pointer-events: none
 
 .search-btn
     right: 50px
@@ -17,12 +18,12 @@
 
 .search-close
     position: absolute
-    right: 32px
+    right: 16px
 
     &,
     &:active
         top: 50%
-        margin-top: -8px
+        margin-top: -7px
 
 .search-area
     @extend .transition
@@ -38,10 +39,29 @@
     &.ready
         display: block
 
+
+.search-popover
+    position: absolute
+    left: 0
+    top: 71px
+    z-index: 6
+    width: 100%
+    padding-top: ($line-height-computed/2)
+    background: lighten($page-bg, 3%)
+    border-bottom: 1px solid rgba(255,255,255,.7)
+    box-shadow: 0 1px 4px alpha($brand-dark, .1)
+
+    @media $breakpoint2
+        top: 0
+
+
 .search-results
-    @extend .list-unstyled, .textcenter
+    @extend .list-unstyled
     display: flex
 
+    .grid__col
+        padding-top: 0
+
     @media $breakpoint2
         margin-top: ($line-height-computed/2)
         margin-bottom: ($line-height-computed/2)
@@ -63,17 +83,3 @@
         border: none
         &:before
             display: none
-
-.search-popover
-    position: absolute
-    left: 0
-    top: 71px
-    z-index: 6
-    width: 100%
-    padding-top: ($line-height-computed/2)
-    background: lighten($page-bg, 3%)
-    border-bottom: 1px solid rgba(255,255,255,.7)
-    box-shadow: 0 1px 4px alpha($brand-dark, .1)
-
-    @media $breakpoint2
-        top: 0

_src/_includes/footer.html

@@ -1,4 +1,5 @@
-<footer role="contentinfo" class="footer__content">
+<footer role="contentinfo" class="site__footer">
+    <div class="footer__content">
 
         <div class="container">
 
@@ -48,6 +49,7 @@
 
         </div>
 
+    </div>
 </footer>
 
 <script src="/assets/js/kremalicious3.min.js" async></script>

_src/_includes/header.html

@@ -1,5 +1,5 @@
 
-<header role="banner" class="header">
+<header role="banner" class="site__header">
     <div class="header__content">
         <div class="container">
 
@@ -31,16 +31,13 @@
                         <input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
                         <button class="close search-close">&times;</button>
                     </div>
-                    <div id="search-popover" class="search-popover hide">
-                        <ul id="search-results" class="search-results grid"></ul>
-                    </div>
                 </section>
 
             </div>
 
-            <ul class="nav-popover grid hide">
+            <ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
                 {% for category in site.categories %}
-                    <li class="grid__col grid--gutters grid-medium--half">
+                    <li class="grid__col">
                         <a class="nav-link" href="/{{ category | first }}/">
                             {{ category | first }}
                         </a>
@@ -51,3 +48,9 @@
         </div>
     </div>
 </header>
+
+<div id="search-popover" class="search-popover hide">
+    <div class="container">
+        <ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
+    </div>
+</div>

_src/_includes/relatedphotos.html

@@ -1,10 +1,10 @@
 <aside class="related-photos">
 
-    <div class="grid">
+    <div class="grid grid--gutters grid-small--half grid-medium--third">
 
         {% for post in site.categories['photos'] limit:6 %}
 
-            <article class="related-photo col3-xs col2">
+            <article class="related-photo grid__col">
                 <a class="photo-link" href="{{ post.url }}">
                     {% picture photothumb {{ post.image }} %}
                 </a>

_src/_includes/relatedposts.html

@@ -3,11 +3,11 @@
 
         <h1 class="related-posts-title">Related</h1>
 
-        <div class="grid">
+        <div class="grid grid--gutters grid-small--half grid-medium--third">
 
             {% for post in site.related_posts limit:6 %}
 
-                <article class="related-post col2">
+                <article class="related-post grid__col">
                     <a class="post-title-link" href="{{ post.url }}">
                         <h1 class="post-title">{{ post.title }}</h1>
                     </a>