ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move mobil menu css to seperate scss file. Preload css for performance.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-08-11 13:43:34 +02:00
commit c154176d35
6 changed files with 111 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

1
layouts/partials/meta_cache.html
View file

@ -1,2 +1,3 @@
<link rel="preload" as="style" href="/css/styles.css{{ if $.Param "cacheBustCSS" }}?{{ readFile "/public/css/styles.css" | sha1 }}{{ end }}">
<link rel="stylesheet" href="/css/styles.css{{ if $.Param "cacheBustCSS" }}?{{ readFile "/public/css/styles.css" | sha1 }}{{ end }}">
<link rel="stylesheet" href="/css/print.css" media="print">

113
sass/_zen.scss
View file

@ -276,7 +276,7 @@ figcaption {
/* Search */
.search-form {
@include padding-top(.5);
@include padding(.5 0);
}
.search-text {
@ -323,114 +323,3 @@ figcaption {
}
}
}
/* Mobile menu */
.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: rgba(color('black'), .2);
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: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
z-index: 22;
text-decoration: none;
font-weight: bold;
line-height: 1;
border: 1px solid color(border);
border-radius: 3px;
pointer-events: auto;
.js-nav-open & {
color: color(text-bg);
}
&::after {
position: absolute;
content: '';
margin-left: $zen-gutters / 4;
width: $zen-gutters;
height: 4px;
border-top: 12px double color(text);
border-bottom: 4px solid color(text);
}
.js-nav-open &::after {
border-color: color(text-bg);
}
}
.mobile-nav-sheet {
background-color: color(header-bg);
width: 90vw;
height: 100vh;
padding: 2rem;
transform: translateX(100vw);
z-index: 21;
.js-nav-open & {
pointer-events: auto;
box-shadow: -10px 0 10px -10px color(nearblack);
transform: translateX(10vw);
}
.js-navbar {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
li {
list-style-type: none;
margin: .4rem 0;
a {
color: color(white);
text-decoration: none;
}
}
}
.js-region {
@include padding(.5 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;
}
}

4
sass/components/header/_header.scss
View file

@ -46,14 +46,12 @@
// Wrapper for any blocks placed in the header region.
&__region {
@include padding(.5 0);
@include respond-to(s) {
margin-left: auto;
padding: 0;
@include rtl() {
margin-right: auto;
margin-left: 0;
}
}
}

104
sass/navigation/mobile/_mobile.scss Normal file
View file

@ -0,0 +1,104 @@
.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: rgba(color('black'), .2);
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: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
z-index: 22;
text-decoration: none;
font-weight: bold;
line-height: 1;
border: 1px solid color(border);
border-radius: 3px;
pointer-events: auto;
.js-nav-open & {
color: color(text-bg);
}
&::after {
position: absolute;
content: '';
margin-left: $zen-gutters / 4;
width: $zen-gutters;
height: 4px;
border-top: 12px double color(text);
border-bottom: 4px solid color(text);
}
.js-nav-open &::after {
border-color: color(text-bg);
}
}
.mobile-nav-sheet {
background-color: color(header-bg);
width: 90vw;
height: 100vh;
padding: 2rem;
transform: translateX(100vw);
z-index: 21;
.js-nav-open & {
pointer-events: auto;
box-shadow: -10px 0 10px -10px color(nearblack);
transform: translateX(10vw);
}
.js-navbar {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
li {
list-style-type: none;
margin: .4rem 0;
a {
color: color(white);
text-decoration: none;
}
}
}
}
.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;
}
}

1
sass/styles.scss
View file

@ -63,6 +63,7 @@
@import 'navigation/breadcrumb/breadcrumb';
@import 'navigation/more-link/more-link';
@import 'navigation/navbar/navbar';
@import 'navigation/mobile/mobile';
@import 'navigation/pager/pager';
@import 'navigation/skip-link/skip-link';

6
static/js/script.js
View file

@ -31,8 +31,8 @@
}
// Display CSS grid layout warning to old browsers.
if (!window.CSS || !window.CSS.supports || !window.CSS.supports('display', 'grid')) {
$('.header').after('<div class="layout__grid-notice" role="complementary">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. <a href="https://www.whatbrowser.org/">What Browser?</a></div>');
}
// if (!window.CSS || !window.CSS.supports || !window.CSS.supports('display', 'grid')) {
// $('.header').after('<div class="layout__grid-notice" role="complementary">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. <a href="https://www.whatbrowser.org/">What Browser?</a></div>');
// }
})(jQuery);