Fix general margin issues for IE10/IE11. Instead of using gap propert…

…y we use generic margins which may potentially mean that use of flexboxes is useless anyway (at least on the current and only (for now) theme)."
Matriks404 · Jan 11, 2024 · bb301a1 · bb301a1
1 parent 623e33b
commit bb301a1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -22,9 +22,9 @@
 		<div id="container">
 			<fieldset id="settings" role="form">
 				<legend>Settings</legend>
-				<div id="inner-fieldset">
-					<div id="version-stuff">
-						<div id="version-stuff-title">
+				<div id="settings-inner">
+					<div id="version-input">
+						<div id="version-input-title">
 							Game version:
 						</div>
 
@@ -34,7 +34,7 @@
 						</div>
 					</div>
 
-					<div>
+					<div id="parameters-input">
 						<div id="exclude-unobtainable-setting">
 							<input type="checkbox" id="exclude-unobtainable" name="exclude-unobtainable" />
 							<label for="exclude-unobtainable">Exclude unobtainable blocks/items</label>

diff --git a/scss/main.scss b/scss/main.scss
@@ -55,13 +55,15 @@ p {
 
 	flex-flow: column nowrap;
 
-	gap: 12px;
-
 	text-align: center;
 	line-height: 16px;
 	font-size: 11px;
 }
 
+#info > div:not(:last-child) {
+	margin-bottom: 12px;
+}
+
 #info-early-classic {
 	display: none;
 
@@ -105,16 +107,6 @@ p {
 	color: $color-removed;
 }
 
-#inner-fieldset {
-	display: flex;
-
-	margin: 8px 16px 18px 16px;
-
-	gap: 16px;
-
-	flex-flow: column nowrap;
-}
-
 #legal-info {
 	position: fixed;
 
@@ -174,6 +166,14 @@ p {
 	padding: 3px 8px 3px 8px;
 }
 
+#settings-inner {
+	display: flex;
+
+	margin: 8px 16px 18px 16px;
+
+	flex-flow: column nowrap;
+}
+
 #version-info {
 	position: fixed;
 
@@ -189,24 +189,29 @@ p {
 	padding: 2px 3px 2px 7px;
 }
 
+#version-input {
+	display: flex;
+
+	margin-bottom: 16px;
+
+	flex-flow: row nowrap;
+	align-items: center;
+}
+
 #version-selection {
 	display: flex;
-	flex-flow: column nowrap;
 
-	gap: 2px;
+	margin-left: 16px;
+
+	flex-flow: column nowrap;
 }
 
 #version-selection select {
 	width: 160px;
 }
 
-#version-stuff {
-	display: flex;
-
-	flex-flow: row nowrap;
-	align-items: center;
-
-	gap: 16px;
+#version-selection select:not(:last-child) {
+	margin-bottom: 2px;
 }
 
 .fieldset-content {
@@ -273,8 +278,10 @@ p {
 		margin-bottom: 18px;
 
 		flex-flow: row wrap;
+	}
 
-		row-gap: 16px;
+	main > fieldset:not(:last-child) {
+		margin-bottom: 16px;
 	}
 
 	p {