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

Archeo: home page and header wide aligned (#5623)

Browse source 
* make everything wide aligned

* make footer wide aligned

* fix markup error

* Fix merge conflict

* Add CSS to remove media/text padding

* removed padding class

* refactored image with headline pattern

* removed image margin bottom

* Add padding to column.

* Add left-right padding to cover instead of column.

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Co-authored-by: Jeff Ong <jonger4@gmail.com>
This commit is contained in:
Maggie 2022-03-15 15:25:05 +01:00 committed by GitHub
parent 15bb10aeb4
commit 1958eef9b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
archeo/inc/patterns/footer.php
View file

@ -6,8 +6,9 @@ return array(
'title' => __( 'Default footer', 'archeo' ),
'categories' => array( 'footer' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--medium)"}}}} -->
<div class="wp-block-group" style="padding-top: var(--wp--custom--spacing--medium); padding-bottom: var(--wp--custom--spacing--medium);">
'content' => '<!-- wp:group {"layout":{"inherit":"true"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--medium)"}}}} -->
<div class="wp-block-group alignwide" style="padding-top: var(--wp--custom--spacing--medium); padding-bottom: var(--wp--custom--spacing--medium);">
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"overlayMenu":"never","className":"site-footer","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} /-->
<!-- wp:paragraph {"align":"left","fontSize":"small","style":{"spacing":{"margin":{"top":0}}}} -->
@ -18,5 +19,6 @@ return array(
'<a href="' . esc_url( __( 'https://wordpress.org', 'archeo' ) ) . '" rel="nofollow">WordPress</a>'
) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);

26
archeo/inc/patterns/image-with-headline-description.php
View file

@ -5,15 +5,23 @@
return array(
'title' => __( 'Image with headline and description', 'archeo' ),
'categories' => array( 'featured', 'images' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"5vw","bottom":"0","left":"5vw"}}}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:5vw;padding-bottom:0;padding-left:5vw"><!-- wp:media-text {"mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif","mediaType":"image","mediaWidth":64,"verticalAlignment":"top"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top" style="grid-template-columns:64% auto"><figure class="wp-block-media-text__media"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif" alt="' . esc_attr__( 'Chahk: rain deity', 'archeo' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"clamp(64px, 6vw, 100px)","lineHeight":"1","textTransform":"uppercase"},"spacing":{"margin":{"bottom":"clamp(5px, 2vw, 20px)"}}}} -->
<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;margin-bottom:clamp(5px, 2vw, 20px);text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
'content' => '<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"64%"} -->
<div class="wp-block-column" style="flex-basis:64%"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif" alt="' . esc_attr__( 'Chahk: rain deity', 'archeo' ) . '"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"clamp(64px, 6vw, 100px)","lineHeight":"1","textTransform":"uppercase"}}} -->
<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
<!-- /wp:heading -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"15%"} -->
<div class="wp-block-column" style="flex-basis:15%"></div>
<div class="wp-block-columns"><!-- wp:column {"width":"26%"} -->
<div class="wp-block-column" style="flex-basis:26%"></div>
<!-- /wp:column -->
<!-- wp:column {"width":""} -->
@ -21,7 +29,7 @@ return array(
<p class="has-text-align-right has-small-font-size">' . esc_html__( 'Chaahk is shown here clutching his axe, ready to strike rain and thunder from the clouds. This sculpture was likely created in the Puuc hills of Yucatan and Campeche.', 'archeo' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->',
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);

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

@ -5,9 +5,12 @@
return array(
'title' => __( 'Layered images with headline', 'archeo' ),
'categories' => array( 'featured', 'images' ),
'content' => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0vw","left":"7vw"},"margin":{"top":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:0px;padding-bottom:0vw;padding-left:7vw;margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" 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"} -->
'content' => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"min(4vw, 90px)","bottom":"0vw","left":"min(4vw, 90px)"},"margin":{"top":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:min(4vw, 90px);padding-bottom:0vw;padding-left:min(4vw, 90px);margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
<!-- wp:group {"layout":{"inherit":"true"}} -->
<div class="wp-block-group">
<!-- wp:columns {"verticalAlignment":"top","align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0"}}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0"><!-- 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 -->
@ -26,6 +29,7 @@ return array(
<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 Palace of the Circus', 'archeo' ) . '"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->',
);

16
archeo/inc/patterns/simple-list-of-posts-with-background.php
View file

@ -5,18 +5,21 @@
return array(
'title' => __( 'Simple list of posts with title and background', 'archeo' ),
'categories' => array( 'featured', 'query' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium)","bottom":"var(--wp--custom--spacing--medium)"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-group alignwide has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--medium);padding-bottom:var(--wp--custom--spacing--medium);margin-top:0px">
<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"40px"}}},"fontSize":"medium"} -->
<h3 class="has-medium-font-size" style="margin-bottom:40px">' . __( 'Selected Writings', 'archeo' ) . '</h3>
'content' => '<!-- wp:group {"layout":{"inherit":"true"},"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium)","bottom":"var(--wp--custom--spacing--medium)"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--medium);padding-bottom:var(--wp--custom--spacing--medium);margin-top:0px">
<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"60px"}}},"fontSize":"medium"} -->
<h3 class="has-medium-font-size" style="margin-bottom:60px">' . __( 'Selected Writings', 'archeo' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":3,"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"perPage":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"className":"simple-list-of-posts","layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group simple-list-of-posts"><!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.2","fontStyle":"normal","fontWeight":"100"},"spacing":{"margin":{"top":"1.25rem"}}},"fontSize":"huge"} /-->
<div class="wp-block-group simple-list-of-posts"><!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.2","fontStyle":"normal","fontWeight":"100"}},"fontSize":"huge"} /-->
<!-- wp:post-author-name {"style":{"typography":{"fontStyle":"normal","fontWeight":"100","lineHeight":"1.2"},"spacing":{"margin":{"top":"0px"}}},"fontSize":"medium"} /--></div>
<!-- wp:post-author-name {"style":{"typography":{"fontStyle":"normal","fontWeight":"100","lineHeight":"1.2"}},"fontSize":"medium"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- wp:spacer {"height":"40px"} -->
@ -27,5 +30,6 @@ return array(
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);

4
archeo/parts/header.html
View file

@ -1,6 +1,6 @@
<!-- wp:group {"layout":{"inherit":"true"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--outer)","top":"var(--wp--custom--spacing--outer)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--outer)"><!-- wp:site-title /-->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--outer)","top":"var(--wp--custom--spacing--outer)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--outer)"><!-- wp:site-title /-->
<!-- wp:navigation {"overlayBackgroundColor":"foreground","overlayTextColor":"background","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} -->
<!-- wp:page-list /-->

9
archeo/templates/home.html
View file

@ -1,7 +1,10 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:pattern {"slug":"archeo/image-with-headline-description"} /-->
<!-- wp:pattern {"slug":"archeo/simple-list-of-posts-with-background"} /-->
<!-- wp:pattern {"slug":"archeo/layered-images-with-headline"} /-->
<!-- wp:group {"layout":{"inherit":"true"}} -->
<div class="wp-block-group">
<!-- wp:pattern {"slug":"archeo/image-with-headline-description"} /-->
<!-- wp:pattern {"slug":"archeo/simple-list-of-posts-with-background"} /-->
<!-- wp:pattern {"slug":"archeo/layered-images-with-headline"} /--></div>
<!-- /wp:group -->
<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer"} /-->