Download: Fix the button styles on small screens

After the modal button was added, the buttons would not wrap correctly, and the button styles were not switched correctly. This fixes the two by enabling wrapping, and using more specific class names.

Fixes #535, includes the content update from #536.

source/wp-content/themes/wporg-main-2022/patterns/download.php

@@ -28,7 +28,7 @@
 <p class="is-style-short-text"><?php _e( 'For anyone comfortable getting their own hosting and domain.', 'wporg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 <div class="wp-block-group"><!-- wp:wporg/modal {"closeButtonColor":"white","customCloseButtonColor":"#ffffff","href":"[download_link]","label":"<?php /* translators: [latest_version] is a shortcode and should not be translated. */ _e( 'Download WordPress [latest_version]', 'wporg' ); ?>"} -->
 <!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|10"}},"backgroundColor":"blueberry-1","textColor":"white","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-white-color has-blueberry-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0"}}}} -->

source/wp-content/themes/wporg-main-2022/src/style/style.scss

@@ -422,7 +422,7 @@ $wporg-about-breakpoint-max: 1920px;
 		border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
 	}
 
-	#download-hosting .wp-block-columns > .wp-block-column .wp-block-group,
+	#download-hosting .wp-block-columns > .wp-block-column > .wp-block-group,
 	#features .wp-block-columns > .wp-block-column:last-child {
 		padding-left: var(--wp--preset--spacing--edge-space) !important;
 		padding-right: var(--wp--preset--spacing--edge-space) !important;
@@ -484,8 +484,12 @@ $wporg-about-breakpoint-max: 1920px;
 		width: 100% !important;
 	}
 
-	#download-install .wp-block-button:nth-child(1) a {
-		padding: 0;
+	#download-install > .wp-block-group {
+		flex-direction: column;
+	}
+
+	#download-install .wp-block-button__link.wporg-modal__toggle {
+		padding: 0.25em;
 		background-color: transparent;
 		color: var(--wp--custom--link--color--text);
 		font-weight: 400;
@@ -498,7 +502,7 @@ $wporg-about-breakpoint-max: 1920px;
 		}
 	}
 
-	#download-install .wp-block-button:nth-child(2) a {
+	#download-install .is-style-outline .wp-block-button__link {
 		--wp--custom--button--outline--color--background: var(--wp--preset--color--blueberry-1);
 		--wp--custom--button--outline--color--text: var(--wp--preset--color--white);
 		--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--deep-blueberry);
@@ -514,6 +518,14 @@ $wporg-about-breakpoint-max: 1920px;
 			color: var(--wp--custom--button--outline--hover--color--text);
 		}
 
+		&:focus {
+			// Prevent the extra space for the border, which does not exist anymore.
+			padding-top: var(--wp--custom--button--spacing--padding--top);
+			padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+			padding-left: var(--wp--custom--button--spacing--padding--left);
+			padding-right: var(--wp--custom--button--spacing--padding--right);
+		}
+
 		&:active {
 			background-color: var(--wp--custom--button--outline--active--color--background);
 			color: var(--wp--custom--button--outline--active--color--text);