diff --git a/src/_includes/header.html b/src/_includes/header.html
index b64bb9f..55ab067 100644
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -1,20 +1,21 @@
+
+
-
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index ffb4a90..3b50c15 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -18,7 +18,7 @@
$body = $("body"),
$wrapper = $("#page-wrapper"),
$banner = $("#banner"),
- $header = $("#header");
+ $header = $(".header");
// Disable animations/transitions until the page has loaded.
$body.addClass("is-loading");
@@ -51,23 +51,6 @@
);
});
- $("#menu").show();
-
- // Menu.
- $("#menu")
- .append('
')
- .appendTo($body)
- .panel({
- delay: 500,
- hideOnClick: true,
- hideOnSwipe: true,
- resetScroll: true,
- resetForms: true,
- side: "right",
- target: $body,
- visibleClass: "is-menu-visible"
- });
-
// Header.
if (skel.vars.IEVersion < 9) $header.removeClass("alt");
diff --git a/src/assets/js/util.js b/src/assets/js/util.js
index 7076ec9..d284053 100644
--- a/src/assets/js/util.js
+++ b/src/assets/js/util.js
@@ -1,301 +1,5 @@
(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(
- '
' +
- '' +
- $this.text() +
- ''
- );
-
- });
-
- 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.
* @return {jQuery} jQuery object.
diff --git a/src/assets/styles/components/_header.scss b/src/assets/styles/components/_header.scss
index 014a2f1..0f113cc 100644
--- a/src/assets/styles/components/_header.scss
+++ b/src/assets/styles/components/_header.scss
@@ -1,105 +1,86 @@
/* Header */
-#header {
- @include vendor('transition', 'background-color #{_duration(transitions)} ease');
- background: _palette(bg);
- height: 3em;
- left: 0;
- line-height: 3em;
+.header {
position: fixed;
top: 0;
+ left: 0;
width: 100%;
+
+ @include vendor('transition', 'background-color #{_duration(transitions)} ease');
+ background: _palette(bg);
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 {
- @include vendor('transition', 'opacity #{_duration(transitions)} ease');
- height: inherit;
- 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;
- }
- }
+ @include vendor('pointer-events', 'none');
+ opacity: 0;
}
+}
- nav {
+.header-home {
+ @include vendor('transition', 'opacity #{_duration(transitions)} ease');
+ margin: 0;
+ padding: 0;
+
+ a {
+ border: 0;
+ display: block;
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 {
- background: transparent;
-
- h1 {
- @include vendor('pointer-events', 'none');
- opacity: 0;
- }
+ @include breakpoint(small) {
+ padding: 1rem 0;
}
-}
\ No newline at end of file
+}
+
+.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;
+ }
+}
diff --git a/src/assets/styles/components/_menu.scss b/src/assets/styles/components/_menu.scss
index 095d7d8..3ba656d 100644
--- a/src/assets/styles/components/_menu.scss
+++ b/src/assets/styles/components/_menu.scss
@@ -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)');
- }
-}
\ No newline at end of file