diff --git a/themes/wporg-5ftf/css/components/_about.scss b/themes/wporg-5ftf/css/components/_about.scss index 311bf57..1f50ab0 100644 --- a/themes/wporg-5ftf/css/components/_about.scss +++ b/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%; } diff --git a/themes/wporg-5ftf/css/components/_components.scss b/themes/wporg-5ftf/css/components/_components.scss index 407dd03..fc941d2 100644 --- a/themes/wporg-5ftf/css/components/_components.scss +++ b/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"; diff --git a/themes/wporg-5ftf/css/objects/_site-header.scss b/themes/wporg-5ftf/css/components/_site-header.scss similarity index 82% rename from themes/wporg-5ftf/css/objects/_site-header.scss rename to themes/wporg-5ftf/css/components/_site-header.scss index 10eaf8b..409b12f 100644 --- a/themes/wporg-5ftf/css/objects/_site-header.scss +++ b/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; } } diff --git a/themes/wporg-5ftf/css/objects/_image.scss b/themes/wporg-5ftf/css/objects/_image.scss deleted file mode 100644 index b10b39c..0000000 --- a/themes/wporg-5ftf/css/objects/_image.scss +++ /dev/null @@ -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; - } -} diff --git a/themes/wporg-5ftf/css/objects/_objects.scss b/themes/wporg-5ftf/css/objects/_objects.scss index c9da9b7..8c95973 100644 --- a/themes/wporg-5ftf/css/objects/_objects.scss +++ b/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"; diff --git a/themes/wporg-5ftf/css/style-editor.scss b/themes/wporg-5ftf/css/style-editor.scss index 9ff208e..4aae468 100644 --- a/themes/wporg-5ftf/css/style-editor.scss +++ b/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"; diff --git a/themes/wporg-5ftf/css/utilities/_paragraph.scss b/themes/wporg-5ftf/css/utilities/_paragraph.scss index fc4b8f8..dfd423d 100644 --- a/themes/wporg-5ftf/css/utilities/_paragraph.scss +++ b/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; } } diff --git a/themes/wporg-5ftf/functions.php b/themes/wporg-5ftf/functions.php index 1710f31..ad1be4b 100644 --- a/themes/wporg-5ftf/functions.php +++ b/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 );