Website: Repositioned theme selector (#3146)

RunDevelopment · web-flow · commit ea361e5a2b37 · 2021-10-19T14:52:13.000+02:00
diff --git a/assets/code.js b/assets/code.js
@@ -244,27 +244,4 @@ var setTheme;
 
 	$$('.plugin-list').forEach(listPlugins);
 
-	// small polyfill for Element#matches
-	if (!Element.prototype.matches) {
-		Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-	}
-
-	Prism && Prism.hooks.add('complete', function (env) {
-		var element = env.element;
-
-		requestAnimationFrame(function () {
-			if (!element.matches('div.code-toolbar > pre > code')) {
-				return;
-			}
-
-			var pre = element.parentElement;
-			var wrapper = pre.parentElement;
-
-			// transfer margin of pre to wrapper
-			wrapper.style.margin = window.getComputedStyle(pre).margin;
-			pre.style.margin = '0';
-
-		});
-	});
-
 }());
diff --git a/assets/style.css b/assets/style.css
@@ -188,7 +188,6 @@ footer:before {
 	}
 
 	#features {
-		width: 66em;
 		margin-top: 2em;
 		font-size: 80%;
 	}
@@ -197,12 +196,16 @@ footer:before {
 			margin: 0 0 2em 0;
 			list-style: none;
 			display: inline-block;
-			width: 27em;
+			width: 49%;
+			box-sizing: border-box;
 			vertical-align: top;
 		}
 
 		#features li:nth-child(odd) {
-			margin-right: 5em;
+			padding-right: 2.5em;
+		}
+		#features li:nth-child(even) {
+			padding-left: 2.5em;
 		}
 
 			#features li:before {
@@ -229,7 +232,7 @@ footer:before {
 		position: relative;
 		z-index: 1;
 		float: right;
-		margin-right: -1em;
+		margin-right: -9em;
 		text-align: center;
 		text-transform: uppercase;
 		letter-spacing: .2em;
@@ -277,13 +280,89 @@ footer:before {
 
 		#theme > input {
 			position: absolute;
+			left: 0;
 			clip: rect(0,0,0,0);
 		}
 
 		#theme > input:checked + label {
 			background: #7fab14;
 		}
 
+		@media (max-width: 1300px) and (min-width: 1051px) {
+			#theme {
+				position: relative;
+				z-index: 1;
+				float: left;
+				margin: 1em 0;
+				width: 100%;
+			}
+			#theme + * {
+				clear: both;
+			}
+
+				#theme > p {
+					margin-top: .5em;
+				}
+
+				#theme > label {
+					float: left;
+					font-size: 82.6%;
+				}
+
+				#theme > label:before {
+					display: none;
+				}
+
+				#theme > label:nth-of-type(n+2) {
+					margin-top: 0;
+				}
+		}
+
+		@media (max-width: 1050px) {
+			#theme {
+				position: relative;
+				z-index: 1;
+				float: left;
+				margin: 1em 0;
+			}
+			#theme + * {
+				clear: both;
+			}
+
+				#theme > p {
+					left: inherit;
+					right: -1em;
+				}
+
+				#theme > label {
+					float: left;
+				}
+
+				#theme > label:before {
+					display: none;
+				}
+
+				#theme > label:nth-of-type(n+2) {
+					margin-top: 0;
+				}
+				#theme > label:nth-of-type(n+5) {
+					margin-top: -2.5em;
+				}
+				#theme > label:nth-of-type(4n+1) {
+					margin-left: 12.5em;
+				}
+		}
+
+		@media (max-width: 800px) {
+			#theme > label:nth-of-type(4) {
+				margin-right: 4em;
+			}
+			#theme > label:nth-of-type(4n+1) {
+				margin-left: 4em;
+			}
+		}
+
+
 footer {
 	margin-top: 2em;
 	background-position: bottom;
@@ -435,12 +514,3 @@ ul.plugin-list {
 	ul.plugin-list > li > div {
 		margin-bottom: .5em;
 	}
-
-/*
- * Fix for Toolbar's overflow issue
- */
-
-div.code-toolbar {
-	display: block;
-	overflow: auto;
-}
diff --git a/test.html b/test.html
@@ -8,10 +8,6 @@
 <link rel="stylesheet" href="assets/style.css" />
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
 <style>
-#theme {
-	margin-right: -9em;
-}
-
 textarea {
 	width: 100%;
 	height: 10em;
