diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
index 625acd4d..7c604a1a 100644
--- a/.stylelintrc.yaml
+++ b/.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
diff --git a/sigma9.css b/sigma9.css
index 10cda0fc..ba339d5c 100644
--- a/sigma9.css
+++ b/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: 1023px) {
+	/* 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;
@@ -338,6 +361,7 @@ sup {
 
 /* SIDE MENU */
 #side-bar {
+	display: block;
 	clear: none;
 	float: none;
 	position: absolute;
@@ -346,7 +370,6 @@ sup {
 	width: 17em;
 	padding: 0;
 	border: none;
-	display: block;
 	overscroll-behavior: none;
 }
 
@@ -445,6 +468,78 @@ sup {
 	padding: 0 5px 0;
 }
 
+.close-menu {
+	display: none;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, .3) 1px 1px repeat;
+	z-index: -1;
+}
+
+/* The button that shows the sidebar on mobile */
+#top-bar .open-menu a {
+	position: fixed;
+	top: .5em;
+	left: .5em;
+	z-index: 15;
+	font-family: 'Nanum Gothic', sans-serif;
+	font-size: 30px;
+	font-weight: 700;
+	width: 30px;
+	height: 30px;
+	line-height: .9em;
+	text-align: center;
+	border: .2em solid #888;
+	background-color: #fff;
+	border-radius: 3em;
+	color: #888;
+}
+
+#top-bar .open-menu a:hover {
+	text-decoration: none;
+	box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
+}
+
+@media (max-width: 1023px) {
+	/* On mobile, the sidebar is tucked away to the left */
+	#side-bar {
+		position: fixed;
+		top: 0;
+		left: -25em;
+		height: 100%;
+		background-color: rgb(184, 134, 134);
+		overflow-y: auto;
+		z-index: 10;
+		padding: 1em 1em 0 1em;
+		transition: left .5s ease-in-out .1s;
+	}
+
+	/* XXX What is this for? */
+	#side-bar::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		width: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, .2);
+	}
+
+	/* When the sidebar is the URL target, move it to the right */
+	#side-bar:target {
+		left: 0;
+		border: 1px solid #dedede;
+		z-index: 10;
+	}
+
+	/* When the sidebar is the URL target, show the darkened close area */
+	#side-bar:target .close-menu {
+		display: block;
+	}
+}
+
 /* CONTENT */
 #main-content {
 	margin: 0 2em 0 22em;
@@ -1069,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;
 	}
@@ -1096,22 +1187,10 @@ img, embed, video, object, iframe, table {
 		width: 100%;
 	}
 
-	#header, .mobile-top-bar {
+	#header {
 		max-width: 90%;
-	}
-
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
-	.top-bar {
-		display: none;
-	}
-
-	.mobile-top-bar {
-		display: block;
-		padding: 0;
+		background-position: 0 5.5em;
+		background-size: 55px 55px;
 	}
 
 	.page-options-bottom a {
@@ -1130,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;
 	}
@@ -1183,10 +1257,6 @@ img, embed, video, object, iframe, table {
 		max-width: 100%;
 	}
 
-	.mobile-top-bar {
-		width: 100%;
-	}
-
 	#top-bar li a {
 		padding: 10px .5em;
 	}
@@ -1202,21 +1272,10 @@ img, embed, video, object, iframe, table {
 		margin: 0 2em 0 2em;
 	}
 
-	#header, .mobile-top-bar {
+	#header {
 		max-width: 90%;
-	}
-
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
-	.top-bar {
-		display: none;
-	}
-
-	.mobile-top-bar {
-		display: block;
+		background-position: .5em 4.5em;
+		background-size: 66px 66px;
 	}
 
 	.page-options-bottom a {
@@ -1235,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;
 	}
@@ -1268,25 +1322,14 @@ img, embed, video, object, iframe, table {
 		width: 8em;
 	}
 
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
 	#main-content {
 		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 {
@@ -1301,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;
 	}
@@ -1361,11 +1399,6 @@ img, embed, video, object, iframe, table {
 	}
 }
 
-/* off-canvas */
-.close-menu {
-	display: none;
-}
-
 @media (max-width: 767px) {
 	.page-history tbody tr td:last-child {
 		width: 35%;
@@ -1401,33 +1434,6 @@ img, embed, video, object, iframe, table {
 		display: none;
 	}
 
-	#top-bar .open-menu a {
-		position: fixed;
-		top: .5em;
-		left: .5em;
-		z-index: 15;
-		font-family: 'Nanum Gothic', sans-serif;
-		font-size: 30px;
-		font-weight: 700;
-		width: 30px;
-		height: 30px;
-		line-height: .9em;
-		text-align: center;
-		border: .2em solid #888;
-		background-color: #fff;
-		border-radius: 3em;
-		color: #888;
-	}
-
-	#top-bar .open-menu a:hover {
-		text-decoration: none;
-		-webkit-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-		-moz-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-		-ms-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-		-o-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-		box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
-	}
-
 	#main-content {
 		max-width: 90%;
 		margin: 0 5%;
@@ -1438,57 +1444,6 @@ img, embed, video, object, iframe, table {
 		-o-transition: .5s ease-in-out .1s;
 		transition: .5s ease-in-out .1s;
 	}
-
-	#side-bar {
-		display: block;
-		position: fixed;
-		top: 0;
-		left: -25em;
-		width: 17em;
-		height: 100%;
-		background-color: rgb(184, 134, 134);
-		overflow-y: auto;
-		z-index: 10;
-		padding: 1em 1em 0 1em;
-		-webkit-transition: left .5s ease-in-out .1s;
-		-moz-transition: left .5s ease-in-out .1s;
-		-ms-transition: left .5s ease-in-out .1s;
-		-o-transition: left .5s ease-in-out .1s;
-		transition: left .5s ease-in-out .1s;
-	}
-
-	#side-bar::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		width: 0;
-		height: 100%;
-		background-color: rgba(0, 0, 0, .2);
-	}
-
-	#side-bar:target {
-		display: block;
-		left: 0;
-		width: 17em;
-		margin: 0;
-		border: 1px solid #dedede;
-		z-index: 10;
-	}
-
-	#side-bar:target + #main-content {
-		left: 0;
-	}
-
-	#side-bar:target .close-menu {
-		display: block;
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		background: rgba(0, 0, 0, .3) 1px 1px repeat;
-		z-index: -1;
-	}
 }
 
 div.scpnet-interwiki-wrapper {