goodies
photos
personal
diff --git a/_src/assets/js/app.js b/_src/assets/js/app.js
index 0500ff8c..2c0b4f34 100644
--- a/_src/assets/js/app.js
+++ b/_src/assets/js/app.js
@@ -38,8 +38,8 @@ var siteNavigation = {
$searchresults.removeClass('hide');
// hide menu too just in case
- if ( $navpop.is(':visible') ) {
- $navpop.addClass('hide');
+ if ( $('body').hasClass('menu-open') ) {
+ $('body').removeClass('menu-open');
}
// bind the hide controls
@@ -80,13 +80,13 @@ var siteNavigation = {
e.preventDefault();
// toggle menu
- $thepop.toggleClass('show').toggleClass('hide');
+ $('body').toggleClass('menu-open');
// bind the hide controls
- $(document).bind("click.hidethepop", function() {
- $thepop.removeClass('show').addClass('hide');
+ $(document).bind('click.hidethepop', function() {
+ $('body').removeClass('menu-open');
// unbind the hide controls
- $(document).unbind("click.hidethepop");
+ $(document).unbind('click.hidethepop');
});
// dont close thepop when you click on thepop
diff --git a/_src/assets/less/navigation.less b/_src/assets/less/navigation.less
index 1b3bfe8b..cb5f06f5 100644
--- a/_src/assets/less/navigation.less
+++ b/_src/assets/less/navigation.less
@@ -2,16 +2,6 @@
// NAVIGATION
/////////////////////////////////////
-
-.nav-popover {
- position: absolute;
- top: 100%;
- z-index: 5; // so it's always above page content
- .border-bottom-radius;
- background: #f1f4f7;
- box-shadow: 0 2px 7px rgba(0,0,0,.05);
-}
-
.menu-btn,
.search-btn {
line-height: 1em;
@@ -20,17 +10,17 @@
display: inline-block;
margin: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+
// icons
&:before { .transition; }
&:hover:before {
color: @link-color
}
}
-
-.nav-main,
-.site-search {
- float: right;
-}
+.search-btn { right: 50px }
//
// Main Navigation
@@ -46,15 +36,15 @@
li { display: inline-block; }
.nav-popover {
- top: 130%;
- right: 0;
+ background: @body-bg;
+ padding: @line-height-computed*1.5 0;
width: 100%;
.clearfix;
.nav-link {
width: 50%;
@media @breakpoint2 {
- width: 33%
+ width: 33.3%
}
float: left;
text-align: center;
diff --git a/_src/assets/less/scaffolding.less b/_src/assets/less/scaffolding.less
index f6c43711..8511f844 100644
--- a/_src/assets/less/scaffolding.less
+++ b/_src/assets/less/scaffolding.less
@@ -13,7 +13,6 @@ body {
//
.topbar {
.clearfix;
- background: fade(@brand-dark, 3%);
border-bottom: 1px solid rgba(255,255,255,.7);
box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%);
@@ -190,15 +189,22 @@ a.close,
//
@media @breakpoint2 {
+ body {
+ position: relative
+ }
section[role=document] {
- background-color: @body-bg;
+ background-color: @page-bg;
margin-top: 71px;
+ .transition;
+ .menu-open & {
+ margin-top: 300px;
+ }
margin-bottom: 380px;
position: relative;
z-index: 2;
border-top: 1px solid rgba(255,255,255,.7);
border-bottom: 1px solid rgba(255,255,255,.7);
- box-shadow: 0 1px 4px fade(@brand-dark, 20%), 0 -1px 4px fade(@brand-dark, 20%);
+ box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
}
.topbar,
.footer {
@@ -207,9 +213,9 @@ a.close,
border: none;
}
.topbar {
- height: 71px;
+ min-height: 71px;
top: 0;
- box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
+ box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
border: none;
}
@@ -217,5 +223,7 @@ a.close,
height: 380px;
bottom: 0;
box-shadow: none;
+
+ .menu-open & { .hide; }
}
}
\ No newline at end of file
diff --git a/_src/assets/less/variables.less b/_src/assets/less/variables.less
index c8cd26f8..47c55bd8 100644
--- a/_src/assets/less/variables.less
+++ b/_src/assets/less/variables.less
@@ -41,7 +41,8 @@
// Scaffolding
/////////////////////////////////////
-@body-bg: @brand-light;
+@body-bg: #dfe8ef;
+@page-bg: @brand-light;
@border-radius-base: 3px;