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

Archeo: Add Layered images with headline pattern (#5468)

Browse source 
* Add image

* Add Layered images with headline pattern

* Add dynamic spacers

* Use a separate image for the background

* Fix line height and font size

* Add 100vh to cover block

* Make font size responsive

* Add Chivo Thin fonts

* Change paragraph font weight to 100

* Remove duplicate additions of thin font face.

* Consistent whitespace.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
This commit is contained in:
Sarah Norris 2022-02-08 22:28:18 +00:00 committed by GitHub
parent 7d8fdd5f92
commit 48f04266d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
archeo/assets/images/palais-du-cirque-bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 841 KiB

BIN
archeo/assets/images/palais-du-cirque.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

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

@ -45,6 +45,7 @@ function archeo_register_block_patterns() {
'image-with-headline-on-dark-background',
'image-with-headline-description',
'image-with-headline-and-description',
'layered-images-with-headline',
);
/**

31
archeo/inc/patterns/layered-images-with-headline.php Normal file
View file

@ -0,0 +1,31 @@
<?php
/**
* Layered images with headline
*/
return array(
'title' => __( 'Layered images with headline', 'archeo' ),
'categories' => array( 'pages' ),
'content' => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque-bg.png","dimRatio":0,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0vw","left":"7vw"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:0px;padding-bottom:0vw;padding-left:7vw;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-0 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Photo of Palais Du Cirque', 'archeo' ) . '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque-bg.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"14vw"} -->
<div style="height:14vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"100","lineHeight":"1"}}} -->
<p style="font-size:clamp(64px, 6vw, 100px);font-style:normal;font-weight:100;line-height:1;text-transform:uppercase">' . wp_kses_post( __( 'Palais Du <br>Cirque, à Chichen-Itza, bas-relief<br>des tigres.', 'archeo' ) ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"8vw"} -->
<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:image {"align":"right","sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignright size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" alt="' . esc_attr__( 'Photo of Palais Du Cirque', 'archeo' ) . '"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->',
);