Extract mobile topbar queries into a new section

Author: rossjrw

.stylelintrc.yaml

@@ -20,6 +20,7 @@ rules:
   rule-empty-line-before:
     - always
     - except: ['after-single-line-comment', 'first-nested']
+      ignore: ['after-comment']
   property-case: lower
   value-keyword-case: lower
   string-quotes: single

sigma9.css

@@ -95,6 +95,7 @@ a.newpage {
 	left: 1em;
 	bottom: 0;
 	z-index: 0;
+	max-width: 90%;
 }
 
 body {
@@ -327,10 +328,32 @@ 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;
@@ -1141,10 +1164,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;
 	}
@@ -1168,17 +1187,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;
+		background-position: 0 5.5em;
+		background-size: 55px 55px;
 	}
 
 	.page-options-bottom a {
@@ -1197,11 +1209,6 @@ img, embed, video, object, iframe, table {
 		font-size: .8em;
 	}
 
-	#header {
-		background-position: 0 5.5em;
-		background-size: 55px 55px;
-	}
-
 	#header h1, #header h2 {
 		margin-left: 66px;
 	}
@@ -1250,10 +1257,6 @@ img, embed, video, object, iframe, table {
 		max-width: 100%;
 	}
 
-	.mobile-top-bar {
-		width: 100%;
-	}
-
 	#top-bar li a {
 		padding: 10px .5em;
 	}
@@ -1269,16 +1272,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;
+		background-position: .5em 4.5em;
+		background-size: 66px 66px;
 	}
 
 	.page-options-bottom a {
@@ -1297,11 +1294,6 @@ img, embed, video, object, iframe, table {
 		font-size: .85em;
 	}
 
-	#header {
-		background-position: .5em 4.5em;
-		background-size: 66px 66px;
-	}
-
 	#header h1, #header h2 {
 		margin-left: 80px;
 	}
@@ -1334,16 +1326,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;
+		background-position: 1em 4em;
+		background-size: 77px 77px;
 	}
 
 	.page-options-bottom a {
@@ -1358,11 +1344,6 @@ img, embed, video, object, iframe, table {
 		font-size: .9em;
 	}
 
-	#header {
-		background-position: 1em 4em;
-		background-size: 77px 77px;
-	}
-
 	#header h1, #header h2 {
 		margin-left: 93px;
 	}