diff --git a/assets/js/script.js b/assets/js/script.js index d9a4dc3..e0227dd 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -11,32 +11,20 @@ $('html').removeClass('nojs').addClass('js'); // Activate the mobil menu for small screens. - if (window.matchMedia && $('.mobile-nav-wrapper').length) { - var mq = window.matchMedia('(max-width: 666px)'); + if (window.matchMedia && $('.mobile-nav').length) { + var mq = window.matchMedia('(max-width: 999px)'); if (mq.matches) { - // Show mobile menu. - $('.mobile-nav-wrapper').removeClass('hidden'); - - // Populate the mobile nav sheet. - $('.header__region').filter(':not(:empty)').removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet'); - $('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar'); - // Toggle the mobile nav sheet. - $('.mobile-nav-cover, .mobile-nav-toggle').click(function (e) { + $('.mobile-nav__cover, .mobile-nav__toggle').click(function (e) { e.preventDefault(); $('body').scrollTop(0).toggleClass('js-nav-open'); }); // Close the nav sheet after click (needed for anchor links). - $('.mobile-nav-sheet').find('a').click(function () { + $('.mobile-nav__sheet').find('a').click(function () { $('body').removeClass('js-nav-open'); }); } } - // Display CSS grid layout warning to old browsers. - // if (!window.CSS || !window.CSS.supports || !window.CSS.supports('display', 'grid')) { - // $('.header').after(''); - // } - })(jQuery); diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss index be79787..33bc982 100644 --- a/assets/sass/layouts/_layouts.scss +++ b/assets/sass/layouts/_layouts.scss @@ -25,12 +25,6 @@ padding: 0 $zen-gutters; } } - - &__grid-notice { - margin: $zen-gutters/2; - padding: $zen-gutters/2; - border: 2px dashed $red; - } } @supports (display: grid) { diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss new file mode 100644 index 0000000..62132a0 --- /dev/null +++ b/assets/sass/mobile.scss @@ -0,0 +1,131 @@ +// @file +// The mobile navigation stylesheet for this theme. + +@import 'init'; + +.main-menu, +.header__region { + display: none; + @include respond-to(s) { + display: block; + } +} + +.mobile-nav { + @include typeface(headings); + position: absolute; + right: 0; + top: 0; + width: 100vw; + height: 100vh; + overflow: hidden; + z-index: 20; + pointer-events: none; + + @include respond-to(s) { + display: none; + } + + .js-nav-open & { + position: fixed; + } + + &__cover { + position: absolute; + width: 100vw; + height: 100vh; + background-color: $mobile-menu-cover; + opacity: 0; + + .js-nav-open & { + opacity: 1; + pointer-events: auto; + } + } + + &__toggle { + display: block; + position: absolute; + top: $zen-gutters / 2; + right: $zen-gutters / 2; + padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px; + z-index: 22; + text-decoration: none; + font-weight: bold; + line-height: 1; + border: 1px solid $border; + border-radius: 3px; + color: $text; + pointer-events: auto; + + @include respond-to(s) { + display: none; + } + + .js-nav-open & { + color: $text-bg; + } + + &::after { + position: absolute; + content: ''; + margin-left: $zen-gutters / 4; + width: $zen-gutters; + height: $zen-gutters; + border-top: 12px double $text; + border-bottom: 4px solid $text; + } + + .js-nav-open &::after { + border-color: $text-bg; + } + } + + &__sheet { + background-color: $mobile-menu; + width: 90vw; + height: 100vh; + padding: 2rem; + transform: translateX(100vw); + z-index: 21; + + a { + color: $text-bg; + text-decoration: none; + + &:hover, + &:focus { + color: $text-bg; + } + } + + .js-nav-open & { + pointer-events: auto; + box-shadow: -10px 0 10px -10px $nearblack; + transform: translateX(10vw); + } + } + + &__navbar { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + + li { + list-style-type: none; + margin: .4rem 0; + } + } + + &__cover, + &__toggle, + &__toggle::after, + &__sheet { + transition: all 130ms ease-in; + + .js-nav-open & { + transition: all 330ms ease-out; + } + } +} diff --git a/assets/sass/navigation/mobile/_mobile.scss b/assets/sass/navigation/mobile/_mobile.scss deleted file mode 100644 index 07af465..0000000 --- a/assets/sass/navigation/mobile/_mobile.scss +++ /dev/null @@ -1,105 +0,0 @@ -.mobile-nav-wrapper { - @include typeface(headings); - position: absolute; - right: 0; - top: 0; - width: 100vw; - height: 100vh; - overflow: hidden; - z-index: 20; - pointer-events: none; - - .js-nav-open & { - position: fixed; - } -} - -.mobile-nav-cover { - position: absolute; - width: 100vw; - height: 100vh; - background-color: $mobile-menu-cover; - opacity: 0; - - .js-nav-open & { - opacity: 1; - pointer-events: auto; - } -} - -.mobile-nav-toggle { - display: block; - position: absolute; - top: $zen-gutters / 2; - right: $zen-gutters / 2; - padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px; - z-index: 22; - text-decoration: none; - font-weight: bold; - line-height: 1; - border: 1px solid $border; - border-radius: 3px; - color: $text; - pointer-events: auto; - - .js-nav-open & { - color: $text-bg; - } - - &::after { - position: absolute; - content: ''; - margin-left: $zen-gutters / 4; - width: $zen-gutters; - height: $zen-gutters; - border-top: 12px double $text; - border-bottom: 4px solid $text; - } - - .js-nav-open &::after { - border-color: $text-bg; - } -} - -.mobile-nav-sheet { - background-color: $mobile-menu; - width: 90vw; - height: 100vh; - padding: 2rem; - transform: translateX(100vw); - z-index: 21; - - a { - color: $text-bg; - text-decoration: none; - } - - .js-nav-open & { - pointer-events: auto; - box-shadow: -10px 0 10px -10px $nearblack; - transform: translateX(10vw); - } - - .js-navbar { - display: flex; - flex-direction: column; - padding: 0; - margin: 0; - - li { - list-style-type: none; - margin: .4rem 0; - } - } -} - -.mobile-nav-cover, -.mobile-nav-toggle, -.mobile-nav-toggle::after, -.mobile-nav-sheet { - transition: all 130ms ease-in; - - .js-nav-open & { - transition: all 330ms ease-out; - } -} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index f5a4d14..b35d306 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -62,7 +62,6 @@ @import 'navigation/more-link/more-link'; @import 'navigation/navbar/navbar'; -@import 'navigation/mobile/mobile'; @import 'navigation/pager/pager'; // zen diff --git a/layouts/partials/mobilemenu.html b/layouts/partials/mobilemenu.html index 4c5ec0f..e0081df 100644 --- a/layouts/partials/mobilemenu.html +++ b/layouts/partials/mobilemenu.html @@ -1,5 +1,27 @@ -