Theme: Iterate on About fonts and block styles.

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

@@ -2,6 +2,7 @@ body.page-about .entry-content {
 
 	@include breakpoint( $breakpoint-tablet ) {
 		> p,
+		> ul,
 		> h1,
 		> h2,
 		> h3,
@@ -10,7 +11,8 @@ body.page-about .entry-content {
 		> h6,
 		> .wp-block-quote,
 		> .wp-block-media-text,
-		> .wp-block-button {
+		> .wp-block-button,
+		> .wp-block-group {
 			margin-left: 40%;
 		}
 

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

@@ -23,5 +23,6 @@
 @import "entry-content";
 @import "page";
 @import "site-content";
+@import "site-header";
 @import "site-title";
 @import "wporg-header";

themes/wporg-5ftf/css/components/_site-header.scss

@@ -4,7 +4,7 @@
 		text-align: left;
 	}
 
-	.home & {
+	 &.home {
 		background: #0073aa;
 
 		@include breakpoint( $ms-breakpoint ) {
@@ -14,16 +14,17 @@
 		.site-title {
 			color: #fff;
 			display: block;
-			font-size: ms( 10 );
+			font-size: 1.4rem;
 			font-weight: 300;
 			line-height: 1;
-			margin: 2rem 0 1rem;
+			margin: 2rem 0 .6rem;
 
 			@include breakpoint( $ms-breakpoint ) {
 				font-size: ms( 12 );
 			}
 
 			@include breakpoint( $breakpoint-tablet ) {
+				font-size: 3.75rem;
 				text-align: center;
 			}
 		}
@@ -32,8 +33,10 @@
 			color: #fff;
 			max-width: 100%;
 			padding: 11px 0;
+			font-size: 1rem;
 
 			@include breakpoint( $breakpoint-tablet ) {
+				font-size: 1.25rem;
 				text-align: center;
 			}
 		}

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

@@ -1,25 +0,0 @@
-
-// Defined here so we can use `ms`.
-$size__spacing-unit: ms( 4 );
-
-.wp-block-image {
-	// this shouldn't apply to all images, just .alignfull ?
-		// but then the design calls for the images to be allignful on mobile, but not on desktop, so.... wtf?
-		// need a new alignment setting that says "alignfull-on-mobile-but-constrain-on-desktop" ?
-		// maybe this impacts how you do the has-background pullquote and other paragraphs, too, since they're also aligned fully on mobile.
-
-	/* Make it fill 100% of the screen */
-	position: relative;
-	left: -#{ $size__spacing-unit };
-	width: calc( 100% + ( 2 * #{ $size__spacing-unit } ) );
-	max-width: calc( 100% + ( 2 * #{ $size__spacing-unit} ) );
-	clear: both;
-
-	@include breakpoint( $breakpoint-desktop ) {
-		position: inherit;
-		left: inherit;
-		width: inherit;
-		max-width: inherit;
-		clear: inherit;
-	}
-}

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

@@ -7,7 +7,6 @@
 @import "../../../pub/wporg/css/objects/links";
 @import "../../../pub/wporg/css/objects/notices";
 @import "buttons";
-@import "image";
+@import "hero";
 @import "pledge-form";
 @import "pullquote";
-@import "site-header";

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

@@ -10,7 +10,7 @@
 @import "../../pub/wporg/css/settings/_modular-scale.scss";
 @import "../../pub/wporg/css/objects/buttons";
 @import "objects/buttons";
-@import "objects/image";
+@import "objects/hero";
 @import "objects/pullquote";
 @import "utilities/utilities";
 

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

@@ -1,8 +1,11 @@
 p.is-style-wporg-tldr {
 	color: $color__text-heading;
 	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/functions.php

@@ -78,6 +78,24 @@ function setup() {
 				'style_handle' => 'wporg-style',
 			)
 		);
+
+		register_block_style(
+			'core/image',
+			array(
+				'name'         => 'wporg-hero',
+				'label'        => __( 'Hero (full width on mobile)', 'wporg-5ftf' ),
+				'style_handle' => 'wporg-style',
+			)
+		);
+
+		$hero_properties = array(
+			'name'         => 'wporg-hero',
+			'label'        => __( 'Hero (full width on mobile)', 'wporg-5ftf' ),
+			'style_handle' => 'wporg-style',
+		);
+
+		register_block_style( 'core/image', $hero_properties );
+		register_block_style( 'core/group', $hero_properties );
 	}
 
 	// todo also setup block styles for other things, like the quote symbol, etc.
@@ -100,7 +118,7 @@ add_action( 'after_setup_theme', __NAMESPACE__ . '\content_width', 0 );
  * Enqueue scripts and styles.
  */
 function scripts() {
-	wp_enqueue_style( 'wporg-style', get_theme_file_uri( '/css/style.css' ), [ 'dashicons', 'open-sans' ], '20190703' );
+	wp_enqueue_style( 'wporg-style', get_theme_file_uri( '/css/style.css' ), [ 'dashicons', 'open-sans' ], '20191017' );
 
 	wp_enqueue_script( 'wporg-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20181209', true );
 	wp_enqueue_script( 'wporg-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );