beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Skatepark: add mixed media in container pattern (#4403)

Browse source 
* Add basic mixed media pattern.

* Add and refine mixed media in container pattern.

* Increase padding.

* Compress image.
This commit is contained in:
Jeff Ong 2021-08-23 16:35:10 -04:00 committed by GitHub
parent c9457a9321
commit e8829f433a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 110 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
skatepark/assets/images/skateboard-sideways.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 618 KiB

5
skatepark/assets/theme.css
View file

@ -402,6 +402,11 @@
margin-bottom: 0;
}
.skatepark-mixed-media-in-container hr, .skatepark-mixed-media-in-container p, .skatepark-mixed-media-in-container h1, .skatepark-mixed-media-in-container h2, .skatepark-mixed-media-in-container h3, .skatepark-mixed-media-in-container h4, .skatepark-mixed-media-in-container h5, .skatepark-mixed-media-in-container h6 {
margin-top: 20px;
margin-bottom: 20px;
}
.pre-footer h3 {
text-transform: uppercase;
}

1
skatepark/inc/block-patterns.php
View file

@ -18,6 +18,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
if ( function_exists( 'register_block_pattern' ) ) {
$block_patterns = array(
'mixed-media-in-container',
'pre-footer',
'text-list-with-button',
'full-width-image-with-aside-caption',

90
skatepark/inc/patterns/mixed-media-in-container.php Normal file
View file

@ -0,0 +1,90 @@
<?php
/**
* Pre Footer.
*
* @package Skatepark
*/
return array(
'title' => __( 'Mixed Media in Container', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"align":"wide","style":{"border":{"style":"solid"},"spacing":{"padding":{"top":"3%","right":"4%","bottom":"4%","left":"4%"}}},"className":"skatepark-mixed-media-in-container"} -->
<div class="wp-block-group alignwide skatepark-mixed-media-in-container" style="border-style:solid;padding-top:3%;padding-right:4%;padding-bottom:4%;padding-left:4%"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Why Camp?', 'skatepark' ) . '</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"className":"is-style-indented-paragraph"} -->
<p class="is-style-indented-paragraph">' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, all while you meet new people and have a ton of fun learning how to skateboard. Just think of all the cool tricks you’ll learn!', 'skatepark' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":["#000","#BFF5A5"]}}} -->
<figure class="wp-block-image size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skateboard-sideways.jpg" " alt="' . esc_attr__( 'A skateboard laying on its side on top of concrete.', 'skatepark' ) . '"/></figure>
<!-- /wp:image -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html__( 'Discipline', 'skatepark' ) . '</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, and you’ll have fun.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html( 'Friendship', 'skatepark' ) . '</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html( 'Skateboarding is a social sport! Come hang out and meet some new friends to cheer you on while you skate. We have a strict no-bullying policy and maintain a supportive environment.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html( 'Mentoring', 'skatepark' ) . '</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html( 'Work 1:1 with our team of coaches to learn how to skate. They’ll be your mentors and guides while you’re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
);

7
skatepark/readme.txt
View file

@ -29,3 +29,10 @@ This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
Skatepark uses the following images:
License: CC0
https://stocksnap.io/photo/skateboard-sideways-USRYO9E14Y by Messala Ciulla (https://stocksnap.io/author/messala)
Used in block patterns.

6
skatepark/sass/block-patterns/_mixed-media-in-container.scss Normal file
View file

@ -0,0 +1,6 @@
.skatepark-mixed-media-in-container {
hr, p, h1, h2, h3, h4, h5, h6 { // Shrink default vertical margins for all the elements in this pattern
margin-top: 20px;
margin-bottom: 20px;
}
}

1
skatepark/sass/theme.scss
View file

@ -13,6 +13,7 @@
@import "block-styles/indented-paragraph";
@import "block-styles/side-quote";
@import "block-styles/testimonial-quote";
@import "block-patterns/mixed-media-in-container";
@import "block-patterns/pre-footer";
@import "block-patterns/paragraph-with-quote";
@import "elements/headings";