diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index f6df1041..9d5bde22 100644 --- a/_src/_assets/js/app.js +++ b/_src/_assets/js/app.js @@ -15,9 +15,9 @@ var siteNavigation = { siteSearch: function() { - var $content = $('.content'), + var $content = $('.site__content'), $searchlink = $('.search-btn'), - $searcharea = $('.topbar .search-area'), + $searcharea = $('.search-area'), $searchfield = $('#search-input'), $searchresults = $('#search-results'), $searchpop = $('#search-popover'); @@ -36,7 +36,7 @@ var siteNavigation = { searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('search-results'), json: '/search.json', - searchResultTemplate: '
  • {title}
    • ', + searchResultTemplate: '
  • {title}
    • ', fuzzy: false }) diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl index aeefe4c3..bee01892 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_src/_assets/styl/content-featured.styl @@ -7,11 +7,10 @@ .featured @extend .divider-bottom padding-top: $line-height-computed - padding-bottom: $line-height-computed @media $breakpoint2 padding-top: ($line-height-computed*2) - padding-bottom: ($line-height-computed*2) + padding-bottom: $line-height-computed .featured-link display: block diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index c2470f8e..136f0af6 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -25,11 +25,11 @@ color: darken($page-bg, 15%) margin-right: 2px -.hentry, -.grid > .hentry +.hentry @extend .divider-bottom padding-top: ($line-height-computed*2) padding-bottom: ($line-height-computed*2) + width: 100% @media $breakpoint2 padding-top: ($line-height-computed*4) diff --git a/_src/_assets/styl/footer.styl b/_src/_assets/styl/footer.styl index 756830d0..6e293501 100644 --- a/_src/_assets/styl/footer.styl +++ b/_src/_assets/styl/footer.styl @@ -4,7 +4,7 @@ // Footer // -.footer +.footer__content @extend .textcenter border-top: 1px solid rgba(255,255,255,.7) box-shadow: inset 0 1px 4px alpha($brand-dark, .2) diff --git a/_src/_assets/styl/grid.styl b/_src/_assets/styl/grid.styl index 318a2e64..06a31392 100644 --- a/_src/_assets/styl/grid.styl +++ b/_src/_assets/styl/grid.styl @@ -5,74 +5,129 @@ // -// Prevents padding to be added -* +*, +*:before, +*:after box-sizing: border-box -.container - padding-left: 7% - padding-right: 7% - width: 100% - - @media $breakpoint2 - padding-left: 15% - padding-right: 15% - +// +// Base +// .grid - margin: auto - padding: 0 display: flex flex-wrap: wrap + list-style: none + margin: 0 + padding: 0 - @media $breakpoint2 - max-width: 35em +.grid__col + flex: 1 - > .col1, - > .col2, - > .col3, - > .col4, - > .col5, - > .col6 + +// +// Alignment per row +// +.grid--top + align-items: flex-start + +.grid--bottom + align-items: flex-end + +.grid--center + align-items: center + + +// +// Alignment per cell +// +.grid_col--top + align-self: flex-start + +.grid_col--bottom + align-self: flex-end + +.grid_col--center + align-self: center + + +// +// Gutters +// +.grid--gutters + margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) + + > .grid__col + padding: $gutter-space 0 0 $gutter-space + + +// +// Columns +// +.grid + > .grid__col flex: 1 - flex: 0 0 100% - padding: 1em 0 0 1em - > .col6 - padding-left: 0 +.grid--1of6 + > .grid__col + flex: 0 0 16.5% - > .col1-xs, - > .col2-xs, - > .col3-xs, - > .col4-xs, - > .col5-xs, - > .col6-xs - flex: 1 - padding: 1em 0 0 1em +.grid--2of6 + > .grid__col + flex: 0 0 33% - > .col1-xs - flex: 0 0 16.666666667% - > .col2-xs - flex: 0 0 33.333333333% - > .col3-xs +.grid--3of6, +.grid--half + > .grid__col flex: 0 0 50% - > .col4-xs - flex: 0 0 66.666666666% - > .col5-xs - flex: 0 0 83.333333333% - > .col6-xs - flex: 0 0 100% - padding-left: 0 - @media $breakpoint2 - > .col1 +.grid--4of6 + > .grid__col + flex: 0 0 66% + +.grid--5of6 + > .grid__col + flex: 0 0 82.5% + +@media $breakpoint2 + .grid-medium--1of6 + > .grid__col flex: 0 0 16.5% - > .col2 + + .grid-medium--2of6 + > .grid__col flex: 0 0 33% - > .col3 + + .grid-medium--3of6, + .grid-medium--half + > .grid__col flex: 0 0 50% - > .col4 + + .grid-medium--4of6 + > .grid__col flex: 0 0 66% - > .col5 + + .grid-medium--5of6 + > .grid__col + flex: 0 0 82.5% + +@media $breakpoint3 + .grid-large--1of6 + > .grid__col + flex: 0 0 16.5% + + .grid-large--2of6 + > .grid__col + flex: 0 0 33% + + .grid-large--3of6, + .grid-large--half + > .grid__col + flex: 0 0 50% + + .grid-large--4of6 + > .grid__col + flex: 0 0 66% + + .grid-large--5of6 + > .grid__col flex: 0 0 82.5% - > .col6 - flex: 0 0 100% diff --git a/_src/_assets/styl/header.styl b/_src/_assets/styl/header.styl index 0cb755c0..10f9764d 100644 --- a/_src/_assets/styl/header.styl +++ b/_src/_assets/styl/header.styl @@ -4,10 +4,8 @@ // Header // -// Topbar -///////////////////////////////////// - -.topbar +.header + width: 100% background: $body-bg margin-top: ($line-height-computed/2) margin-bottom: ($line-height-computed/2) @@ -46,31 +44,24 @@ background-image: url('../img/logo@3x.png') background-size: 183px 62px +.header__title + margin: 0 + // display toned down logo + // by default + @extend .logo -// Banner -///////////////////////////////////// +.header__logo + @extend .ir + // repeat logo + // but display hover version + @extend .logo + background-position: left bottom -.banner - padding-top: 0 + // hide by default + opacity: 0 + // show smooooothly on hover + &:hover + opacity: 1 - .banner-title - margin: 0 - // display toned down logo - // by default - @extend .logo - - .banner-logo - @extend .ir - // repeat logo - // but display hover version - @extend .logo - background-position: left bottom - - // hide by default - opacity: 0 - // show smooooothly on hover - &:hover - opacity: 1 - - &:active - top: 0 + &:active + top: 0 diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl index 921093cc..d9cc9c22 100644 --- a/_src/_assets/styl/kremalicious3.styl +++ b/_src/_assets/styl/kremalicious3.styl @@ -14,8 +14,9 @@ @import 'mixins' // Core CSS -@import 'grid' @import 'scaffolding' +@import 'grid' +@import 'layout' @import 'typography' @import 'forms' @import 'buttons' diff --git a/_src/_assets/styl/layout.styl b/_src/_assets/styl/layout.styl new file mode 100644 index 00000000..f1d7129f --- /dev/null +++ b/_src/_assets/styl/layout.styl @@ -0,0 +1,61 @@ +// +// kremalicious3 +// -------------- +// Layout +// + +.site__content, +.header__content +.footer__content + padding: 0 7% + width: 100% + + @media $breakpoint2 + padding: 0 15% + +.container + max-width: 35em + margin: 0 auto + + +// topbar and footer as fixed +// site background +///////////////////////////////////// + +.site__document + background-color: $page-bg + border-top: 1px solid rgba(255,255,255,.7) + 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) + +@media only screen and (min-width: 40.625em) and (min-height: 650px) + body + position: relative + + .site__document + @extend .transition + position: relative + z-index: 2 + margin-top: 80px + margin-bottom: 500px + + .menu-open & + margin-top: 220px + + .header, + .footer + position: fixed + border: none + + .header + z-index: 1 + top: 0 + border: none + + .footer + z-index: 0 + bottom: 0 + box-shadow: none + + .menu-open & + hide() diff --git a/_src/_assets/styl/scaffolding.styl b/_src/_assets/styl/scaffolding.styl index 6153fa67..d505fe31 100644 --- a/_src/_assets/styl/scaffolding.styl +++ b/_src/_assets/styl/scaffolding.styl @@ -26,46 +26,3 @@ textarea font-family: inherit font-size: inherit line-height: inherit - - -// topbar and footer as fixed -// site background -///////////////////////////////////// - -.document - background-color: $page-bg - border-top: 1px solid rgba(255,255,255,.7) - 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) - -@media only screen and (min-width: 40.625em) and (min-height: 650px) - body - position: relative - - .document - @extend .transition - position: relative - z-index: 2 - margin-top: 80px - margin-bottom: 500px - - .menu-open & - margin-top: 220px - - .topbar, - .footer - position: fixed - border: none - - .topbar - z-index: 1 - top: 0 - border: none - - .footer - z-index: 0 - bottom: 0 - box-shadow: none - - .menu-open & - hide() diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl index e66d9cd1..0388a7ce 100644 --- a/_src/_assets/styl/variables.styl +++ b/_src/_assets/styl/variables.styl @@ -94,6 +94,11 @@ $link-color = lighten($brand-cyan, 5%) $link-color-hover = lighten($link-color, 10%) +// Grid +///////////////////////////////////// + +$gutter-space = $line-height-computed + // Components spacing ///////////////////////////////////// diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html index fbd4eaa8..fc25e0ce 100644 --- a/_src/_includes/articles.html +++ b/_src/_includes/articles.html @@ -1,7 +1,7 @@ {% if post.layout == "link" %} -
    +

    @@ -33,7 +33,7 @@ {% elsif post.layout == "photo" %} -
    +
    @@ -48,7 +48,7 @@ {% else %} -
    +

    {{ post.title | titlecase }}

    diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html index 31b1e0bf..0ffb57e0 100644 --- a/_src/_includes/featured.html +++ b/_src/_includes/featured.html @@ -1,13 +1,15 @@ - \ No newline at end of file + diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html index 8c35cdaf..89608465 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -1,13 +1,13 @@ -