Mobile sidebar

assets/css/application.css

@@ -56,9 +56,24 @@ h2, h3, h4, h5, h6
 /**
  * Primary Navigation
  */
+.workless
+{
+	float: left;
+	margin-right: 15px;
+	padding-right: 25px;
+	border-right: 1px solid rgba( 255, 255, 255, 0.1 );
+}
+
+.workless,
+.workless i
+{
+	color: #ffffff;
+	text-decoration: none;
+}
+
 nav#primary 
 {
-    background: #262626;
+    background: #32353a;
     width: 100%;
     padding: 15px 0;
     position: fixed;
@@ -68,7 +83,6 @@ nav#primary
 
 nav#primary ul 
 {
-    width: 100%;
 	float: left;
 }
 
@@ -86,13 +100,6 @@ nav#primary ul li a
     text-decoration: none;
 }
 
-nav#primary ul li.workless a
-{
-    padding-right: 25px;
-    border-right: 1px solid rgba( 255, 255, 255, 0.2 );
-    font-size: 18px;
-}
-
 nav#primary ul li a:hover 
 {
     color: rgba( 255, 255, 255, 0.5 );
@@ -156,6 +163,62 @@ ul.icons li i
     margin-bottom: 5px;
     display: block;
 }
+/**
+ * Aside & Toggle
+ */
+a.aside-open
+{
+	margin: 0;
+	padding: 0;
+	float: right;
+}
+
+a.aside-open i
+{
+	color: #ffffff;
+}
+
+#main,
+#aside
+{
+	-webkit-transition: 150ms linear all;
+	-moz-transition: 150ms linear all;
+	transition: 150ms linear all; 
+}
+
+#aside
+{
+	overflow-y: scroll;
+    position: fixed;
+    right: -400px;
+    top: 0;
+    bottom: 0;
+    z-index: 9995;
+    background: #25282c;
+}
+
+#aside.toggled
+{
+	right: 0;
+}
+
+#aside li
+{
+	display: block;
+}
+
+#aside li a
+{
+	color: #ffffff;
+	text-decoration: none;
+	font-size: 14px;
+	margin-bottom: 15px;
+}
+
+#aside li a:hover 
+{
+    color: rgba( 255, 255, 255, 0.5 );
+}
 /**
  * Footer
  */

assets/css/responsive.css

@@ -1,41 +1,99 @@
 /**
  * Smartphones (portrait)
  */
-nav#primary ul {
+.alignright
+{
+	float: left;
+}
+
+.mobile,
+#menu-mobile
+{
+    display: inherit;
+}
+
+
+#menu-primary
+{
     display: none;
 }
 
-.open {
-    display: block;
+#aside
+{
+	width: 220px;
+	padding: 25px;
+}
+
+#main.toggled
+{
+	-moz-transform: translateX(-220px);
+	-webkit-transform: translateX(-220px);
+	transform: translateX(-220px);
 }
 
 .one-full,
 .one-half,
 .one-third,
 .two-third,
 .one-quarter,
-.one-fifth {
+.one-fifth 
+{
     width: 260px;
 }
 
+h1 
+{
+	font-size: 180%;
+}
+
+h2 
+{
+	font-size: 160%;
+}
+
+h3 
+{
+	font-size: 140%;
+}
+
+h4 
+{
+	font-size: 120%;
+}
+
+h5 
+{
+	font-size: 110%;
+}
+
+h6 
+{
+	font-size: 16px;
+}
 /**
  * iPads (portrait)
  */
 @media only screen and (min-width: 767px) {
-	nav#primary ul {
-	    display: none;
+	#aside
+	{
+		width: 310px;
+		padding: 50px;
 	}
-
-	.open {
-	    display: block;
+
+	#main.toggled
+	{
+		-moz-transform: translateX(-310px);
+		-webkit-transform: translateX(-310px);
+		transform: translateX(-310px);
 	}
 
     .one-full,
     .one-half,
     .one-third,
     .two-third,
     .one-quarter,
-    .one-fifth {
+    .one-fifth 
+    {
         width: 100%;
     }
 }
@@ -44,104 +102,97 @@ nav#primary ul {
  * iPads (landscape)
  */
 @media only screen and (min-width: 1023px) {
-	nav#primary ul {
-        display: none;
-    }
-
-    .open {
-        display: block;
-    }
-
-    .one-half {
+	.alignright
+	{
+		float: right;
+	}
+
+    .one-half 
+    {
         width: 50%;
     }
 
-    .one-third {
+    .one-third 
+    {
         width: 33.33333%;
     }
 
-    .two-third {
+    .two-third 
+    {
         width: 66.66666%;
     }
 
-    .one-quarter {
+    .one-quarter 
+    {
         width: 25%;
     }
 
     .one-fifth {
         width: 20%;
     }
+
+    h1 
+	{
+		font-size: 220%;
+	}
+
+	h2 
+	{
+		font-size: 180%;
+	}
+
+	h3 
+	{
+		font-size: 160%;
+	}
+
+	h4 
+	{
+		font-size: 150%;
+	}
+
+	h5 
+	{
+		font-size: 140%;
+	}
+
+	h6 
+	{
+		font-size: 130%;
+	}
 }
 
 /**
  * Desktops
  */
 @media only screen and (min-width: 1279px) {
-	nav#primary ul {
-	    display: inline;
-	}
-
-	.open {
+	.mobile,
+	#menu-mobile
+	{
 	    display: none;
 	}
 
-    .one-half {
-        width: 50%;
-    }
-
-    .one-third {
-        width: 33.33333%;
-    }
-
-    .two-third {
-        width: 66.66666%;
-    }
-
-    .one-quarter {
-        width: 25%;
-    }
-
-    .one-fifth {
-        width: 20%;
-    }
+	#menu-primary
+	{
+		display: inherit;
+	}
 }
 
 /**
  * Large Desktops
  */
 @media only screen and (min-width: 1679px) {
-	nav#primary ul {
-	    display: inline;
-	}
-
-	.open {
-	    display: none;
-	}
 
-    .one-half {
-        width: 50%;
-    }
-
-    .one-third {
-        width: 33.33333%;
-    }
-
-    .two-third {
-        width: 66.66666%;
-    }
-
-    .one-quarter {
-        width: 25%;
-    }
-
-    .one-fifth {
-        width: 20%;
-    }
 }
-/* Fix icons in IE */
+/* Fixes for IE */
 @media screen and (min-width:0\0) {
     [class^="icon-"]:before,
     [class*=" icon-"]:before {
         margin-top: -500px!important;
     }
+
+    #main.toggled
+	{
+		margin-left: -310px;
+	}
 }