Remove burger menu, replace with responsive row of links
This commit is contained in:
parent
b2d8d569a6
commit
4dff7a9a12
@ -1,20 +1,21 @@
|
|||||||
|
<header class="header {% if page.layout == 'default' %}alt{% endif %}">
|
||||||
|
<h1 class="header-home"><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
|
||||||
|
<nav>
|
||||||
|
<ul class="header-nav">
|
||||||
|
<li>
|
||||||
|
<a class="header-link" href="{{ "/#core-values" | relative_url }}">Values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="header-link" href="{{ "/#services" | relative_url }}">Services</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="header-link" href="{{ "/blog" | relative_url }}">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="header-link" href="{{ "/#contact" | relative_url }}">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div id="page-wrapper">
|
<div id="page-wrapper">
|
||||||
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
|
|
||||||
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
|
|
||||||
<nav id="nav">
|
|
||||||
<ul>
|
|
||||||
<li class="special">
|
|
||||||
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
|
||||||
<div id="menu">
|
|
||||||
<ul>
|
|
||||||
<li><a href="{{ "/" | relative_url }}">Home</a></li>
|
|
||||||
<li><a href="{{ "/#core-values" | relative_url }}">Our Core Values</a></li>
|
|
||||||
<li><a href="{{ "/blog" | relative_url }}">Blog</a></li>
|
|
||||||
<li><a href="{{ "/#services" | relative_url }}">Services We Offer</a></li>
|
|
||||||
<li><a href="{{ "/#contact" | relative_url }}">Get In Touch</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
$body = $("body"),
|
$body = $("body"),
|
||||||
$wrapper = $("#page-wrapper"),
|
$wrapper = $("#page-wrapper"),
|
||||||
$banner = $("#banner"),
|
$banner = $("#banner"),
|
||||||
$header = $("#header");
|
$header = $(".header");
|
||||||
|
|
||||||
// Disable animations/transitions until the page has loaded.
|
// Disable animations/transitions until the page has loaded.
|
||||||
$body.addClass("is-loading");
|
$body.addClass("is-loading");
|
||||||
@ -51,23 +51,6 @@
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#menu").show();
|
|
||||||
|
|
||||||
// Menu.
|
|
||||||
$("#menu")
|
|
||||||
.append('<a href="#menu" class="close"></a>')
|
|
||||||
.appendTo($body)
|
|
||||||
.panel({
|
|
||||||
delay: 500,
|
|
||||||
hideOnClick: true,
|
|
||||||
hideOnSwipe: true,
|
|
||||||
resetScroll: true,
|
|
||||||
resetForms: true,
|
|
||||||
side: "right",
|
|
||||||
target: $body,
|
|
||||||
visibleClass: "is-menu-visible"
|
|
||||||
});
|
|
||||||
|
|
||||||
// Header.
|
// Header.
|
||||||
if (skel.vars.IEVersion < 9) $header.removeClass("alt");
|
if (skel.vars.IEVersion < 9) $header.removeClass("alt");
|
||||||
|
|
||||||
|
|||||||
@ -1,301 +1,5 @@
|
|||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
/**
|
|
||||||
* Generate an indented list of links from a nav. Meant for use with panel().
|
|
||||||
* @return {jQuery} jQuery object.
|
|
||||||
*/
|
|
||||||
$.fn.navList = function() {
|
|
||||||
|
|
||||||
var $this = $(this);
|
|
||||||
$a = $this.find('a'),
|
|
||||||
b = [];
|
|
||||||
|
|
||||||
$a.each(function() {
|
|
||||||
|
|
||||||
var $this = $(this),
|
|
||||||
indent = Math.max(0, $this.parents('li').length - 1),
|
|
||||||
href = $this.attr('href'),
|
|
||||||
target = $this.attr('target');
|
|
||||||
|
|
||||||
b.push(
|
|
||||||
'<a ' +
|
|
||||||
'class="link depth-' + indent + '"' +
|
|
||||||
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
|
|
||||||
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
|
|
||||||
'>' +
|
|
||||||
'<span class="indent-' + indent + '"></span>' +
|
|
||||||
$this.text() +
|
|
||||||
'</a>'
|
|
||||||
);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
return b.join('');
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Panel-ify an element.
|
|
||||||
* @param {object} userConfig User config.
|
|
||||||
* @return {jQuery} jQuery object.
|
|
||||||
*/
|
|
||||||
$.fn.panel = function(userConfig) {
|
|
||||||
|
|
||||||
// No elements?
|
|
||||||
if (this.length == 0)
|
|
||||||
return $this;
|
|
||||||
|
|
||||||
// Multiple elements?
|
|
||||||
if (this.length > 1) {
|
|
||||||
|
|
||||||
for (var i=0; i < this.length; i++)
|
|
||||||
$(this[i]).panel(userConfig);
|
|
||||||
|
|
||||||
return $this;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vars.
|
|
||||||
var $this = $(this),
|
|
||||||
$body = $('body'),
|
|
||||||
$window = $(window),
|
|
||||||
id = $this.attr('id'),
|
|
||||||
config;
|
|
||||||
|
|
||||||
// Config.
|
|
||||||
config = $.extend({
|
|
||||||
|
|
||||||
// Delay.
|
|
||||||
delay: 0,
|
|
||||||
|
|
||||||
// Hide panel on link click.
|
|
||||||
hideOnClick: false,
|
|
||||||
|
|
||||||
// Hide panel on escape keypress.
|
|
||||||
hideOnEscape: false,
|
|
||||||
|
|
||||||
// Hide panel on swipe.
|
|
||||||
hideOnSwipe: false,
|
|
||||||
|
|
||||||
// Reset scroll position on hide.
|
|
||||||
resetScroll: false,
|
|
||||||
|
|
||||||
// Reset forms on hide.
|
|
||||||
resetForms: false,
|
|
||||||
|
|
||||||
// Side of viewport the panel will appear.
|
|
||||||
side: null,
|
|
||||||
|
|
||||||
// Target element for "class".
|
|
||||||
target: $this,
|
|
||||||
|
|
||||||
// Class to toggle.
|
|
||||||
visibleClass: 'visible'
|
|
||||||
|
|
||||||
}, userConfig);
|
|
||||||
|
|
||||||
// Expand "target" if it's not a jQuery object already.
|
|
||||||
if (typeof config.target != 'jQuery')
|
|
||||||
config.target = $(config.target);
|
|
||||||
|
|
||||||
// Panel.
|
|
||||||
|
|
||||||
// Methods.
|
|
||||||
$this._hide = function(event) {
|
|
||||||
|
|
||||||
// Already hidden? Bail.
|
|
||||||
if (!config.target.hasClass(config.visibleClass))
|
|
||||||
return;
|
|
||||||
|
|
||||||
// If an event was provided, cancel it.
|
|
||||||
if (event) {
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide.
|
|
||||||
config.target.removeClass(config.visibleClass);
|
|
||||||
|
|
||||||
// Post-hide stuff.
|
|
||||||
window.setTimeout(function() {
|
|
||||||
|
|
||||||
// Reset scroll position.
|
|
||||||
if (config.resetScroll)
|
|
||||||
$this.scrollTop(0);
|
|
||||||
|
|
||||||
// Reset forms.
|
|
||||||
if (config.resetForms)
|
|
||||||
$this.find('form').each(function() {
|
|
||||||
this.reset();
|
|
||||||
});
|
|
||||||
|
|
||||||
}, config.delay);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Vendor fixes.
|
|
||||||
$this
|
|
||||||
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
|
|
||||||
.css('-webkit-overflow-scrolling', 'touch');
|
|
||||||
|
|
||||||
// Hide on click.
|
|
||||||
if (config.hideOnClick) {
|
|
||||||
|
|
||||||
$this.find('a')
|
|
||||||
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
|
|
||||||
|
|
||||||
$this
|
|
||||||
.on('click', 'a', function(event) {
|
|
||||||
|
|
||||||
var $a = $(this),
|
|
||||||
href = $a.attr('href'),
|
|
||||||
target = $a.attr('target');
|
|
||||||
|
|
||||||
if (!href || href == '#' || href == '' || href == '#' + id)
|
|
||||||
return;
|
|
||||||
|
|
||||||
// Cancel original event.
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
// Hide panel.
|
|
||||||
$this._hide();
|
|
||||||
|
|
||||||
// Redirect to href.
|
|
||||||
window.setTimeout(function() {
|
|
||||||
|
|
||||||
if (target == '_blank')
|
|
||||||
window.open(href);
|
|
||||||
else
|
|
||||||
window.location.href = href;
|
|
||||||
|
|
||||||
}, config.delay + 10);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event: Touch stuff.
|
|
||||||
$this.on('touchstart', function(event) {
|
|
||||||
|
|
||||||
$this.touchPosX = event.originalEvent.touches[0].pageX;
|
|
||||||
$this.touchPosY = event.originalEvent.touches[0].pageY;
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
$this.on('touchmove', function(event) {
|
|
||||||
|
|
||||||
if ($this.touchPosX === null
|
|
||||||
|| $this.touchPosY === null)
|
|
||||||
return;
|
|
||||||
|
|
||||||
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
|
|
||||||
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
|
|
||||||
th = $this.outerHeight(),
|
|
||||||
ts = ($this.get(0).scrollHeight - $this.scrollTop());
|
|
||||||
|
|
||||||
// Hide on swipe?
|
|
||||||
if (config.hideOnSwipe) {
|
|
||||||
|
|
||||||
var result = false,
|
|
||||||
boundary = 20,
|
|
||||||
delta = 50;
|
|
||||||
|
|
||||||
switch (config.side) {
|
|
||||||
|
|
||||||
case 'left':
|
|
||||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'right':
|
|
||||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'top':
|
|
||||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'bottom':
|
|
||||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
|
|
||||||
$this.touchPosX = null;
|
|
||||||
$this.touchPosY = null;
|
|
||||||
$this._hide();
|
|
||||||
|
|
||||||
return false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent vertical scrolling past the top or bottom.
|
|
||||||
if (($this.scrollTop() < 0 && diffY < 0)
|
|
||||||
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event: Prevent certain events inside the panel from bubbling.
|
|
||||||
$this.on('click touchend touchstart touchmove', function(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
|
|
||||||
$this.on('click', 'a[href="#' + id + '"]', function(event) {
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
config.target.removeClass(config.visibleClass);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Body.
|
|
||||||
|
|
||||||
// Event: Hide panel on body click/tap.
|
|
||||||
$body.on('click touchend', function(event) {
|
|
||||||
$this._hide(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event: Toggle.
|
|
||||||
$body.on('click', 'a[href="#' + id + '"]', function(event) {
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
config.target.toggleClass(config.visibleClass);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Window.
|
|
||||||
|
|
||||||
// Event: Hide on ESC.
|
|
||||||
if (config.hideOnEscape)
|
|
||||||
$window.on('keydown', function(event) {
|
|
||||||
|
|
||||||
if (event.keyCode == 27)
|
|
||||||
$this._hide(event);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
return $this;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Apply "placeholder" attribute polyfill to one or more forms.
|
* Apply "placeholder" attribute polyfill to one or more forms.
|
||||||
* @return {jQuery} jQuery object.
|
* @return {jQuery} jQuery object.
|
||||||
|
|||||||
@ -1,105 +1,86 @@
|
|||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
||||||
#header {
|
.header {
|
||||||
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
|
|
||||||
background: _palette(bg);
|
|
||||||
height: 3em;
|
|
||||||
left: 0;
|
|
||||||
line-height: 3em;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
|
||||||
|
background: _palette(bg);
|
||||||
z-index: _misc(z-index-base);
|
z-index: _misc(z-index-base);
|
||||||
|
|
||||||
|
height: 3em;
|
||||||
|
line-height: 3em;
|
||||||
|
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
position: initial;
|
||||||
|
height: auto;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.alt {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
|
@include vendor('pointer-events', 'none');
|
||||||
height: inherit;
|
opacity: 0;
|
||||||
left: 1.25em;
|
|
||||||
line-height: inherit;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
border: 0;
|
|
||||||
display: block;
|
|
||||||
height: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
|
|
||||||
@include breakpoint(small) {
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
nav {
|
.header-home {
|
||||||
|
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> a {
|
|
||||||
border: 0;
|
|
||||||
color: _palette(fg-bold);
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
|
||||||
padding: 0 1.5em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&.menuToggle {
|
|
||||||
outline: 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
background-image: url('images/bars.svg');
|
|
||||||
background-position: right center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
height: 3.75em;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(small) {
|
|
||||||
padding: 0 1.5em;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(small) {
|
|
||||||
padding: 0 0 0 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
@include breakpoint(small) {
|
||||||
background: transparent;
|
padding: 1rem 0;
|
||||||
|
|
||||||
h1 {
|
|
||||||
@include vendor('pointer-events', 'none');
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li { padding: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
justify-content: space-around;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link {
|
||||||
|
border: 0;
|
||||||
|
color: _palette(fg-bold);
|
||||||
|
font-size: 0.8em;
|
||||||
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -20,85 +20,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu {
|
|
||||||
display:none;
|
|
||||||
@include vendor('transform', 'translateX(20em)');
|
|
||||||
@include vendor('transition', 'transform #{_duration(menu)} ease');
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
background: _palette(accent1, bg);
|
|
||||||
color: _palette(accent1, fg-bold);
|
|
||||||
height: 100%;
|
|
||||||
max-width: 80%;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 3em 2em;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 20em;
|
|
||||||
z-index: _misc(z-index-base) + 2;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
border-top: solid 1px _palette(accent1, border);
|
|
||||||
margin: 0.5em 0 0 0;
|
|
||||||
padding: 0.5em 0 0 0;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top: 0 !important;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
|
||||||
border: 0;
|
|
||||||
color: black;
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
|
||||||
outline: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@include breakpoint(small) {
|
|
||||||
line-height: 3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
background-image: url('images/close.svg');
|
|
||||||
background-position: 4.85em 1em;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
height: 3em;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(small) {
|
|
||||||
padding: 3em 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.is-menu-visible {
|
|
||||||
#page-wrapper {
|
|
||||||
opacity: 0.35;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu {
|
|
||||||
@include vendor('transform', 'translateX(0)');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user