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

Skatepark: refactor CSS into block markup (#5473)

Browse source 
* refactored paragraph with quote pattern

* Image with caption pattern

* testimonial pattern

* Author block refactored

* removed navigation CSS that wasn't doing anything

* post comments CSS removed

* search block

* removed post meta css

* refactor index and links css

* scrapped more css

* removed partials

* removed unused includes

* removed headings styles refactoring pattern
This commit is contained in:
Maggie 2022-02-11 10:07:14 +01:00 committed by GitHub
parent e6a67e1cd9
commit 4fb324e186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 211 additions and 826 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
blockbase/inc/patterns/footer-columns.php
View file

@ -37,8 +37,8 @@ return array(
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"14px"}}} -->
<h3 style="font-size:14px"><strong>' . esc_html__( 'Search', 'blockbase' ) . '</strong></h3><!-- /wp:heading --><!-- wp:search {"label":"' . esc_html__( 'Search', 'blockbase' ) . '","showLabel":false,"buttonText":"' . esc_html__( 'Search', 'blockbase' ) . '","buttonPosition":"button-inside"} /--></div>
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"14px","textTransform":"uppercase"}}} -->
<h3 style="text-transform:uppercase;font-size:14px"><strong>' . esc_html__( 'Search', 'blockbase' ) . '</strong></h3><!-- /wp:heading --><!-- wp:search {"label":"' . esc_html__( 'Search', 'blockbase' ) . '","showLabel":false,"buttonText":"' . esc_html__( 'Search', 'blockbase' ) . '","buttonPosition":"button-inside"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

360
skatepark/assets/theme.css
View file

@ -1,67 +1,3 @@
@charset "UTF-8";
/**
* Breakpoints & Media Queries
*/
/**
* Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
* Breakpoint mixins
*/
/**
* Long content fade mixin
*
* Creates a fading overlay to signify that the content is longer
* than the space allows.
*/
/**
* Focus styles.
*/
/**
* Applies editor left position to the selector passed as argument
*/
/**
* Styles that are reused verbatim in a few places
*/
/**
* Allows users to opt-out of animations via OS-level preferences.
*/
/**
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
*/
/**
* Reset the WP Admin page styles for Gutenberg-like pages.
*/
::selection {
color: var(--wp--custom--color--background);
background-color: var(--wp--custom--color--foreground);
}
.wp-block-post-author__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-post-author__name {
font-weight: 700;
line-height: 1;
margin-bottom: 0.5em;
}
.wp-block-post-author__bio {
margin: 0;
font-size: var(--wp--preset--font-size--small);
}
.wp-block-post-author__avatar img {
border-radius: 50%;
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@ -106,246 +42,25 @@
background-color: var(--wp--custom--button--color--text);
}
.wp-block-file .wp-block-file__button {
text-transform: uppercase;
letter-spacing: 0.1em;
/* Text selection text color */
::selection {
color: var(--wp--custom--color--background);
background-color: var(--wp--custom--color--foreground);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search .wp-block-search__button.wp-block-search__button {
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wp-block-cover.alignfull {
padding-right: max(0.5 * (100% - var(--wp--custom--layout--wide-size)) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal));
padding-left: max(0.5 * (100% - var(--wp--custom--layout--wide-size)) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal));
}
.wp-block-navigation {
font-size: var(--wp--preset--font-size--small);
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
text-decoration-thickness: 0.2em;
text-underline-offset: 0.35em;
}
.wp-block-post-comments .reply a {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}
.wp-block-post-comments form {
column-gap: 1.2em;
}
.wp-block-post-comments .comment-reply-title {
margin-bottom: calc(2 * var(--wp--custom--gap--baseline));
}
.wp-block-post-comments .comment-author cite {
font-weight: bold;
}
.wp-block-post-comments .comment-author .says {
display: none;
}
.wp-block-post-comments .commentmetadata {
--wp--style--block-gap: 48px;
}
.wp-block-post-comments .commentmetadata a {
font-weight: 500;
}
.wp-block-post-comments .commentlist {
--wp--style--block-gap: 60px;
}
.wp-block-post-comments .comment-body > p > a,
.wp-block-post-comments .comment-edit-link {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
text-decoration: underline;
}
.wp-block-post-comments .comment-body > p > a:hover,
.wp-block-post-comments .comment-edit-link:hover {
text-decoration: none;
}
.wp-block-post-featured-image {
margin-bottom: 0;
}
h1.wp-block-post-title {
margin-bottom: calc(var(--wp--custom--gap--vertical) * 3);
}
/* Post title when featured image is present */
body:not(.has-featured-image) h1.wp-block-post-title {
border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
padding: 10px;
}
.wp-block-search .wp-block-search__button:active, .wp-block-search .wp-block-search__button:focus {
outline-offset: -0.25em;
}
.wp-block-search .wp-block-search__button svg {
min-width: 2em;
min-height: 2em;
}
.wp-block-search .wp-block-search__button.has-icon {
--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: 0;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
--wp--custom--button--color--text: var(--wp--custom--color--primary);
--wp--custom--button--color--background: var(--wp--custom--color--background);
position: relative;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button::before {
content: "";
height: 80%;
width: 1px;
background: var(--wp--custom--color--primary);
position: absolute;
left: 0;
top: 10%;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover {
--wp--custom--button--color--text: var(--wp--custom--color--background);
--wp--custom--button--color--background: var(--wp--custom--color--primary);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover.has-focus {
outline-color: var(--wp--custom--color--background);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
border-color: transparent;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus::before, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus::before {
left: calc(-1 * var(--wp--custom--button--border--width));
}
/* Separator width */
/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
.wp-block-separator.is-style-wide {
border-width: 0 0 3px 0;
}
.pre-footer h3 {
text-transform: uppercase;
}
.pre-footer .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
--wp--custom--button--typography--font-size: 14px;
--wp--custom--button--spacing--padding--top: 0.5em;
--wp--custom--button--spacing--padding--bottom: 0.5em;
}
.is-style-skatepark-aside-caption {
align-items: center;
display: flex;
flex-direction: column;
}
.is-style-skatepark-aside-caption img {
justify-self: center;
}
.is-style-skatepark-aside-caption figcaption {
align-self: flex-end;
border-top: 3px solid var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
margin-bottom: 0;
margin-top: 20px;
padding-top: 20px;
max-width: 455px;
text-align: left;
}
.is-style-skatepark-aside-caption.alignfull figcaption {
margin-left: var(--wp--custom--gap--horizontal);
margin-right: max(0.5 * (100% - var(--wp--custom--layout--wide-size)), var(--wp--custom--gap--horizontal));
}
.wp-block-quote.is-style-side-quote {
/* Needs .wp-block-quote class to override editor styles */
border: 0;
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
margin: calc(var(--wp--custom--gap--vertical) * 1.5) 0;
padding: calc(var(--wp--custom--gap--baseline) * 1.35) 0 0 0;
}
.wp-block-quote.is-style-side-quote cite {
font-size: var(--wp--custom--font-size--normal);
font-style: normal;
font-weight: 600;
}
.wp-block-quote.is-style-side-quote p, .wp-block-quote.is-style-side-quote div.block-editor-rich-text__editable {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.4em;
margin-bottom: calc(var(--wp--custom--gap--baseline) * 0.68);
}
.wp-block-quote.is-style-testimonial-quote {
/* Needs .wp-block-quote class to override editor styles */
border: 0;
display: flex;
flex-direction: row-reverse;
gap: calc(var(--wp--custom--gap--horizontal) * 1.6);
margin: calc(var(--wp--custom--gap--vertical) * 1.78) 0;
padding-left: 0;
}
@media (max-width: 599px) {
.wp-block-quote.is-style-testimonial-quote {
flex-direction: column;
gap: calc(var(--wp--custom--gap--vertical) * 0.75);
}
}
.wp-block-quote.is-style-testimonial-quote cite {
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
display: inline-block;
flex: 1 0 0;
font-size: var(--wp--custom--font-size--normal);
font-style: normal;
font-weight: 500;
margin-top: 1.5ex;
padding-top: calc(var(--wp--custom--gap--baseline) * 1.35);
text-align: right;
}
@media (max-width: 599px) {
.wp-block-quote.is-style-testimonial-quote cite {
text-align: left;
}
}
.wp-block-quote.is-style-testimonial-quote p, .wp-block-quote.is-style-testimonial-quote div.block-editor-rich-text__editable {
flex: 0 0 75%;
font-size: calc(var(--wp--preset--font-size--x-large) * 1.34);
font-weight: bold;
line-height: 115%;
margin-bottom: 0;
}
.pre-footer h3 {
text-transform: uppercase;
}
.pre-footer .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
--wp--custom--button--typography--font-size: 14px;
--wp--custom--button--spacing--padding--top: 0.5em;
--wp--custom--button--spacing--padding--bottom: 0.5em;
}
.paragraph-with-quote h4 {
margin: 0 0 calc(var(--wp--custom--gap--vertical) * 0.89) 0;
}
.paragraph-with-quote div:nth-child(2) p {
margin: calc(var(--wp--custom--gap--baseline) * 1.55) 0 0 0;
}
h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {
display: inline-block;
border-top: 2px solid var(--wp--custom--color--primary);
margin-bottom: 0;
padding-top: 1em;
}
/* Links and underlines */
a {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
@ -408,51 +123,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
text-decoration: none;
}
.post-meta.wp-block-group {
flex-direction: column;
align-items: start;
}
.post-meta .is-style-post-date-icon,
.post-meta .is-style-post-category-icon,
.post-meta .is-style-post-tag-icon {
margin-bottom: 0.5em;
overflow-wrap: normal;
padding-left: calc(18px + var(--wp--custom--gap--baseline));
position: relative;
word-break: normal;
}
.is-style-post-date-icon:before,
.is-style-post-category-icon:before,
.is-style-post-tag-icon:before {
height: 18px;
width: 18px;
position: absolute;
left: 0;
top: 3px;
}
.is-style-post-date-icon:before {
-webkit-mask-image: url(svg/post-date.svg);
mask-image: url(svg/post-date.svg);
}
.is-style-post-category-icon:before {
-webkit-mask-image: url(svg/post-category.svg);
mask-image: url(svg/post-category.svg);
}
.is-style-post-tag-icon:before {
-webkit-mask-image: url(svg/post-tag.svg);
mask-image: url(svg/post-tag.svg);
}
.archive .wp-block-post-excerpt__excerpt,
.blog .wp-block-post-excerpt__excerpt,
.home .wp-block-post-excerpt__excerpt {
margin-top: calc(0.5 * var(--wp--custom--gap--vertical));
margin-bottom: calc(0.5 * var(--wp--custom--gap--vertical));
}
.archive .wp-block-post-date,
.blog .wp-block-post-date,
.home .wp-block-post-date {
@ -460,20 +130,14 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}
.archive .wp-block-query .wp-block-post-title,
.blog .wp-block-query .wp-block-post-title,
.home .wp-block-query .wp-block-post-title {
margin-bottom: calc(0.5 * var(--wp--custom--gap--vertical));
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}
.wp-block-post-excerpt__more-link {
font-weight: 500;
}
.wp-block-post-excerpt__more-link:after {
content: "→";
display: inline-block;
padding-left: 0.7ch;
text-decoration: none;
}
/*# sourceMappingURL=theme.css.map */

2
skatepark/block-templates/page.html
View file

@ -1,7 +1,7 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"4em"}}}} -->
<div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>
<div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"calc(var(--wp--custom--gap--vertical) * 3)"}}}} /--></div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"bottom":"5em"}}}} -->

12
skatepark/block-templates/single.html
View file

@ -21,7 +21,9 @@
<div class="wp-block-column" style="flex-basis:58%"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:post-author {"showBio":true} /-->
<!-- wp:post-author {"showAvatar":false,"showBio":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} /-->
</div>
<!-- /wp:column -->
@ -29,11 +31,11 @@
<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
<!-- wp:group {"className":"post-meta"} -->
<div class="wp-block-group post-meta">
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}},"className":"is-style-post-date-icon"} /-->
<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}},"className":"is-style-post-category-icon"} /-->
<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}},"className":"is-style-post-tag-icon"} /--></div>
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}}} /-->
<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}}} /-->
<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--x-small)"}}} /--></div>
<!-- /wp:group -->
</div>

8
skatepark/inc/patterns/blog-posts.php
View file

@ -17,10 +17,10 @@ return array(
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--normal)"}}} /-->
<!-- wp:post-excerpt {"moreText":"' . esc_html__( 'Continue reading', 'skatepark' ) . '"} /-->
<!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--normal)"},"spacing":{"margin":{"bottom":"calc( 0.5 * var(--wp--custom--gap--vertical) )"}}}} /-->
<!-- wp:post-excerpt {"moreText":"' . esc_html__( 'Continue reading', 'skatepark' ) . '","style":{"spacing":{"margin":{"top":"calc( 0.5 * var(--wp--custom--gap--vertical) )","bottom":"calc( 0.5 * var(--wp--custom--gap--vertical) )"}}}} /-->
<!-- wp:post-date {"style":{"typography":{"fontSize":"16px","fontWeight":"500"}},"isLink":true} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->
@ -28,8 +28,6 @@ return array(
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->',

19
skatepark/inc/patterns/full-width-image-with-aside-caption.php
View file

@ -9,6 +9,21 @@ return array(
'title' => __( 'Full width image with aside caption', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:image {"align":"full","className":"alignfull size-large is-style-skatepark-aside-caption"} -->
<figure class="wp-block-image alignfull size-large is-style-skatepark-aside-caption"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( "A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.", 'skatepark' ) . '"/><figcaption>' . esc_html__( "Learn the basics of skating along with a group of your peers. More advanced at skating? Our skateboarding coaches will work with you 1:1 to advance your technique.", 'skatepark' ) . '</figcaption></figure>
<!-- /wp:image -->',
<figure class="wp-block-image alignfull size-large is-style-skatepark-aside-caption"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( "A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.", 'skatepark' ) . '"/></figure>
<!-- /wp:image -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">' . esc_html__( "Learn the basics of skating along with a group of your peers. More advanced at skating? Our skateboarding coaches will work with you 1:1 to advance your technique.", 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);

28
skatepark/inc/patterns/paragraph-with-quote.php
View file

@ -9,12 +9,12 @@ return array(
'title' => __( 'Paragraph with quote', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:columns {"align":"wide","className":"paragraph-with-quote"} -->
<div class="wp-block-columns alignwide paragraph-with-quote"><!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"></div>
<div class="wp-block-columns alignwide paragraph-with-quote"><!-- wp:column {"width":"22%"} -->
<div class="wp-block-column" style="flex-basis:22%"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
<!-- wp:column {"width":"56%","style":{"spacing":{"padding":{"right":"10%"}}}} -->
<div class="wp-block-column" style="padding-right:10%;flex-basis:56%"><!-- wp:heading {"level":4} -->
<h4>' . esc_html__( 'Why come to Skatepark?', 'skatepark' ) . '</h4>
<!-- /wp:heading -->
@ -27,10 +27,22 @@ return array(
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:quote {"className":"is-style-side-quote"} -->
<blockquote class="wp-block-quote is-style-side-quote"><p>' . esc_html__( 'I learned how to do a kick flip and made a bunch of new friends. Can’t wait to go back!', 'skatepark' ) . '</p><cite>' . esc_html__( '– Jane Doe, 11', 'skatepark' ) . '</cite></blockquote>
<!-- /wp:quote --></div>
<!-- wp:column {"width":"22%","style":{"spacing":{"padding":{"top":"4.1em"}}}} -->
<div class="wp-block-column" style="padding-top:4.1em;flex-basis:22%">
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.4}},"fontSize":"medium"} -->
<p class="has-medium-font-size" style="line-height:1.4">' . esc_html__( 'I learned how to do a kick flip and made a bunch of new friends. Can’t wait to go back!', 'skatepark' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">' . esc_html__( '– Jane Doe, 11', 'skatepark' ) . '</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);

28
skatepark/inc/patterns/testimonial.php
View file

@ -8,11 +8,25 @@
return array(
'title' => __( 'Testimonial', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:80px;padding-bottom:80px"><!-- wp:quote {"className":"is-style-testimonial-quote"} -->
<blockquote class="wp-block-quote is-style-testimonial-quote">
<p>' . esc_html__( 'I learned how to do a kick flip and made a bunch of new friends. Can’t wait to go back!', 'skatepark' ) . '</p>
<cite>' . esc_html__( 'Jane Doe', 'skatepark' ) . '</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:group -->',
'content' => '<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"top":"3em","right":"2em"}}}} -->
<div class="wp-block-column" style="padding-top:3em;padding-right:2em;flex-basis:25%"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"right","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
<p class="has-text-align-right" style="font-style:normal;font-weight:500">' . esc_html__( 'Jane Doe', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1.15"}},"fontSize":"calc( var(--wp--preset--font-size--x-large) * 1.34)"} -->
<p style="font-size:calc( var(--wp--preset--font-size--x-large) * 1.34);font-style:normal;font-weight:600;line-height:1.15">' . esc_html__( 'I learned how to do a kick flip and made a bunch of new friends. Can’t wait to go back!', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
',
);

15
skatepark/inc/patterns/text-list-with-button.php
View file

@ -12,9 +12,18 @@ return array(
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"75%"} -->
<div class="wp-block-column" style="flex-basis:75%"><!-- wp:heading {"level":4,"className":"is-style-skatepark-heading-border"} -->
<h4 class="is-style-skatepark-heading-border">' . esc_html__( 'Visiting Coaches', 'skatepark' ) . '</h4>
<!-- /wp:heading -->
<div class="wp-block-column" style="flex-basis:75%">
<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:heading {"level":4,"style":{"spacing":{"margin":{"top":"1em"}}}} -->
<h4 id="visiting-coaches" style="margin-top:1em">' . esc_html__( 'Visiting Coaches', 'skatepark' ) . '</h4>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:heading --><h2>' . esc_html__( 'Steph Harper. Buddy Sellers. Mehmet Farrow. Bob Lopez. Tammy Habich. Tye Barclay. Kaden Price. Lily Rivera. Chris Wright. Sammy Sanchez.', 'skatepark' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:buttons -->

4
skatepark/sass/base/_mixins.scss
View file

@ -1,4 +0,0 @@
@mixin text-decoration() {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}

5
skatepark/sass/base/_text.scss
View file

@ -1,5 +0,0 @@
// Text selection text color
::selection {
color: var(--wp--custom--color--background);
background-color: var(--wp--custom--color--foreground);
}

11
skatepark/sass/block-patterns/_paragraph-with-quote.scss
View file

@ -1,11 +0,0 @@
.paragraph-with-quote {
h4 {
margin: 0 0 calc( var(--wp--custom--gap--vertical) * 0.89 ) 0;
}
div:nth-child(2) {
p {
margin: calc( var(--wp--custom--gap--baseline) * 1.55 ) 0 0 0;
}
}
}

10
skatepark/sass/block-patterns/_pre-footer.scss
View file

@ -1,10 +0,0 @@
.pre-footer {
h3 {
text-transform: uppercase;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
--wp--custom--button--typography--font-size: 14px;
--wp--custom--button--spacing--padding--top: 0.5em;
--wp--custom--button--spacing--padding--bottom: 0.5em;
}
}

25
skatepark/sass/block-styles/_image-caption.scss
View file

@ -1,25 +0,0 @@
.is-style-skatepark-aside-caption {
align-items: center;
display: flex;
flex-direction: column;
img {
justify-self: center;
}
figcaption {
align-self: flex-end;
border-top: 3px solid var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
margin-bottom: 0;
margin-top: 20px;
padding-top: 20px;
max-width: 455px;
text-align: left;
}
&.alignfull figcaption {
margin-left: var(--wp--custom--gap--horizontal);
margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--gap--horizontal) ) );
}
}

18
skatepark/sass/block-styles/_side-quote.scss
View file

@ -1,18 +0,0 @@
.wp-block-quote.is-style-side-quote { /* Needs .wp-block-quote class to override editor styles */
border: 0;
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
margin: calc( var(--wp--custom--gap--vertical) * 1.5) 0;
padding: calc( var(--wp--custom--gap--baseline) * 1.35) 0 0 0;
cite {
font-size: var(--wp--custom--font-size--normal);
font-style: normal;
font-weight: 600;
}
p, div.block-editor-rich-text__editable {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.4em;
margin-bottom: calc( var(--wp--custom--gap--baseline) * 0.68);
}
}

37
skatepark/sass/block-styles/_testimonial-quote.scss
View file

@ -1,37 +0,0 @@
.wp-block-quote.is-style-testimonial-quote { /* Needs .wp-block-quote class to override editor styles */
border: 0;
display: flex;
flex-direction: row-reverse;
gap: calc( var(--wp--custom--gap--horizontal) * 1.6);
margin: calc( var(--wp--custom--gap--vertical) * 1.78) 0;
padding-left: 0;
@include break-small-only() {
flex-direction: column;
gap: calc( var(--wp--custom--gap--vertical) * 0.75);
}
cite {
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
display: inline-block;
flex: 1 0 0;
font-size: var(--wp--custom--font-size--normal);
font-style: normal;
font-weight: 500;
margin-top: 1.5ex;
padding-top: calc( var(--wp--custom--gap--baseline) * 1.35);
text-align: right;
@include break-small-only() {
text-align: left;
}
}
p, div.block-editor-rich-text__editable {
flex: 0 0 75%;
font-size: calc( var(--wp--preset--font-size--x-large) * 1.34);
font-weight: bold;
line-height: 115%;
margin-bottom: 0;
}
}

22
skatepark/sass/blocks/_author.scss
View file

@ -1,22 +0,0 @@
.wp-block-post-author__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-post-author__name {
font-weight: 700;
line-height: 1;
margin-bottom: 0.5em;
}
.wp-block-post-author__bio {
margin: 0;
font-size: var(--wp--preset--font-size--small);
}
.wp-block-post-author__avatar {
img {
border-radius: 50%;
}
}

12
skatepark/sass/blocks/_buttons.scss
View file

@ -1,12 +0,0 @@
.wp-block-file .wp-block-file__button {
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wp-block-search {
&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search__button.wp-block-search__button {
text-transform: uppercase;
letter-spacing: 0.1em;
}
}

6
skatepark/sass/blocks/_cover.scss
View file

@ -1,6 +0,0 @@
.wp-block-cover {
&.alignfull {
padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
}
}

13
skatepark/sass/blocks/_navigation.scss
View file

@ -1,13 +0,0 @@
//NOTE: Setting the font size as a block attributes forces ALL elements to have that font size
//preventing mobile menu items (and sub-menu items) from having a different size value
.wp-block-navigation {
font-size: var(--wp--preset--font-size--small);
.wp-block-navigation-item {
&.current-menu-item > a {
text-decoration-line: underline;
text-decoration-thickness: 0.2em;
text-underline-offset: 0.35em;
}
}
}

49
skatepark/sass/blocks/_post-comments.scss
View file

@ -1,49 +0,0 @@
.wp-block-post-comments {
.reply {
a {
@include text-decoration;
}
}
form {
column-gap: 1.2em;
}
.comment-reply-title {
margin-bottom: calc( 2 * var(--wp--custom--gap--baseline));
}
.comment-author {
cite {
font-weight: bold;
}
.says {
display: none;
}
}
.commentmetadata {
--wp--style--block-gap: 48px;
a {
font-weight: 500;
}
}
.commentlist {
--wp--style--block-gap: 60px;
}
// Target certain links within post comments to use the underline treatment.
.comment-body > p > a,
.comment-edit-link {
@include text-decoration;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}

3
skatepark/sass/blocks/_post-featured-image.scss
View file

@ -1,3 +0,0 @@
.wp-block-post-featured-image {
margin-bottom: 0;
}

9
skatepark/sass/blocks/_post-title.scss
View file

@ -1,9 +0,0 @@
h1.wp-block-post-title {
//can be removed after https://github.com/WordPress/gutenberg/pull/35684 lands
margin-bottom: calc(var(--wp--custom--gap--vertical) * 3);
body:not(.has-featured-image) &{
border-bottom: var(--wp--custom--form--border--width)
var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
}
}

10
skatepark/sass/blocks/_query.scss
View file

@ -1,10 +0,0 @@
.wp-block-query-pagination{
.wp-block-query-pagination-numbers {
.current {
@include text-decoration;
}
.page-numbers {
padding: 10px;
}
}
}

52
skatepark/sass/blocks/_search.scss
View file

@ -1,52 +0,0 @@
.wp-block-search {
.wp-block-search__button {
&:active,
&:focus {
outline-offset: -0.25em;
}
svg {
min-width: 2em;
min-height: 2em;
}
&.has-icon {
--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
}
}
&.wp-block-search__button-inside {
.wp-block-search__inside-wrapper{
padding: 0;
.wp-block-search__button {
--wp--custom--button--color--text: var(--wp--custom--color--primary);
--wp--custom--button--color--background: var(--wp--custom--color--background);
position: relative;
&::before {
content: "";
height: 80%;
width: 1px;
background: var(--wp--custom--color--primary);
position: absolute;
left: 0;
top: 10%;
}
&:not(.has-background):not(.has-text-color) {
&:hover {
--wp--custom--button--color--text: var(--wp--custom--color--background);
--wp--custom--button--color--background: var(--wp--custom--color--primary);
&:focus,
&.has-focus {
outline-color: var(--wp--custom--color--background);
}
}
&:focus,
&.has-focus {
border-color: transparent;
&::before {
left: calc( -1 * var(--wp--custom--button--border--width) );
}
}
}
}
}
}
}

6
skatepark/sass/blocks/_separator.scss
View file

@ -1,6 +0,0 @@
.wp-block-separator {
&.is-style-wide {
border-width: 0 0 3px 0;
}
}

8
skatepark/sass/elements/_headings.scss
View file

@ -1,8 +0,0 @@
h1, h2, h3, h4, h5, h6 {
&.is-style-skatepark-heading-border{
display: inline-block;
border-top: 2px solid var(--wp--custom--color--primary);
margin-bottom: 0;
padding-top: 1em;
}
}

53
skatepark/sass/elements/_links.scss
View file

@ -1,53 +0,0 @@
a {
@include text-decoration;
}
.wp-block-post-content p a:not(.wp-block-post-excerpt__more-link) {
text-decoration-line: underline;
&:hover {
text-decoration: none;
background-color: var(--wp--custom--color--primary);
color: var(--wp--custom--color--background);
}
}
.wp-block-post-comments .comment-meta > a,
.wp-block-post-comments .comment-body > p > a,
.wp-block-post-comments .comment-edit-link,
.post-meta a {
text-decoration-line: underline;
&:hover {
text-decoration-line: none;
}
}
//Exceptions for the general underline rule
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.wp-block-site-title a,
.wp-block-post-title a{
text-underline-offset: 0.1ex;
}
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-query-pagination a {
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
// Select the focus states of all non-wpadmin and screen reader links
.wp-block-search__button,
a:not(.ab-item):not(.screen-reader-shortcut) {
&:active,
&:focus {
outline: 1px dotted var(--wp--custom--color--primary);
outline-offset: 0.1em;
text-decoration: none;
}
}

43
skatepark/sass/elements/_post-meta.scss
View file

@ -1,43 +0,0 @@
.post-meta {
&.wp-block-group {
flex-direction: column;
align-items: start;
}
.is-style-post-date-icon,
.is-style-post-category-icon,
.is-style-post-tag-icon {
margin-bottom: 0.5em;
overflow-wrap: normal;
padding-left: calc( 18px + var(--wp--custom--gap--baseline));
position: relative;
word-break: normal;
}
}
.is-style-post-date-icon,
.is-style-post-category-icon,
.is-style-post-tag-icon {
&:before {
height: 18px;
width: 18px;
position: absolute;
left: 0;
top: 3px;
}
}
.is-style-post-date-icon:before {
-webkit-mask-image: url(svg/post-date.svg);
mask-image: url(svg/post-date.svg);
}
.is-style-post-category-icon:before {
-webkit-mask-image: url(svg/post-category.svg);
mask-image: url(svg/post-category.svg);
}
.is-style-post-tag-icon:before {
-webkit-mask-image: url(svg/post-tag.svg);
mask-image: url(svg/post-tag.svg);
}

25
skatepark/sass/templates/_index.scss
View file

@ -1,25 +0,0 @@
.archive,
.blog,
.home {
.wp-block-post-excerpt__excerpt {
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
}
.wp-block-post-date {
text-decoration: underline;
@include text-decoration;
}
.wp-block-query .wp-block-post-title{
margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
}
}
.wp-block-post-excerpt__more-link {
font-weight: 500;
&:after {
content: "→";
display: inline-block;
padding-left: 0.7ch;
text-decoration: none;
}
}

128
skatepark/sass/theme.scss
View file

@ -1,25 +1,105 @@
@import "../../blockbase/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
@import "../../blockbase/sass/base/mixins";
@import "base/text";
@import "base/mixins";
@import "blocks/author";
@import "../../blockbase/sass/blocks/_buttons-outline-style";
@import "blocks/buttons";
@import "blocks/cover";
@import "blocks/navigation";
@import "blocks/post-comments";
@import "blocks/post-featured-image";
@import "blocks/post-title";
@import "blocks/query";
@import "blocks/search";
@import "blocks/separator";
@import "block-patterns/pre-footer";
@import "block-styles/image-caption";
@import "block-styles/side-quote";
@import "block-styles/testimonial-quote";
@import "block-patterns/pre-footer";
@import "block-patterns/paragraph-with-quote";
@import "elements/headings";
@import "elements/links";
@import "elements/post-meta";
@import "templates/index";
/* Text selection text color */
::selection {
color: var(--wp--custom--color--background);
background-color: var(--wp--custom--color--foreground);
}
/* Post title when featured image is present */
h1.wp-block-post-title {
body:not(.has-featured-image) &{
border-bottom: var(--wp--custom--form--border--width)
var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
}
}
/* Separator width */
/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
.wp-block-separator {
&.is-style-wide {
border-width: 0 0 3px 0;
}
}
/* Links and underlines */
@mixin text-decoration() {
text-decoration-thickness: 0.07em;
text-underline-offset: 0.46ex;
}
a {
@include text-decoration;
}
.wp-block-post-content p a:not(.wp-block-post-excerpt__more-link) {
text-decoration-line: underline;
&:hover {
text-decoration: none;
background-color: var(--wp--custom--color--primary);
color: var(--wp--custom--color--background);
}
}
.wp-block-post-comments .comment-meta > a,
.wp-block-post-comments .comment-body > p > a,
.wp-block-post-comments .comment-edit-link,
.post-meta a {
text-decoration-line: underline;
&:hover {
text-decoration-line: none;
}
}
//Exceptions for the general underline rule
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.wp-block-site-title a,
.wp-block-post-title a{
text-underline-offset: 0.1ex;
}
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-query-pagination a {
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
// Select the focus states of all non-wpadmin and screen reader links
.wp-block-search__button,
a:not(.ab-item):not(.screen-reader-shortcut) {
&:active,
&:focus {
outline: 1px dotted var(--wp--custom--color--primary);
outline-offset: 0.1em;
text-decoration: none;
}
}
.archive,
.blog,
.home {
.wp-block-post-date {
text-decoration: underline;
@include text-decoration;
}
}
.wp-block-query-pagination{
.wp-block-query-pagination-numbers {
.current {
@include text-decoration;
}
}
}
.wp-block-post-excerpt__more-link {
font-weight: 500;
}

12
skatepark/theme.json
View file

@ -272,6 +272,12 @@
"padding": "15vh"
}
},
"core/file": {
"typography": {
"letterSpacing": "0.1em",
"textTransform": "uppercase"
}
},
"core/image": {
"filter": {
"duotone": "var(--wp--preset--duotone--default-filter)"
@ -329,6 +335,12 @@
"fontSize": "var(--wp--preset--font-size--x-large)"
}
},
"core/search": {
"typography": {
"letterSpacing": "0.1em",
"textTransform": "uppercase"
}
},
"core/separator": {
"border": {
"width": "0 0 3px 0"