10 years ago · 623fa60602
--- a/css/style.css
+++ b/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;
 
+	}
 
 }
--- a/data/pages/topbar.template
+++ b/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
--- a/js/index.js
+++ b/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();