From 227b0a5ecca3eecddde0c4477fe969de47d25235 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 10 Aug 2015 00:48:31 +0200 Subject: [PATCH 1/7] another grid rewrite, now exercise it --- _src/_assets/js/app.js | 6 +- _src/_assets/styl/content-featured.styl | 3 +- _src/_assets/styl/content.styl | 4 +- _src/_assets/styl/footer.styl | 2 +- _src/_assets/styl/grid.styl | 161 ++++++++++++++++-------- _src/_assets/styl/header.styl | 49 +++----- _src/_assets/styl/kremalicious3.styl | 3 +- _src/_assets/styl/layout.styl | 61 +++++++++ _src/_assets/styl/scaffolding.styl | 43 ------- _src/_assets/styl/variables.styl | 5 + _src/_includes/articles.html | 6 +- _src/_includes/featured.html | 26 ++-- _src/_includes/footer.html | 18 ++- _src/_includes/header.html | 88 ++++++------- _src/_layouts/base.html | 10 +- 15 files changed, 280 insertions(+), 205 deletions(-) create mode 100644 _src/_assets/styl/layout.styl 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 @@ -
    + diff --git a/_src/_includes/header.html b/_src/_includes/header.html index 7631ebb9..13ccbd25 100644 --- a/_src/_includes/header.html +++ b/_src/_includes/header.html @@ -1,49 +1,53 @@ -
    -
    + diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html index 017f3b13..a2578742 100644 --- a/_src/_layouts/base.html +++ b/_src/_layouts/base.html @@ -3,13 +3,15 @@ {% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %} - + {% include header.html %} -
    -
    - {{ content }} +
    +
    +
    + {{ content }} +
    From 5b6b4e4fbec5e295a7c5367ac8c3bff31c2c92e5 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Aug 2015 19:51:49 +0200 Subject: [PATCH 2/7] featured s p a c i n g --- _src/_assets/styl/content-featured.styl | 8 +++++--- _src/_assets/styl/content.styl | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl index bee01892..4bd0d7f6 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_src/_assets/styl/content-featured.styl @@ -9,13 +9,15 @@ padding-top: $line-height-computed @media $breakpoint2 - padding-top: ($line-height-computed*2) - padding-bottom: $line-height-computed + 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 diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index 136f0af6..21e8c93f 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -35,8 +35,8 @@ 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) From b099d589c3914ade7ca84fac0f1b238e02ca208f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Aug 2015 20:55:30 +0200 Subject: [PATCH 3/7] grid fixes --- _src/_assets/styl/buttons.styl | 31 +++++---- _src/_assets/styl/content-featured.styl | 5 +- _src/_assets/styl/content-related.styl | 1 - _src/_assets/styl/footer.styl | 2 +- _src/_assets/styl/grid.styl | 34 ++++++++- _src/_assets/styl/header.styl | 2 +- _src/_assets/styl/layout.styl | 10 +-- _src/_assets/styl/navigation.styl | 6 +- _src/_assets/styl/search.styl | 42 ++++++----- _src/_includes/footer.html | 92 +++++++++++++------------ _src/_includes/header.html | 15 ++-- _src/_includes/relatedphotos.html | 4 +- _src/_includes/relatedposts.html | 4 +- 13 files changed, 148 insertions(+), 100 deletions(-) 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 4bd0d7f6..f67a3ea5 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_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) 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/footer.styl b/_src/_assets/styl/footer.styl index 6e293501..5e80b975 100644 --- a/_src/_assets/styl/footer.styl +++ b/_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) diff --git a/_src/_assets/styl/grid.styl b/_src/_assets/styl/grid.styl index 06a31392..7138d5b4 100644 --- a/_src/_assets/styl/grid.styl +++ b/_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% diff --git a/_src/_assets/styl/header.styl b/_src/_assets/styl/header.styl index 10f9764d..1aaa7e7c 100644 --- a/_src/_assets/styl/header.styl +++ b/_src/_assets/styl/header.styl @@ -4,7 +4,7 @@ // Header // -.header +.site__header width: 100% background: $body-bg margin-top: ($line-height-computed/2) diff --git a/_src/_assets/styl/layout.styl b/_src/_assets/styl/layout.styl index f1d7129f..1618e564 100644 --- a/_src/_assets/styl/layout.styl +++ b/_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 diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl index 7cb2c9a6..45387606 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 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/_includes/footer.html b/_src/_includes/footer.html index 89608465..805ed67b 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -1,53 +1,55 @@ -
    -

    + +
    +
    +
      +
      +
      diff --git a/_src/_includes/relatedphotos.html b/_src/_includes/relatedphotos.html index f4f6fa1e..441189e8 100644 --- a/_src/_includes/relatedphotos.html +++ b/_src/_includes/relatedphotos.html @@ -1,10 +1,10 @@