From b099d589c3914ade7ca84fac0f1b238e02ca208f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Aug 2015 20:55:30 +0200 Subject: [PATCH] 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 @@ -