Home
About Emerald
diff --git a/_includes/nav-footer-custom.html b/_includes/nav-footer-custom.html
index c57bafc3f7..a9239e799e 100644
--- a/_includes/nav-footer-custom.html
+++ b/_includes/nav-footer-custom.html
@@ -1,5 +1,5 @@
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 2c8acd77d1..bba5cb792b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,7 +10,7 @@
{% include menu.html %}
-
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 9f6c0791dd..105776824c 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -1,23 +1,8 @@
-/*- General Layout -*/
+/* -- General Layout -- */
/* Navigation */
-nav {
- width: 14rem;
- position: fixed;
- background-color: $main-color;
- top: 0;
- bottom: 0;
- right:-14rem;
- color: $background-color;
- opacity: 0.95;
- -webkit-transition: all 0.3s ease-in;
- -moz-transition: all 0.3s ease-in;
- -ms-transition: all 0.3s ease-in;
- transition: all 0.3s ease-in;
- z-index: 1;
- padding: 72px 0;
- text-align: center;
+#nav, #nav-left {
a {
display: block;
color: $background-color;
@@ -36,17 +21,26 @@ nav {
}
}
-nav.menu-open {
- -webkit-transform: translateX(-14rem);
- -moz-transform: translateX(-14rem);
- -ms-transform: translateX(-14rem);
- transform: translateX(-14rem);
- width: 100%;
- @media (min-width: 940px) {
- width: 30%;
- }
+#nav {
+ @include nav-position(right);
}
+#nav-left {
+ @include nav-position(left);
+}
+
+/* Toggle class to open menu */
+
+#nav.menu-open {
+ @include open(-14rem);
+}
+
+#nav-left.menu-open-left {
+ @include open(14rem);
+}
+
+/* Separator after menu */
+
#nav-list:after {
display: block;
content: '';
@@ -56,16 +50,15 @@ nav.menu-open {
background-color: $background-color;
}
+/* Icon menu */
+
#nav-menu {
- display: block;
- position: absolute;
- top: 35px;
- right: 25px;
- z-index: 10;
- height: 24px;
+ @include icon-position(right);
}
-/* Icon menu */
+#nav-menu-left {
+ @include icon-position(left);
+}
#menu {
height: 4px;
@@ -211,6 +204,7 @@ code {
}
/* Set the vertical rhythm (and padding-left) for lists inside post content */
+
.content ul, .content ol {
line-height: 1.5em; /* 24px/16px */
padding-left: 1.5em;
@@ -220,11 +214,13 @@ code {
}
/* Pages */
+
#page ul, #page ol {
padding-left: 1.5em;
}
/* Paginator */
+
.pagination {
text-align: center;
margin: 2.666668em;
@@ -249,6 +245,7 @@ code {
}
/* Footer */
+
footer {
background-color: $main-color;
color: $background-color;
diff --git a/_sass/mixin.scss b/_sass/mixin.scss
new file mode 100644
index 0000000000..d05b07b4af
--- /dev/null
+++ b/_sass/mixin.scss
@@ -0,0 +1,41 @@
+// -- Mixins -- //
+
+// Nav menu
+
+@mixin icon-position($position) {
+ display: block;
+ position: absolute;
+ top: 35px;
+ #{$position}: 25px;
+ z-index: 10;
+ height: 24px;
+}
+
+@mixin open($x) {
+ -webkit-transform: translateX($x);
+ -moz-transform: translateX($x);
+ -ms-transform: translateX($x);
+ transform: translateX($x);
+ width: 100%;
+ @media (min-width: 940px) {
+ width: 30%;
+ }
+}
+
+@mixin nav-position($position) {
+ width: 14rem;
+ position: fixed;
+ background-color: $main-color;
+ top: 0;
+ bottom: 0;
+ #{$position}: -14rem;
+ color: $background-color;
+ opacity: 0.95;
+ -webkit-transition: all 0.3s ease-in;
+ -moz-transition: all 0.3s ease-in;
+ -ms-transition: all 0.3s ease-in;
+ transition: all 0.3s ease-in;
+ z-index: 1;
+ padding: 72px 0;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 6caf1fa19e..e51e7a10c3 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -3,4 +3,4 @@
---
//Import
-@import "base", "typography", "layout", "syntax.scss", "custom.scss";
+@import "base", "mixin.scss", "typography", "layout", "syntax.scss", "custom.scss";
diff --git a/js/main.js b/js/main.js
index dfb3295e3d..642af94507 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,15 +1,25 @@
-var icon = document.getElementById("nav-menu");
+var normal = document.getElementById("nav-menu");
+var reverse = document.getElementById("nav-menu-left");
-// Toggle the "menu-open" class
+var icon = normal !== null ? normal : reverse;
+
+// Toggle the "menu-open" % "menu-opn-left" classes
function toggle() {
- var nav = document.getElementById("nav");
+ var navRight = document.getElementById("nav");
+ var navLeft = document.getElementById("nav-left");
+ var nav = navRight !== null ? navRight : navLeft;
+
var button = document.getElementById("menu");
var site = document.getElementById("wrap");
- if (nav.className == "menu-open") {
+ if (nav.className == "menu-open" || nav.className == "menu-open-left") {
nav.className = "";
button.className = "";
site.className = "";
+ } else if (reverse !== null) {
+ nav.className += "menu-open-left";
+ button.className += "btn-close";
+ site.className += "fixed";
} else {
nav.className += "menu-open";
button.className += "btn-close";
@@ -19,10 +29,12 @@ function toggle() {
// Ensures backward compatibility with IE old versions
function menuClick() {
- if (document.addEventListener) {
+ if (document.addEventListener && icon !== null) {
icon.addEventListener('click', toggle);
- } else if (document.attachEvent) {
+ } else if (document.attachEvent && icon !== null) {
icon.attachEvent('onclick', toggle);
+ } else {
+ return;
}
}