From 8f27245841c00972c2ca873e6666ccbcd845a8e8 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 9 Aug 2015 21:50:06 +0200 Subject: [PATCH] new flexbox based grid system --- _src/_assets/js/app.js | 4 +- _src/_assets/styl/content-featured.styl | 3 +- _src/_assets/styl/content-related.styl | 7 +- _src/_assets/styl/content.styl | 15 ++-- _src/_assets/styl/grid.styl | 115 ++++++++++++------------ _src/_assets/styl/header.styl | 23 ++--- _src/_assets/styl/kremalicious3.styl | 2 +- _src/_assets/styl/navigation.styl | 36 ++------ _src/_assets/styl/print.styl | 2 +- _src/_assets/styl/scaffolding.styl | 14 +-- _src/_assets/styl/search.styl | 11 +-- _src/_assets/styl/typography.styl | 7 +- _src/_assets/styl/variables.styl | 4 +- _src/_includes/articles.html | 30 +++---- _src/_includes/featured.html | 2 +- _src/_includes/footer.html | 15 ++-- _src/_includes/header.html | 26 +++--- _src/_includes/paginator.html | 8 +- _src/_includes/relatedphotos.html | 4 +- _src/_includes/relatedposts.html | 4 +- _src/_layouts/archive.html | 4 +- _src/_layouts/base.html | 2 +- _src/_layouts/link.html | 4 +- _src/_layouts/page.html | 4 +- _src/_layouts/photo.html | 4 +- _src/_layouts/post.html | 4 +- _src/index.html | 2 +- 27 files changed, 167 insertions(+), 189 deletions(-) diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index 7855dd3d..f6df1041 100644 --- a/_src/_assets/js/app.js +++ b/_src/_assets/js/app.js @@ -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 }) @@ -96,7 +96,7 @@ var siteNavigation = { siteMenu: function() { var $thelink = $('.menu-btn'), - $thepop = $('.nav-main .nav-popover'); + $thepop = $('.nav-popover'); $thelink.click(function(e) { e.preventDefault(); diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl index e72e940b..aeefe4c3 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_src/_assets/styl/content-featured.styl @@ -10,7 +10,8 @@ padding-bottom: $line-height-computed @media $breakpoint2 - padding-bottom: ($line-height-computed*3) + padding-top: ($line-height-computed*2) + padding-bottom: ($line-height-computed*2) .featured-link display: block diff --git a/_src/_assets/styl/content-related.styl b/_src/_assets/styl/content-related.styl index 8b340ddc..cb23f920 100644 --- a/_src/_assets/styl/content-related.styl +++ b/_src/_assets/styl/content-related.styl @@ -5,7 +5,7 @@ // .related-posts - .row + .grid margin-top: 0 .related-posts-title @@ -16,7 +16,7 @@ .post-title @extend .h5 - margin-top: $line-height-computed + margin: 0 margin-bottom: $line-height-computed .post-title, @@ -40,11 +40,10 @@ // .related-photos @extend .divider-top - margin-top: $line-height-computed*2 + margin-top: $line-height-computed .photo-link display: block - margin-bottom: 15% border: 2px solid transparent &:hover, diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index feb25dec..c2470f8e 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -23,17 +23,20 @@ .hash @extend .h3 color: darken($page-bg, 15%) - margin-right: 5px + margin-right: 2px -.hentry +.hentry, +.grid > .hentry @extend .divider-bottom - padding: ($line-height-computed*2) 0 + padding-top: ($line-height-computed*2) + padding-bottom: ($line-height-computed*2) @media $breakpoint2 - padding: ($line-height-computed*4) 0 + padding-top: ($line-height-computed*4) + padding-bottom: ($line-height-computed*4) - &:first-child - padding-top: $line-height-computed + .page-index &:first-child + padding-top: ($line-height-computed*2) .page-single & padding-bottom: ($line-height-computed*2) diff --git a/_src/_assets/styl/grid.styl b/_src/_assets/styl/grid.styl index e54fe14e..318a2e64 100644 --- a/_src/_assets/styl/grid.styl +++ b/_src/_assets/styl/grid.styl @@ -9,71 +9,70 @@ * box-sizing: border-box -// 320px and up .container - padding: 0 7% + padding-left: 7% + padding-right: 7% width: 100% -.row - margin-top: $line-height-computed - margin-bottom: $line-height-computed + @media $breakpoint2 + padding-left: 15% + padding-right: 15% -.col1, -.col2, -.col3, -.col4, -.col5, -.col6 - width: 100% - margin-left: 0 - // ensures empty columns won't collapse - min-height: 1px +.grid + margin: auto + padding: 0 + display: flex + flex-wrap: wrap -// clear -.container, -.row - @extend .clearfix - -@media $breakpoint2 - .container - padding: 0 15% - - .row + @media $breakpoint2 max-width: 35em - margin: ($line-height-computed*2) auto + + > .col1, + > .col2, + > .col3, + > .col4, + > .col5, + > .col6 + flex: 1 + flex: 0 0 100% + padding: 1em 0 0 1em + + > .col6 padding-left: 0 - padding-right: 0 - .col1, - .col2, - .col3, - .col4, - .col5, - .col6 - float: left - margin-left: 4% + > .col1-xs, + > .col2-xs, + > .col3-xs, + > .col4-xs, + > .col5-xs, + > .col6-xs + flex: 1 + padding: 1em 0 0 1em - .col1:first-child, - .col2:first-child, - .col3:first-child, - .col4:first-child, - .col5:first-child, - .col6, - .col3:nth-child(2n+3), - .col2:nth-child(3n+4), - .col1:nth-child(6n+7) - margin-left: 0 - clear: both + > .col1-xs + flex: 0 0 16.666666667% + > .col2-xs + flex: 0 0 33.333333333% + > .col3-xs + 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 - .col1 - width: 13% - .col2 - width: 30.6% - .col3 - width: 48% - .col4 - width: 65% - .col5 - width: 82% - .col6 - width: 100% \ No newline at end of file + @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 + flex: 0 0 100% diff --git a/_src/_assets/styl/header.styl b/_src/_assets/styl/header.styl index 9521db31..0cb755c0 100644 --- a/_src/_assets/styl/header.styl +++ b/_src/_assets/styl/header.styl @@ -8,14 +8,21 @@ ///////////////////////////////////// .topbar - @extend .clearfix background: $body-bg + margin-top: ($line-height-computed/2) + margin-bottom: ($line-height-computed/2) - .row - margin-top: ($line-height-computed/2) - margin-bottom: ($line-height-computed/2) + @media $breakpoint2 + margin-top: $line-height-computed + margin-bottom: $line-height-computed + + .grid position: relative + > .banner, + > .nav-main + padding-top: 0 + // Logo ///////////////////////////////////// @@ -44,14 +51,10 @@ ///////////////////////////////////// .banner - @extend .alignleft - - @media $breakpoint2 - margin-left: -54px + padding-top: 0 .banner-title - margin-top: .1em - margin-bottom: 0 + margin: 0 // display toned down logo // by default @extend .logo diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl index aa0cccbf..921093cc 100644 --- a/_src/_assets/styl/kremalicious3.styl +++ b/_src/_assets/styl/kremalicious3.styl @@ -14,9 +14,9 @@ @import 'mixins' // Core CSS +@import 'grid' @import 'scaffolding' @import 'typography' -@import 'grid' @import 'forms' @import 'buttons' @import 'icons' diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl index 6861d411..7cb2c9a6 100644 --- a/_src/_assets/styl/navigation.styl +++ b/_src/_assets/styl/navigation.styl @@ -13,7 +13,7 @@ margin: 0 position: absolute right: 0 - top: 0 + top: -($line-height-computed/4) &:focus outline: 0 @@ -30,23 +30,19 @@ &:active .icon fill: #fff +.menu-btn + margin-right: -.5em + padding: .5em .7em + + // Main Navigation ///////////////////////////////////// -.nav-main - @extend .clearfix - .menu-btn - margin-right: -.5em - padding: .5em .7em - - li - display: inline-block - .nav-popover - @extend .clearfix, .divider-top - clear: both + @extend .divider-top, .list-unstyled padding: $line-height-computed 0 margin-top: 60px + margin-bottom: 0 width: 100% background: $body-bg @@ -61,13 +57,6 @@ text-transform: uppercase border-radius: $border-radius-base - @media $breakpoint1 - width: 50% - float: left - - @media $breakpoint2 - width: 33.3% - &:hover, &:focus color: $link-color @@ -84,18 +73,9 @@ ///////////////////////////////////// .paginator - @extend .clearfix - .icon margin-bottom: -3px -.paginator-next, -.paginator-previous, -.paginator-pages - width: 32.7% - display: inline-block - clear: none - .paginator-next text-align: right diff --git a/_src/_assets/styl/print.styl b/_src/_assets/styl/print.styl index 3aa27ebb..9b9a2809 100644 --- a/_src/_assets/styl/print.styl +++ b/_src/_assets/styl/print.styl @@ -20,7 +20,7 @@ // hide stuff in article view .related-posts, - .footer .row:first-child, + .footer .grid:first-child, .hentry:before, .topbar hide() diff --git a/_src/_assets/styl/scaffolding.styl b/_src/_assets/styl/scaffolding.styl index 83a347d8..6153fa67 100644 --- a/_src/_assets/styl/scaffolding.styl +++ b/_src/_assets/styl/scaffolding.styl @@ -32,21 +32,12 @@ textarea // site background ///////////////////////////////////// -.topbar - height: 71px - - .menu-open & - height: auto - .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) -.content.row - margin-top: 0 - @media only screen and (min-width: 40.625em) and (min-height: 650px) body position: relative @@ -55,8 +46,8 @@ textarea @extend .transition position: relative z-index: 2 - margin-top: 71px - margin-bottom: 580px + margin-top: 80px + margin-bottom: 500px .menu-open & margin-top: 220px @@ -73,7 +64,6 @@ textarea .footer z-index: 0 - height: 580px bottom: 0 box-shadow: none diff --git a/_src/_assets/styl/search.styl b/_src/_assets/styl/search.styl index 0c03cb98..37a3eac0 100644 --- a/_src/_assets/styl/search.styl +++ b/_src/_assets/styl/search.styl @@ -29,7 +29,7 @@ position: absolute width: 100% left: 0 - top: -3px + top: 0 z-index: 3 // hidden by default @@ -40,10 +40,9 @@ .search-results @extend .list-unstyled, .textcenter + display: flex @media $breakpoint2 - display: flex - flex-wrap: wrap margin-top: ($line-height-computed/2) margin-bottom: ($line-height-computed/2) @@ -51,12 +50,6 @@ padding: 0 margin: 0 - @media $breakpoint2 - flex: 0 0 49% - display: flex - align-items: center - align-content: stretch - .search-link @extend .h6 diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl index 38f069f2..a7276314 100644 --- a/_src/_assets/styl/typography.styl +++ b/_src/_assets/styl/typography.styl @@ -214,17 +214,20 @@ blockquote > p color: lighten($text-color, 15%) blockquote - padding-left: 40px + padding-left: 25px margin: 0 0 $line-height-computed position: relative + @media $breakpoint2 + padding-left: 40px + @media $breakpoint3 padding: 0 ($line-height-computed*1.75) // quotation marks &:before content: "“" - font-size: 400% + font-size: 250% font-family: "Hoefler Text", "Times New Roman", serif color: $text-color-dimmed position: absolute diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl index 2d1ba061..e66d9cd1 100644 --- a/_src/_assets/styl/variables.styl +++ b/_src/_assets/styl/variables.styl @@ -101,8 +101,8 @@ $border-radius-base = 3px $border-radius-small = $border-radius-base $border-radius-large = $border-radius-base -$padding-base-vertical = 12px -$padding-base-horizontal = 32px +$padding-base-vertical = 8px +$padding-base-horizontal = 18px $padding-small-vertical = ($padding-base-vertical / 2) $padding-small-horizontal = ($padding-base-horizontal / 2) diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html index 9f7772f7..fbd4eaa8 100644 --- a/_src/_includes/articles.html +++ b/_src/_includes/articles.html @@ -1,9 +1,9 @@ {% if post.layout == "link" %} -
    -
    -

    +

    {{ post.content | markdownify }} -

    - Go to source +

    + Go to source @@ -27,31 +27,31 @@ -

    +

    {% elsif post.layout == "photo" %} -
    + {% else %} -
    -
    -

    {{ post.title | titlecase }}

    -
    +
    +
    +

    {{ post.title | titlecase }}

    +
    diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html index 9a49a0f7..31b1e0bf 100644 --- a/_src/_includes/featured.html +++ b/_src/_includes/featured.html @@ -1,5 +1,5 @@ -