Improve responsive nav experience

assets/less/page.less

@@ -18,10 +18,12 @@ body {
 	margin-bottom: 1em;
 	float: none;
 	display: block;
+	.font-rem(24);
 	@media @600px {
 		.grid(12,2);
 		.prefix(12,0.5);
 		.suffix(12,0.5);
+		.font-rem(16);
 	}
 	@media @1382px {
 		.grid(12,1.5);
@@ -44,22 +46,161 @@ body {
 		.grid(12,8);
 	}
 	ul {
-		list-style: none;
 		margin: 0;
 		padding: 0;
+		clear: both;
+		list-style-type: none;
 	}
 	li {
+		display: block;
 		list-style-type: none;
-		display: inline;
-		margin-right: 25px;
-		white-space: nowrap;
+		border-bottom: 1px solid lighten(@black,80);
+		border-bottom: 1px solid fade(@black,10);
+		.font-rem(16);
+		&:last-child {
+			border-bottom: 0 solid transparent;
+		}
+		@media @600px {
+			display: inline;
+			margin-right: 25px;
+			white-space: nowrap;
+			border-bottom: 0 solid transparent;
+		}
 		a { 
+			display: block;
+			padding: 10px 0;
 			decoration: none;
 			border-bottom: 0 solid transparent;
 			.transition(all .2s);
+			@media @600px {
+				display: inline;
+				padding: 0;
+			}
 		}
 	}
 }
+// Navicon lines
+@button-size: 1.5rem;
+.line() {
+	display: inline-block;
+	width: @button-size;
+	height: @button-size/7;
+	// line color
+	background: @white;
+	border-radius: @button-size/14;
+	transition: .3s;
+}
+.lines-button {
+	padding: @button-size/4 @button-size/2;
+	transition: .3s;
+	cursor: pointer;
+	user-select: none;
+	border-radius: @button-size/7;
+}
+.lines-button:hover {
+	opacity: 1;
+}
+.lines-button:active {
+	transition: 0;
+}
+.lines {
+	margin-right: 10px;
+	margin-bottom: @button-size/5;
+	// create middle line
+	.line();
+	position: relative;
+	// create the upper and lower lines as pseudo-elements of the middle line
+	&:before,
+	&:after {
+		.line();
+		position: absolute;
+		left: 0;
+		content: '';
+		-webkit-transform-origin: @button-size/14 center;
+		transform-origin: @button-size/14 center;
+	}
+	&:before { top: @button-size/4; }
+	&:after { top: -@button-size/4; }
+}
+.lines-button:hover {
+	opacity: 1;
+	.lines {
+		&:before { top: @button-size/3.5; }
+		&:after { top: -@button-size/3.5; }
+	}
+}
+.lines-button.x.active .lines {
+	// hide the middle line
+	background: transparent;
+	// overlap the lines by setting both their top values to 0
+	&:before,
+	&:after {
+		-webkit-transform-origin: 50% 50%;
+		transform-origin: 50% 50%;
+		top: 0;
+		width: @button-size;
+	}
+	// rotate the lines to form the x shape
+	&:before {
+		-webkit-transform: rotate3d(0,0,1,45deg);
+		transform: rotate3d(0,0,1,45deg);
+	}
+	&:after {
+		-webkit-transform: rotate3d(0,0,1,-45deg);
+		transform: rotate3d(0,0,1,-45deg);
+	}
+}
+// Style the toggle menu link and hide it
+.nav .navtoogle {	
+	.font-rem(18);
+	font-weight: normal;
+	background-color: @black;
+	color: @white;	
+	border: none;
+	cursor: pointer;
+	@media @600px {
+		display: none;
+	}
+}
+.nav button {
+	border: none;
+	background: none;
+}
+.navtoogle i {
+	z-index:-1;
+}
+.icon-menu {
+	position: relative;
+	top: 3px;
+	line-height: 0;
+}
+// When JavaScript is disabled, we hide the toggle button
+.no-js .nav .navtoggle {
+	display: none;
+}
+// When JavaScript is disabled, we show the menu
+.no-js .nav ul {
+	max-height: 30em;
+	overflow: hidden;
+}
+// When JavaScript is enabled, we hide the menu
+.js .nav ul {
+	max-height: 0;
+	overflow: hidden;
+	@media @600px {
+		max-height: 30em;
+	}
+}
+// Displaying the menu when the user has clicked on the button
+.js .nav .active + ul {		
+	max-height: 30em;
+	overflow: hidden;
+	-webkit-transition: max-height .4s;
+	-moz-transition: max-height .4s;
+	-o-transition: max-height .4s;
+	-ms-transition: max-height .4s;
+	transition: max-height .4s;
+}
 #main {
 	counter-reset: captions;
 	.container();