Responsive design work.

css/style.css

@@ -33,8 +33,7 @@ div#topbar a{
 	text-transform: capitalize;
 	text-align: center;
 	vertical-align: middle;
-	height: 100%;
-	display: inline-block;
+	height: 35px;
 	border-color: white;
 	border-style: solid;
 	border-width: 0;
@@ -46,15 +45,15 @@ div#topbar a{
 	line-height: 35px;
 	padding-left: 2px;
 	padding-right: 2px;
+	min-width: 35px;
+	max-width: 70px;
+	overflow: hidden;
 }
 div#topbar a:hover{
 	background-color: white;
 	color: black;
 	border-bottom-color: black;
 }
-div#topbar a:hover + a{
-	border-left-color: black;
-}
 div.topbar-right{
 	float: right;
 }
@@ -84,4 +83,39 @@ div#loading{
 	background-image: url('../img/load.gif');
 	background-repeat: no-repeat;
 	background-position: center;
+}
+@media screen and (max-width: 767px){
+	a.topbar-home span{
+		display: none;
+	}
+	a.topbar-home:after{
+		content: "\2261";
+		/*use \8943 elsewhere for options dropdown*/
+	}
+	div.topbar-right{
+		display: none;
+	}
+	div.topbar-left{
+		width: 100%;
+	}
+	a.topbar-current{
+		float: right !important;
+	}
+	a.topbar-back{
+		width: 35px;
+		background-color: darkred;
+		position: absolute;
+		left: 0;
+	}
+	a.topbar-back:hover{
+		background-color: gray !important;
+	}
+}
+@media screen and (min-width: 768px){
+	div#topbar a:hover + a{
+		border-left-color: black;
+	}
+	a.topbar-back{
+		display: none !important;
+	}
 }

data/pages/topbar.template

@@ -1,12 +1,17 @@
 <div class="topbar-left">
 	<a class="topbar-home" href="#page-index">
-		&#8962;
+		<span>
+			&#8962;
+		</span>
 	</a>
-	<a href="#{{url}}">
+	<a class="topbar-current" href="#{{url}}">
 		{{title}}
 	</a>
 </div>
 <div class="topbar-right">
+	<a class="topbar-back" href="#page-index">
+		&#8689;
+	</a>
 	{{#unless key}}
 		<a href="#page-register">
 			Register

js/index.js

@@ -138,7 +138,11 @@
 					if(href.indexOf(location.origin) != -1 && href.indexOf('#') != -1){
 						href = href.substr(href.indexOf('#')+1);
 						$(this).click(function(){
-							loadState(href);
+							if(($(this).hasClass('topbar-home') || $(this).hasClass('topbar-back'))&&$(window).width()<767){
+								$('#topbar').children('div.topbar-right,div.topbar-left').toggle();
+							}else{
+								loadState(href);
+							}
 							return false;
 						});
 					}
@@ -212,6 +216,13 @@
 			});
 		},'json');
 	});
+	$(window).resize(function(){
+		if($(window).width()>767){
+			$('#topbar div.topbar-right, #topbar div.topbar-left').css({
+				'display': ''
+			});
+		}
+	});
 	$.fn.serializeObject = function(){
 		var o = {},
 			a = this.serializeArray();