From f55e3d978319cc2dcaae045d4efd7ec17ab05632 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 19 Aug 2015 01:31:58 +0200 Subject: [PATCH] simpler menu js, super smooth menu show/hide --- _src/_assets/js/app.js | 14 ++++---------- _src/_assets/styl/content.styl | 27 +++++++++++++++++++++++++-- _src/_assets/styl/kremalicious3.styl | 12 ++++++------ _src/_assets/styl/layout.styl | 8 +++++++- _src/_assets/styl/navigation.styl | 22 +++++----------------- _src/_assets/styl/typography.styl | 5 +++++ _src/_includes/header.html | 2 +- 7 files changed, 53 insertions(+), 37 deletions(-) diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index 9d5bde22..0532e06e 100644 --- a/_src/_assets/js/app.js +++ b/_src/_assets/js/app.js @@ -95,25 +95,19 @@ var siteNavigation = { }, siteMenu: function() { - var $thelink = $('.menu-btn'), + var $thesite = $('.site'), + $thelink = $('.menu-btn'), $thepop = $('.nav-popover'); $thelink.click(function(e) { e.preventDefault(); // toggle menu - $('body').toggleClass('menu-open'); - - if ($('body').hasClass('menu-open')) { - $thepop.removeClass('hide'); - } else { - $thepop.addClass('hide'); - } + $thesite.toggleClass('menu-open'); // bind the hide controls $(document).bind('click.hidethepop', function() { - $('body').removeClass('menu-open'); - $thepop.toggleClass('hide'); + $thesite.removeClass('menu-open'); // unbind the hide controls $(document).unbind('click.hidethepop'); }); diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index b39d7a90..07740d85 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -40,6 +40,7 @@ .page-single & border: none + padding-top: ($line-height-computed*2) &:before @extend .hide @@ -100,15 +101,37 @@ .by display: block +.time + margin-bottom: ($line-height-computed*2) // Categories & Tags ///////////////////////////////////// .categories - margin-bottom: 0 + margin-bottom: ($line-height-computed/2) .category - text-transform: capitalize + @extend .h6, .textcenter + font-size: $font-size-mini + line-height: 1 + color: $brand-grey-light + text-transform: uppercase + border: 1px solid $text-color-dimmed + border-radius: $border-radius-base + padding: 4px 8px + margin: 0 + display: inline-block + + &:hover, + &:focus + color: $link-color + border-color: $link-color + background: rgba(255,255,255,.3) + + &:active + background: $link-color + top: 0 + color: #fff .tag color: $text-color diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl index d9cc9c22..2306cc6c 100644 --- a/_src/_assets/styl/kremalicious3.styl +++ b/_src/_assets/styl/kremalicious3.styl @@ -28,12 +28,6 @@ @import 'alerts' @import 'animations' -// Components -@import 'header' -@import 'navigation' -@import 'search' -@import 'footer' - // Content @import 'content' @import 'content-photo' @@ -45,5 +39,11 @@ @import 'page-about' @import 'page-404' +// Components +@import 'header' +@import 'navigation' +@import 'search' +@import 'footer' + // Print @import 'print' diff --git a/_src/_assets/styl/layout.styl b/_src/_assets/styl/layout.styl index a0c902b5..1bb83046 100644 --- a/_src/_assets/styl/layout.styl +++ b/_src/_assets/styl/layout.styl @@ -28,6 +28,11 @@ 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) + transform: translate3d(0,-200px,0) + + .menu-open & + transform: translate3d(0,0,0) + @media only screen and (min-width: 40.625em) and (min-height: 650px) .site position: relative @@ -38,9 +43,10 @@ z-index: 2 margin-top: 80px margin-bottom: 420px + transform: translate3d(0,0,0) .menu-open & - margin-top: 220px + transform: translate3d(0,140px,0) .site__header, .site__footer diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl index 9397fc49..db002fcc 100644 --- a/_src/_assets/styl/navigation.styl +++ b/_src/_assets/styl/navigation.styl @@ -41,36 +41,24 @@ .nav-popover @extend .divider-top, .list-unstyled padding: $line-height-computed 0 - margin-top: 30px + margin-top: $line-height-computed margin-bottom: 0 width: 100% background: $body-bg - display: flex + display: flex // .nav-popver overwrite + margin-left: 0 // .grid overwrite .grid__col padding-top: 0 .nav-link - @extend .h6, .textcenter + @extend .category text-shadow: 0 1px 0 rgba(#fff, .5) padding: $padding-base-vertical $padding-base-horizontal margin-bottom: 0 margin-top: 0 display: block - color: $brand-grey-light - text-transform: uppercase - border-radius: $border-radius-base - - &:hover, - &:focus - color: $link-color - border-bottom-color: $link-color - background: rgba(255,255,255,.5) - - &:active - background: $link-color - top: 0 - color: #fff + border: none // Paginator diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl index a7276314..45ee06d3 100644 --- a/_src/_assets/styl/typography.styl +++ b/_src/_assets/styl/typography.styl @@ -204,6 +204,11 @@ hr border: 0 margin-bottom: ($line-height-computed*2) +.small + font-size: $font-size-small + +.mini + font-size: $font-size-small // Quotes ///////////////////////////////////// diff --git a/_src/_includes/header.html b/_src/_includes/header.html index 927a023f..3275d4a1 100644 --- a/_src/_includes/header.html +++ b/_src/_includes/header.html @@ -35,7 +35,7 @@ -