SiteMockup: update default styles to more closely match theme (#30249)

* First pass at desktop styles. * More styling. * One last line-height.
Automattic · Jan 18, 2019 · 3cd9806 · 3cd9806
1 parent 1adf9f2
commit 3cd9806
Showing 1 changed file with 42 additions and 23 deletions.
diff --git a/client/signup/site-mockup/site-mockup.scss b/client/signup/site-mockup/site-mockup.scss
@@ -80,20 +80,27 @@
 }
 
 // Set the default font for the preview
-// which will require a web font to load.
+// which will require a web font to load
+// (defined in lib/signup/site-styles.js).
 .site-mockup__content {
 	font-family: 'Crimson Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 // Title and Tagline Wrapper
 .site-mockup__site-identity {
-	padding: 20px 30px;
+	margin: 40px auto;
+	padding: 0 30px;
+	max-width: 800px;
 
 	.is-desktop & {
 		display: flex;
+		align-items: baseline;
 	}
 
 	.is-mobile & {
+		margin: 0 auto;
 		padding: 20px 15px;
 	}
 }
@@ -106,8 +113,8 @@
 	line-height: 1;
 
 	.is-mobile & {
-		font-size: 18px;
-		margin-bottom: 5px;
+		font-size: 24px;
+		margin: 20px 0;
 	}
 }
 
@@ -131,6 +138,7 @@
 	.is-mobile & {
 		font-size: 14px;
 		line-height: 1.4;
+		margin: 10px 0;
 
 		.site-mockup__phone {
 			display: block;
@@ -152,10 +160,10 @@
 		justify-content: center;
 		align-items: center;
 		overflow: hidden;
-		min-height: 300px;
+		min-height: 400px;
 
 		.is-mobile & {
-			min-height: 250px;
+			min-height: 300px;
 		}
 
 		&.has-background-dim::before {
@@ -183,6 +191,7 @@
 
 			.is-mobile & {
 				font-size: 30px;
+				line-height: 1.4;
 				padding: 20px;
 			}
 		}
@@ -204,29 +213,31 @@
 			content: '';
 			border: 1px solid #ffffff;
 			position: absolute;
-			top: 12px;
-			right: 12px;
-			bottom: 12px;
-			left: 12px;
+			top: 16px;
+			right: 16px;
+			bottom: 16px;
+			left: 16px;
 
 			.is-mobile & {
-				top: 6px;
-				right: 6px;
-				bottom: 6px;
-				left: 6px;
+				top: 8px;
+				right: 8px;
+				bottom: 8px;
+				left: 8px;
 			}
 		}
 
+		&.has-media-on-the-right {
+			grid-template-areas: 'media-text-content media-text-media';
+		}
+
+		// Placing this below, because media
+		// is always on top on mobile.
 		.is-mobile & {
 			margin: 0 15px 20px;
 			grid-template-columns: 100% !important;
 			grid-template-areas: 'media-text-media' 'media-text-content';
 		}
 
-		&.has-media-on-the-right {
-			grid-template-areas: 'media-text-content media-text-media';
-		}
-
 		.wp-block-media-text__media {
 			grid-area: media-text-media;
 			margin: 0;
@@ -242,14 +253,22 @@
 		.wp-block-media-text__content {
 			word-break: break-word;
 			grid-area: media-text-content;
-			padding: 15px 30px;
+			padding: 0 16px 0 0;
 
 			p {
 				margin: 0;
 			}
 
 			.is-mobile & {
-				padding: 15px 0;
+				padding: 8px 8px 16px;
+			}
+		}
+
+		&.has-media-on-the-right .wp-block-media-text__content {
+			padding: 0 0 0 16px;
+
+			.is-mobile & {
+				padding: 8px 8px 16px;
 			}
 		}
 	}
@@ -270,15 +289,15 @@
 		font-size: 36px;
 		font-weight: 600;
 		line-height: 1.2;
-		margin: 32px auto;
+		margin: 48px auto 32px;
 		padding: 0 15px;
 		max-width: 620px;
 	}
 
 	p {
-		font-size: 20px;
+		font-size: 19px;
 		font-weight: 400;
-		line-height: 1.6;
+		line-height: 1.8;
 		max-width: 620px;
 		margin-left: auto;
 		margin-right: auto;