Homepage: clean up item positioning

- Remove accidental drop-shadow (mistake in Figma)
- Use the correct fonts for callout text
- Switch to a fixed width of rems over percentages to make alignment easier
- Use rems to outdent quote so it lines up with the edge of the photo
- Overlap the blue box + photo on larger screens, and offset the quote down
- Remove unused selectors
- Fix quote display in the editor

themes/wporg-5ftf/css/components/_about.scss

@@ -13,7 +13,7 @@ body.page-about .entry-content {
 		> .wp-block-media-text,
 		> .wp-block-button,
 		> .wp-block-group {
-			margin-left: 35%;
+			margin-left: 17.5rem;
 		}
 
 		p.is-style-wporg-tldr {

themes/wporg-5ftf/css/components/_entry-content.scss

@@ -13,13 +13,3 @@
 		color: $color__text-heading;
 	}
 }
-
-p.has-background,
-.wp-block-group.has-background,
-.wp-block-pullquote.has-wporg-blue-background-color {
-	/*
-	 * Remove the gaps between consecutive paragraphs that have the same background color, and make it fill 100%
-	 * of the screen on the mobile view.
-	 */
-	//margin: 0 - ms( 4 );	this is buggy, affects surrounding elements, see notes in parallelogram file
-}

themes/wporg-5ftf/css/objects/_hero.scss

@@ -8,6 +8,7 @@ $size__spacing-unit: ms( 4 );
 	width: calc( 100% + ( 2 * #{ $size__spacing-unit } ) );
 	max-width: calc( 100% + ( 2 * #{ $size__spacing-unit} ) );
 	clear: both;
+	margin-bottom: 0;
 
 	@include breakpoint( $breakpoint-tablet ) {
 		position: inherit;
@@ -15,5 +16,10 @@ $size__spacing-unit: ms( 4 );
 		width: inherit;
 		max-width: inherit;
 		clear: inherit;
+		margin-bottom: 1em;
+
+		&.wp-block-group {
+			margin-top: -8rem;
+		}
 	}
 }

themes/wporg-5ftf/css/objects/_image.scss

@@ -0,0 +1,6 @@
+.wp-block-image {
+
+	img {
+		vertical-align: middle;
+	}
+}

themes/wporg-5ftf/css/objects/_objects.scss

@@ -8,5 +8,6 @@
 @import "../../../pub/wporg/css/objects/notices";
 @import "buttons";
 @import "hero";
+@import "image";
 @import "pledge-form";
 @import "pullquote";

themes/wporg-5ftf/css/settings/_settings.scss

@@ -4,3 +4,4 @@
 @import "../../../pub/wporg/css/settings/typography";
 @import "colors";
 @import "structure";
+@import "typography";

themes/wporg-5ftf/css/settings/_typography.scss

@@ -0,0 +1,5 @@
+$type__base: 18px;
+$type__base-mobile: 16px;
+$type__lineheight: 1.5;
+
+$font__serif: Georgia, "Times New Roman", serif;

themes/wporg-5ftf/css/style-editor.scss

@@ -6,6 +6,7 @@
 @import "settings/colors";
 @import "../../pub/wporg/css/settings/structure";
 @import "settings/structure";
+@import "settings/typography";
 @import "../../pub/wporg/css/tools/breakpoint";
 @import "../../pub/wporg/css/settings/_modular-scale.scss";
 @import "../../pub/wporg/css/objects/buttons";
@@ -42,7 +43,9 @@
 .wp-block-pullquote.is-style-wporg-home-pullquote {
 	position: relative;
 	top: 0;
+	left: 0;
 	width: auto;
+	max-width: 100%;
 }
 
 // font-family and face, etc?

themes/wporg-5ftf/css/utilities/_paragraph.scss

@@ -1,11 +1,11 @@
 p.is-style-wporg-tldr {
 	color: $color__text-heading;
+	font-family: $font__serif;
 	font-style: italic;
 	font-size: 1rem;
 
 	@include breakpoint( $breakpoint-tablet ) {
 		text-align: center;
-		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 		font-size: 1.25rem;
 	}
 }

themes/wporg-5ftf/css/utilities/_pullquote.scss

@@ -1,6 +1,7 @@
 .wp-block-pullquote.is-style-wporg-home-pullquote {
 	padding: 0;
 	margin-bottom: 0;
+	font-family: $font__serif;
 	border: none;
 
 	blockquote {
@@ -13,9 +14,9 @@
 
 	@include breakpoint( $breakpoint-tablet ) {
 		position: absolute;
-		top: 0;
+		top: 14rem;
-		left: -255px;
+		left: -17.5rem;
-		max-width: 250px;
+		max-width: 16rem;
 
 		blockquote {
 			border-left: none;