fixup! style the new content separately to avoid circular deps

Author: timmywil

themes/jquery.com/style.css

@@ -54,8 +54,7 @@ a,
 	transform: rotate(6.28rad);
 }
 
-.download-options,
-.download-help {
+#banner-secondary .download-main .download-options {
 	margin-top: 1em;
 }
 #banner-secondary .download-options a {
@@ -71,39 +70,72 @@ a,
 #banner-secondary .download-main .button:hover {
 	box-shadow: 0 0 25px rgba(209, 143, 79, 0.9);
 }
-#content #banner-secondary .download-main .download {
+#content #banner-secondary .download-main > a {
+	display: block;
+	padding: 0 0 .5em 0;
+	font-size: 2em;
+	width: 100%;
+	text-align: center;
+	text-decoration: none;
+	line-height: 0.8em;
+}
+#content #banner-secondary .download-main > a span {
+	display: block;
+	font-size: 0.6em;
+}
+#content #banner-secondary .download-main > a span.download {
+	background: url('i/download.png') 0 0;
+	width: 44px;
+	height: 37px;
+	position: relative;
+	top: 1em;
+	display: inline-block;
+	margin-right: 0.5em;
+}
+#content #banner-secondary .download-main .support-notice {
+	font-size: 12px;
+}
+
+/* New download button */
+#banner-secondary > .download {
 	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	margin-bottom: 1em;
+}
+.download-button-content {
+	display: flex;
+	flex-direction: row;
 	align-items: center;
-	text-align: center;
 	gap: 0.5em;
-	padding: 0.5em 1em;
-	margin-bottom: 0.5em;
-	font-size: 1.5em;
-	width: 100%;
-	text-decoration: none;
-	line-height: 1;
 }
-#content #banner-secondary .download-main > a .download-icon {
-	background: url('i/download.png') no-repeat 0 0 / 100% 100%;
+.download-button-content .download-icon {
+	background: url('i/download.png') no-repeat 0 5px / 100% 100%;
 	width: 35px;
 	height: 35px;
-	position: relative;
 	display: inline-block;
 	flex-shrink: 0;
 }
-#content #banner-secondary .download-main > a .download-message {
+.download-button-content .download-message {
+	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	flex-grow: 1;
+	text-align: center;
 	gap: 0.25em;
 }
-#content #banner-secondary .download-main > a .download-version {
+.download-button-content .download-message .download-version {
 	font-size: 0.7em;
 }
-#content #banner-secondary .download-main .support-notice {
+.download-options .support-notice {
+	margin: 0.5em 0;
 	color: #ccc;
 }
+@media only screen and (max-width: 767px) {
+	#banner-secondary .download {
+		align-items: center;
+	}
+}
 
 .resources {
 	padding-left: 60px;