tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-21 10:33:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Theme: Iterate on pullquotes and other hero areas.

Browse source 
See #2.
This commit is contained in:
Ian Dunn 2019-10-18 14:29:26 -07:00
parent 9c700e59cb
commit 78822c4323
No known key found for this signature in database
GPG key ID: 99B971B50343CBCB
5 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
themes/wporg-5ftf/css/components/_about.scss
View file

@ -13,18 +13,11 @@ body.page-about .entry-content {
> .wp-block-media-text,
> .wp-block-button,
> .wp-block-group {
margin-left: 40%;
margin-left: 35%;
}
p.is-style-wporg-tldr {
margin-left: auto;
}
.wp-block-pullquote.is-style-solid-color {
position: absolute;
top: 800px;
left: 0;
width: 40%;
}
}
}

19
themes/wporg-5ftf/css/objects/_hero.scss Normal file
View file

@ -0,0 +1,19 @@
// Defined here so we can use `ms`.
$size__spacing-unit: ms( 4 );
/* Fills 100% of the screen on mobile, and 100% of the content area on desktop */
.is-style-wporg-hero {
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-tablet ) {
position: inherit;
left: inherit;
width: inherit;
max-width: inherit;
clear: inherit;
}
}

6
themes/wporg-5ftf/css/style-editor.scss
View file

@ -38,5 +38,11 @@
}
}
// Undo the positioning because it's coupled to the front end layout. Use mobile positioning in the editor.
.wp-block-pullquote.is-style-wporg-home-pullquote {
position: relative;
top: 0;
width: auto;
}
// font-family and face, etc?

23
themes/wporg-5ftf/css/utilities/_pullquote.scss
View file

@ -1,18 +1,33 @@
.wp-block-pullquote.is-style-solid-color {
background-color: $color__wporg-blue;
.wp-block-pullquote.is-style-wporg-home-pullquote {
padding: 0;
margin-bottom: 0;
border: none;
blockquote {
max-width: 100%;
margin: 0;
padding: 0;
border: none;
color: $color__text-on-dark;
text-align: left;
}
@include breakpoint( $breakpoint-tablet ) {
background-color: $color__text-on-dark;
position: absolute;
top: 0;
left: -255px;
max-width: 250px;
blockquote {
border-left: none;
color: $color__text-heading;
}
p {
font-size: 2.8rem;
&:first-child {
margin-top: 0;
}
}
}
}

7
themes/wporg-5ftf/functions.php
View file

@ -79,11 +79,12 @@ function setup() {
)
);
// FYI, this is affected by https://github.com/WordPress/gutenberg/issues/16429.
register_block_style(
'core/image',
'core/pullquote',
array(
'name' => 'wporg-hero',
'label' => __( 'Hero (full width on mobile)', 'wporg-5ftf' ),
'name' => 'wporg-home-pullquote',
'label' => __( 'Homepage Pullquote', 'wporg-5ftf' ),
'style_handle' => 'wporg-style',
)
);