tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds two new section patterns for Tainacan Interface.

This commit is contained in:
mateuswetah 2020-07-16 12:23:57 -03:00
parent d7a0ba01b9
commit 961fef80eb
6 changed files with 148 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/scss/_gutenberg-support.scss
View File

@ -29,11 +29,16 @@
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (min-width: 1526px) {
margin-left: calc(-1*(87.5vw - 1400px)/2) !important !important;
margin-right: calc(-1*(87.5vw - 1400px)/2) !important !important;
margin-left: calc(-1*(87.5vw - 1400px)/2) !important;
margin-right: calc(-1*(87.5vw - 1400px)/2) !important;
}
}
.has-text-color>a,
.has-text-color>a:hover {
color: inherit;
}
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
.wp-block-image.alignwide>img {
@ -93,7 +98,7 @@
}
/* Cover block */
.wp-block-cover__inner-container{
.wp-block-cover__inner-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 8.3333333333%;

23
src/assets/scss/editor-style.scss
View File

@ -149,7 +149,12 @@
}
/* Links */
a { text-decoration: none;}
a { text-decoration: none; }
.has-text-color>a,
.has-text-color>a:hover {
color: inherit;
}
/* Buttons */
.components-button.is-button {
@ -259,6 +264,22 @@
color: black;
}
/* Cover block */
:not([data-align="wide"]):not([data-align="full"])>.wp-block-cover {
width: auto;
}
[data-align="full"] .wp-block-cover__inner-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 8.3333333333%;
padding: 0 8.3333333333vw;
&>.wp-block {
max-width: 100%;
margin: 0;
}
}
/* Modal container */
.components-modal__content {
padding: 32px;

19
src/editor-style.css
View File

@ -15,6 +15,7 @@
/* Buttons */
/* Text input */
/* Labels */
/* Cover block */
/* Modal container */
/* Modal Header */
/* Checkboxes and Radio Buttons*/
@ -179,6 +180,11 @@
.edit-post-visual-editor.editor-styles-wrapper a,
.components-modal__screen-overlay a {
text-decoration: none; }
.edit-post-visual-editor.editor-styles-wrapper .has-text-color > a,
.edit-post-visual-editor.editor-styles-wrapper .has-text-color > a:hover,
.components-modal__screen-overlay .has-text-color > a,
.components-modal__screen-overlay .has-text-color > a:hover {
color: inherit; }
.edit-post-visual-editor.editor-styles-wrapper .components-button.is-button,
.components-modal__screen-overlay .components-button.is-button {
border: none;
@ -375,6 +381,19 @@
.components-modal__screen-overlay .components-base-control__label {
font-weight: 600;
color: black; }
.edit-post-visual-editor.editor-styles-wrapper :not([data-align="wide"]):not([data-align="full"]) > .wp-block-cover,
.components-modal__screen-overlay :not([data-align="wide"]):not([data-align="full"]) > .wp-block-cover {
width: auto; }
.edit-post-visual-editor.editor-styles-wrapper [data-align="full"] .wp-block-cover__inner-container,
.components-modal__screen-overlay [data-align="full"] .wp-block-cover__inner-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 8.3333333333%;
padding: 0 8.3333333333vw; }
.edit-post-visual-editor.editor-styles-wrapper [data-align="full"] .wp-block-cover__inner-container > .wp-block,
.components-modal__screen-overlay [data-align="full"] .wp-block-cover__inner-container > .wp-block {
max-width: 100%;
margin: 0; }
.edit-post-visual-editor.editor-styles-wrapper .components-modal__content,
.components-modal__screen-overlay .components-modal__content {
padding: 32px;

2
src/editor-style.css.map
View File

File diff suppressed because one or more lines are too long

98
src/functions.php
View File

@ -222,7 +222,103 @@ function tainacan_block_patterns_init() {
array(
'title' => __( 'Tainacan heading section', 'tainacan-interface' ),
'description' => _x( 'A left-aligned heading section containing a light sub-heading and an underline bellow the title.', 'Block pattern description', 'tainacan-interface' ),
'content' => '<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section heading', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
'content' => '<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern',
array(
'title' => __( 'Tainacan highlight section', 'tainacan-interface' ),
'description' => _x( 'A hero section with a background color and columns for image and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => '
<!-- wp:cover {"overlayColor":"default","align":"full"} -->
<div class="wp-block-cover alignfull has-default-background-color has-background-dim">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:spacer {"height": 16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern-alt',
array(
'title' => __( 'Tainacan highlight section (alt)', 'tainacan-interface' ),
'description' => _x( 'Another hero section with a background color and columns for image headings and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => '
<!-- wp:cover {"customOverlayColor":"#01295c","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#01295c">
<div class="wp-block-cover__inner-container">
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Sed at orci ex. Nulla pulvinar, lorem vel eleifend maximus, nunc elit porta felis, id placerat orci dui sit amet ligula. Mauris fermentum dui quam, eget blandit ligula vulputate sit amet. Integer aliquet eget urna ac tempor. Nunc viverra faucibus magna ac aliquet. Integer ullamcorper lacinia elit quis gravida. Duis placerat pulvinar arcu nec faucibus. Sed sit amet enim iaculis, facilisis est non, venenatis nibh.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);

2
src/style.css.map
View File

File diff suppressed because one or more lines are too long