Extract mobile topbar queries into their own section

Author: rossjrw

sigma9.css

@@ -95,6 +95,7 @@ a.newpage {
 	left: 1em;
 	bottom: 0;
 	z-index: 0;
+	max-width: 90%;
 }
 
 body {
@@ -327,10 +328,29 @@ sup {
 	color: #a01;
 }
 
-.top-bar ul li:last-of-type ul {
+/* The last dropdown in the topbar should point to the left to avoid potentially overflowing offscreen */
+.top-bar ul li:last-of-type ul,
+.mobile-top-bar ul li:last-of-type ul {
 	right: 0;
 }
 
+@media (max-width: 767px) {
+	/* On mobile, show the mobile top bar instead of the regular one */
+	.mobile-top-bar {
+		display: block;
+	}
+	.top-bar {
+		display: none;
+	}
+}
+
+@media (max-width: 385px) {
+	/* At very small screen sizes, increase the width of the mobile top bar to avoid the links overflowing onto a new line */
+	.mobile-top-bar {
+		width: 100%;
+	}
+}
+
 /* IE7 HACK */
 #top-bar ul > li > ul {
 	*margin-top: -4px;
@@ -1142,10 +1162,6 @@ img, embed, video, object, iframe, table {
 		float: left;
 	}
 
-	.mobile-top-bar ul li:last-of-type ul {
-		right: 0;
-	}
-
 	span, a {
 		word-break: break-all;
 	}
@@ -1169,19 +1185,10 @@ img, embed, video, object, iframe, table {
 		width: 100%;
 	}
 
-	#header, .mobile-top-bar {
+	#header {
 		max-width: 90%;
 	}
 
-	.top-bar {
-		display: none;
-	}
-
-	.mobile-top-bar {
-		display: block;
-		padding: 0;
-	}
-
 	.page-options-bottom a {
 		padding: 0 4px;
 	}
@@ -1251,10 +1258,6 @@ img, embed, video, object, iframe, table {
 		max-width: 100%;
 	}
 
-	.mobile-top-bar {
-		width: 100%;
-	}
-
 	#top-bar li a {
 		padding: 10px .5em;
 	}
@@ -1270,18 +1273,10 @@ img, embed, video, object, iframe, table {
 		margin: 0 2em 0 2em;
 	}
 
-	#header, .mobile-top-bar {
+	#header {
 		max-width: 90%;
 	}
 
-	.top-bar {
-		display: none;
-	}
-
-	.mobile-top-bar {
-		display: block;
-	}
-
 	.page-options-bottom a {
 		padding: 0 5px;
 	}
@@ -1335,18 +1330,10 @@ img, embed, video, object, iframe, table {
 		margin: 0 3em 0 2em;
 	}
 
-	#header, .mobile-top-bar {
+	#header {
 		max-width: 90%;
 	}
 
-	.top-bar {
-		display: none;
-	}
-
-	.mobile-top-bar {
-		display: block;
-	}
-
 	.page-options-bottom a {
 		padding: 0 6px;
 	}