From d0f3f1d977e4ec465bcaa72affb32a96656d5114 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 17 Dec 2019 13:30:28 +0600
Subject: [PATCH 1/5] Gutenboarding: Add headings to DesignSelector

---
 .../design-selector/index.tsx                 | 33 +++++++++++--------
 .../design-selector/style.scss                | 18 ++++++++++
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
index 351fffcf2b8a0..3662201e30329 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { __ as NO__ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import React, { useState } from 'react';
 import classnames from 'classnames';
@@ -29,20 +30,24 @@ export default () => {
 	const [ selectedDesign, setSelectedDesign ] = useState< string | undefined >();
 	return (
 		<div className="design-selector">
-			{ homepageTemplates.map( template => (
-				<Card
-					className={ classnames( 'design-selector__design-option', {
-						'is-selected': template.slug === selectedDesign,
-					} ) }
-					key={ template.slug }
-					isElevated
-					onClick={ () => setSelectedDesign( template.slug ) }
-				>
-					<CardMedia>
-						<img alt={ template.title } src={ template.preview } />
-					</CardMedia>
-				</Card>
-			) ) }
+			<h1>{ NO__( 'Choose a starting design for your site' ) }</h1>
+			<h2>{ NO__( "You'll be able to customize your new site in hundreds of ways." ) }</h2>
+			<div className="design-selector__grid">
+				{ homepageTemplates.map( template => (
+					<Card
+						className={ classnames( 'design-selector__design-option', {
+							'is-selected': template.slug === selectedDesign,
+						} ) }
+						key={ template.slug }
+						isElevated
+						onClick={ () => setSelectedDesign( template.slug ) }
+					>
+						<CardMedia>
+							<img alt={ template.title } src={ template.preview } />
+						</CardMedia>
+					</Card>
+				) ) }
+			</div>
 		</div>
 	);
 };
diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
index 741f4f4706fc6..a1e4b83c0237d 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
@@ -1,4 +1,22 @@
 .design-selector {
+	h1 {
+		color: #23282d;
+		font-size: 2em;
+		font-weight: bold;
+		margin-bottom: 0.25em;
+		text-align: center;
+	}
+
+	h2,
+	h3 {
+		color: #23282d;
+		font-size: 1.3em;
+		margin-bottom: 3em;
+		text-align: center;
+	}
+}
+
+.design-selector__grid {
 	display: grid;
 	grid-gap: 4.5em;
 

From 7ec32e60d467830662062103653a687d67abd02a Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 17 Dec 2019 13:43:53 +0600
Subject: [PATCH 2/5] DesignSelector: Add srcSet

---
 .../onboarding-block/design-selector/index.tsx       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
index 3662201e30329..31470ccc9ffcb 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ as NO__ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 import { useSelect } from '@wordpress/data';
 import React, { useState } from 'react';
 import classnames from 'classnames';
@@ -15,6 +16,11 @@ import { SiteVertical } from '../../stores/onboard/types';
 
 import './style.scss';
 
+const gridWidth = 960;
+
+const srcSet = ( src: string, widths: number[] ) =>
+	widths.map( width => addQueryArgs( src, { w: width } ) + ` ${ width }w` ).join( ', ' );
+
 export default () => {
 	const siteVertical = useSelect(
 		select => select( 'automattic/onboard' ).getState().siteVertical as SiteVertical
@@ -43,7 +49,11 @@ export default () => {
 						onClick={ () => setSelectedDesign( template.slug ) }
 					>
 						<CardMedia>
-							<img alt={ template.title } src={ template.preview } />
+							<img
+								alt={ template.title }
+								src={ template.preview }
+								srcSet={ srcSet( template.preview, [ gridWidth / 2, gridWidth / 4 ] ) }
+							/>
 						</CardMedia>
 					</Card>
 				) ) }

From 97f819e6dbedfe16f0b3bf56a12bc4c66b1ccfdb Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 17 Dec 2019 15:59:49 +0600
Subject: [PATCH 3/5] Add classNames to headings, use to style

---
 .../onboarding-block/design-selector/index.tsx            | 8 ++++++--
 .../onboarding-block/design-selector/style.scss           | 5 ++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
index 31470ccc9ffcb..1153257a8e866 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
@@ -36,8 +36,12 @@ export default () => {
 	const [ selectedDesign, setSelectedDesign ] = useState< string | undefined >();
 	return (
 		<div className="design-selector">
-			<h1>{ NO__( 'Choose a starting design for your site' ) }</h1>
-			<h2>{ NO__( "You'll be able to customize your new site in hundreds of ways." ) }</h2>
+			<h1 className="design-selector__title">
+				{ NO__( 'Choose a starting design for your site' ) }
+			</h1>
+			<h2 className="design-selector__subtitle">
+				{ NO__( "You'll be able to customize your new site in hundreds of ways." ) }
+			</h2>
 			<div className="design-selector__grid">
 				{ homepageTemplates.map( template => (
 					<Card
diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
index a1e4b83c0237d..9ed8eaf65a1dc 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
@@ -1,5 +1,5 @@
 .design-selector {
-	h1 {
+	.design-selector__title {
 		color: #23282d;
 		font-size: 2em;
 		font-weight: bold;
@@ -7,8 +7,7 @@
 		text-align: center;
 	}
 
-	h2,
-	h3 {
+	.design-selector__subtitle {
 		color: #23282d;
 		font-size: 1.3em;
 		margin-bottom: 3em;

From 56a53f505f2d7990345e4700fddc4fa4c2304582 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 17 Dec 2019 16:00:40 +0600
Subject: [PATCH 4/5] Unscope

---
 .../design-selector/style.scss                | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
index 9ed8eaf65a1dc..901c87c7fdc30 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
@@ -1,18 +1,16 @@
-.design-selector {
-	.design-selector__title {
-		color: #23282d;
-		font-size: 2em;
-		font-weight: bold;
-		margin-bottom: 0.25em;
-		text-align: center;
-	}
+.design-selector__title {
+	color: #23282d;
+	font-size: 2em;
+	font-weight: bold;
+	margin-bottom: 0.25em;
+	text-align: center;
+}
 
-	.design-selector__subtitle {
-		color: #23282d;
-		font-size: 1.3em;
-		margin-bottom: 3em;
-		text-align: center;
-	}
+.design-selector__subtitle {
+	color: #23282d;
+	font-size: 1.3em;
+	margin-bottom: 3em;
+	text-align: center;
 }
 
 .design-selector__grid {

From 0b4134de7d940ec190cf3c9cbabe667ef46e9276 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 17 Dec 2019 16:09:38 +0600
Subject: [PATCH 5/5] Use color var

---
 .../onboarding-block/design-selector/style.scss             | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
index 901c87c7fdc30..0e9eb5314628a 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss
@@ -1,5 +1,7 @@
+@import '~@wordpress/base-styles/colors';
+
 .design-selector__title {
-	color: #23282d;
+	color: $dark-gray-800;
 	font-size: 2em;
 	font-weight: bold;
 	margin-bottom: 0.25em;
@@ -7,7 +9,7 @@
 }
 
 .design-selector__subtitle {
-	color: #23282d;
+	color: $dark-gray-800;
 	font-size: 1.3em;
 	margin-bottom: 3em;
 	text-align: center;