diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..f2ee5d97 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,16 @@ +sudo: false +language: ruby +rvm: + - 2.2.2 + - 1.9.3 +cache: bundler +addons: + apt: + packages: + - libgsl0-dev +before_script: + - npm install gulp bower -g + - npm install + - bower install + - bundle install +script: gulp build diff --git a/Gemfile b/Gemfile index 0ff76396..eeca1018 100644 --- a/Gemfile +++ b/Gemfile @@ -14,4 +14,5 @@ group :development do gem 'mini_magick' gem 'fileutils' gem 'gsl' + gem 'narray' end diff --git a/README.md b/README.md index a659ca6c..bac5433e 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ kremalicious3 > [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat. -[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092) [![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3) +[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092) +[![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3) Requirements @@ -37,7 +38,7 @@ Get up and running Run the following command from the repository's root folder to install all dependencies. ```bash -npm install +npm install && bower install && bundle install ``` ### Development build 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/buttons.styl b/_src/_assets/styl/buttons.styl index 2c48fd93..1a950cdc 100644 --- a/_src/_assets/styl/buttons.styl +++ b/_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 diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl index aeefe4c3..f67a3ea5 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_src/_assets/styl/content-featured.styl @@ -6,20 +6,20 @@ .featured @extend .divider-bottom - padding-top: $line-height-computed - padding-bottom: $line-height-computed + padding-top: ($line-height-computed*2) + padding-bottom: ($line-height-computed*2) @media $breakpoint2 - padding-top: ($line-height-computed*2) - padding-bottom: ($line-height-computed*2) + padding-top: ($line-height-computed*3) + padding-bottom: ($line-height-computed*3) + + .grid + margin-bottom: 0 .featured-link display: block - margin-bottom: $line-height-computed - transition-property: none @media $breakpoint2 - margin-bottom: 0 &:hover transform: scale(1.03) diff --git a/_src/_assets/styl/content-related.styl b/_src/_assets/styl/content-related.styl index cb23f920..caa97831 100644 --- a/_src/_assets/styl/content-related.styl +++ b/_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 diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index c2470f8e..82e3daa9 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -25,18 +25,18 @@ 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) padding-bottom: ($line-height-computed*4) - .page-index &:first-child - padding-top: ($line-height-computed*2) + .page-index &:first-child + padding-top: ($line-height-computed*3) .page-single & padding-bottom: ($line-height-computed*2) @@ -153,8 +153,7 @@ .masonry @media $breakpoint2 - width: 125% - margin-left: -12.5% + width: 100% clearfix() .hentry diff --git a/_src/_assets/styl/footer.styl b/_src/_assets/styl/footer.styl index 756830d0..6f793836 100644 --- a/_src/_assets/styl/footer.styl +++ b/_src/_assets/styl/footer.styl @@ -4,10 +4,11 @@ // Footer // -.footer +.site__footer @extend .textcenter border-top: 1px solid rgba(255,255,255,.7) box-shadow: inset 0 1px 4px alpha($brand-dark, .2) + padding-top: ($line-height-computed*2) .gravatar margin-bottom: ($line-height-computed/2) diff --git a/_src/_assets/styl/grid.styl b/_src/_assets/styl/grid.styl index 318a2e64..ff8c793e 100644 --- a/_src/_assets/styl/grid.styl +++ b/_src/_assets/styl/grid.styl @@ -5,74 +5,185 @@ // -// 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--fit + > .grid__col flex: 1 + +.grid--full + > .grid__col 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--third + > .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 - flex: 0 0 16.5% - > .col2 - flex: 0 0 33% - > .col3 - flex: 0 0 50% - > .col4 - flex: 0 0 66% - > .col5 - flex: 0 0 82.5% - > .col6 +.grid--4of6 + > .grid__col + flex: 0 0 66% + +.grid--5of6 + > .grid__col + flex: 0 0 82.5% + + +@media $breakpoint1 + .grid-small--fit + > .grid__col + flex: 1 + + .grid-small--full + > .grid__col flex: 0 0 100% + + .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--fit + > .grid__col + flex: 1 + + .grid-medium--full + > .grid__col + flex: 0 0 100% + + .grid-medium--1of6 + > .grid__col + flex: 0 0 16.5% + + .grid-medium--2of6, + .grid-medium--third + > .grid__col + flex: 0 0 33% + + .grid-medium--3of6, + .grid-medium--half + > .grid__col + flex: 0 0 50% + + .grid-medium--4of6 + > .grid__col + flex: 0 0 66% + + .grid-medium--5of6 + > .grid__col + flex: 0 0 82.5% + +@media $breakpoint3 + .grid-large--fit + > .grid__col + flex: 1 + + .grid-large--full + > .grid__col + flex: 0 0 100% + + .grid-large--1of6 + > .grid__col + flex: 0 0 16.5% + + .grid-large--2of6, + .grid-large--third + > .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% diff --git a/_src/_assets/styl/header.styl b/_src/_assets/styl/header.styl index 0cb755c0..1aaa7e7c 100644 --- a/_src/_assets/styl/header.styl +++ b/_src/_assets/styl/header.styl @@ -4,10 +4,8 @@ // Header // -// Topbar -///////////////////////////////////// - -.topbar +.site__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..a0c902b5 --- /dev/null +++ b/_src/_assets/styl/layout.styl @@ -0,0 +1,62 @@ +// +// 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) + .site + position: relative + + .site__document + @extend .transition + position: relative + z-index: 2 + margin-top: 80px + margin-bottom: 420px + + .menu-open & + margin-top: 220px + + .site__header, + .site__footer + position: fixed + border: none + width: 100% + + .site__header + z-index: 1 + top: 0 + border: none + + .site__footer + z-index: 0 + bottom: 0 + box-shadow: none + + .menu-open & + hide() diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl index 7cb2c9a6..9397fc49 100644 --- a/_src/_assets/styl/navigation.styl +++ b/_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 @@ -73,8 +77,13 @@ ///////////////////////////////////// .paginator + padding-top: $line-height-computed + padding-bottom: $line-height-computed + .icon margin-bottom: -3px + p + margin-bottom: 0; .paginator-next text-align: right 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/search.styl b/_src/_assets/styl/search.styl index 37a3eac0..4388babb 100644 --- a/_src/_assets/styl/search.styl +++ b/_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 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..678d4d34 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..805ed67b 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -1,55 +1,55 @@ -