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('
Your browsers does not support modern grid layout so this page will not look or behave as it should. Resent versions of Chrome, Firefox and Safari all works so please update. Support is coming in Microsoft Edge as well, until then use another browser.
What Browser? ');
- // }
-
})(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 @@
-
-
-
{{ i18n "menu_mobile" }}
-
+
+
+
{{ i18n "menu_mobile" }}
+
+
+ {{ if .Site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
+ {{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}
+
+ {{ $home := relLangURL "/" }}
+ {{ $currentSection := .Section }}
+ {{ $currentID := .UniqueID }}
+
+ {{ i18n "menu_title" }}
+
+
+
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index 4e448ba..be9378b 100644
--- a/layouts/partials/styles.html
+++ b/layouts/partials/styles.html
@@ -1,12 +1,17 @@
{{ $main_options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
+{{ $mobile_options := (dict "targetPath" "css/mobile.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
{{ $print_options := (dict "targetPath" "css/print.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
{{ $main_style := resources.Get "sass/styles.scss" | toCSS $main_options | fingerprint -}}
+{{ $mobile_style := resources.Get "sass/mobile.scss" | toCSS $mobile_options | fingerprint -}}
{{ $print_style := resources.Get "sass/print.scss" | toCSS $print_options | fingerprint -}}
{{ if eq .Hugo.Environment "dev" -}}
{{ $main_options = (dict "targetPath" "css/styles.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
+{{ $mobile_options = (dict "targetPath" "css/mobile.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
{{ $print_options = (dict "targetPath" "css/print.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
{{ $main_style = resources.Get "sass/styles.scss" | toCSS $main_options -}}
+{{ $mobile_style := resources.Get "sass/mobile.scss" | toCSS $mobile_options -}}
{{ $print_style = resources.Get "sass/print.scss" | toCSS $print_options -}}
{{ end -}}
+{{ if $.Param "mobilemenu" }}
{{ end -}}