Unify side bar queries into a single query

scpwiki · Dec 18, 2020 · c1bc2f7 · c1bc2f7
1 parent 8417057
commit c1bc2f7
Showing 1 changed file with 72 additions and 93 deletions.
diff --git a/sigma9.css b/sigma9.css
@@ -445,6 +445,78 @@ sup {
 	padding: 0 5px 0;
 }
 
+@media (max-width: 767px) {
+	/* Show the button that opens 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);
+	}
+
+	#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;
+		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;
+	}
+}
+
 /* CONTENT */
 #main-content {
 	margin: 0 2em 0 22em;
@@ -1100,11 +1172,6 @@ img, embed, video, object, iframe, table {
 		max-width: 90%;
 	}
 
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
 	.top-bar {
 		display: none;
 	}
@@ -1206,11 +1273,6 @@ img, embed, video, object, iframe, table {
 		max-width: 90%;
 	}
 
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
 	.top-bar {
 		display: none;
 	}
@@ -1268,11 +1330,6 @@ img, embed, video, object, iframe, table {
 		width: 8em;
 	}
 
-	#side-bar {
-		width: 80%;
-		position: relative;
-	}
-
 	#main-content {
 		margin: 0 3em 0 2em;
 	}
@@ -1401,33 +1458,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 +1468,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 {