Last active
July 16, 2024 15:12
-
-
Save colorful-tones/ca5e15cc811d7c8b9d42b233dad99afc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- wp:group {"tagName":"section","metadata":{"name":"Cards","categories":["text","about"],"patternName":"twentytwentyfour/cards-4"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"16rem"}} --> | |
| <section class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg2NTYxLWltYWdlLWt3dnk1Y2l1LmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"},"color":[]},"layout":{"type":"default"}} --> | |
| <article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg2NTYxLWltYWdlLWt3dnk1Y2l1LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} --> | |
| <div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"}},"backgroundColor":"black","textColor":"white","layout":{"type":"constrained"}} --> | |
| <div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color" style="border-radius:6px;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph --> | |
| <p>Studio</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} --> | |
| <h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Tales from the Engineers</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} --> | |
| <p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Step inside the studio and hear what happens behind the scenes.</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --></div></article> | |
| <!-- /wp:cover --> | |
| <!-- wp:cover {"url":"https://ids.si.edu/ids/deliveryService?id=NMAAHC-2014_139_2a_002","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} --> | |
| <article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://ids.si.edu/ids/deliveryService?id=NMAAHC-2014_139_2a_002" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} --> | |
| <div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#253cae"}},"textColor":"white","layout":{"type":"constrained"}} --> | |
| <div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#253cae;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph --> | |
| <p>Gear</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} --> | |
| <h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Equipment Overload: Explore Minimalism</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} --> | |
| <p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Too many options != creative empowerment.</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --></div></article> | |
| <!-- /wp:cover --> | |
| <!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzE0MDgzLWltYWdlLWt3dnhoOXg5LmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} --> | |
| <article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzE0MDgzLWltYWdlLWt3dnhoOXg5LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} --> | |
| <div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#3d6d0d"}},"textColor":"white","layout":{"type":"constrained"}} --> | |
| <div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#3d6d0d;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph --> | |
| <p>Training</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} --> | |
| <h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Sound Design for Everyone</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} --> | |
| <p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Build unique sounds and learn the foundations of sound synthesis.</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --></div></article> | |
| <!-- /wp:cover --> | |
| <!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMzY0Nzg5LWltYWdlLWt3eXFsbndnLmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} --> | |
| <article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMzY0Nzg5LWltYWdlLWt3eXFsbndnLmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} --> | |
| <div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"10px","right":"10px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#253cae"}},"textColor":"white","layout":{"type":"constrained"}} --> | |
| <div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#253cae;padding-top:6px;padding-right:10px;padding-bottom:6px;padding-left:10px;font-size:13px;line-height:1"><!-- wp:paragraph --> | |
| <p>Gear</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} --> | |
| <h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Syn-copining</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} --> | |
| <p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">With a wide array of VCOs, VCAs, and hybrid synthesis models.</p> | |
| <!-- /wp:paragraph --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --></div></article> | |
| <!-- /wp:cover --></section> | |
| <!-- /wp:group --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| register_block_style( | |
| 'core/cover', | |
| array( | |
| 'name' => 'card--animated-default', | |
| 'label' => __( 'Card (Animated, default)', 'themeslug' ), | |
| 'inline_style' => ' | |
| .is-style-card--animated-default { | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| transition: box-shadow 0.5s ease; | |
| } | |
| .is-style-card--animated-default:focus-within, | |
| .is-style-card--animated-default:hover { | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2), 0 16px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .is-style-card--animated-default :where(.wp-block-group.wp-block-group-is-layout-constrained) { | |
| position: static; | |
| } | |
| /* Make whole card clickable */ | |
| .is-style-card--animated-default :where(.wp-block-heading) a:after { | |
| content: ""; | |
| inset: 0; | |
| position: absolute; | |
| z-index: 10; | |
| } | |
| /* Blur the Cover block background */ | |
| .is-style-card--animated-default :where(.wp-block-cover__background) { | |
| filter: blur(0); | |
| transition: filter 0.5s ease; | |
| } | |
| .is-style-card--animated-default:focus-within :where(.wp-block-cover__background), | |
| .is-style-card--animated-default:hover :where(.wp-block-cover__background) { | |
| filter: blur(5px); | |
| } | |
| /* Animate the Cover block image */ | |
| .is-style-card--animated-default :where(.wp-block-cover__image-background) { | |
| filter: saturate(100%) brightness(100%); | |
| transform: scale(1); | |
| transition: all 0.35s ease; | |
| will-change: filter, transform; | |
| } | |
| .is-style-card--animated-default:focus-within :where(.wp-block-cover__image-background), | |
| .is-style-card--animated-default:hover :where(.wp-block-cover__image-background) { | |
| filter: saturate(200%) brightness(40%); | |
| transform: scale(1.05); | |
| } | |
| /* Animate label area */ | |
| .is-style-card--animated-default :where(.is-vertical) .wp-block-group:first-of-type { | |
| opacity: 0; | |
| transform: scale(0.95) translateX(-1rem); | |
| transform-origin: center right; | |
| transition: all 0.25s ease-out; | |
| transition-delay: 0.2s; | |
| } | |
| .is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-group:first-of-type, | |
| .is-style-card--animated-default:hover :where(.is-vertical) .wp-block-group:first-of-type { | |
| opacity: 1; | |
| transform: scale(1) translateX(0); | |
| } | |
| /* Animate content area */ | |
| .is-style-card--animated-default :where(.is-vertical) .wp-block-heading { | |
| transform: translateY(3rem); | |
| transition: all 0.25s ease-in; | |
| } | |
| .is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-heading, | |
| .is-style-card--animated-default:hover :where(.is-vertical) .wp-block-heading { | |
| transform: translateY(0); | |
| } | |
| .is-style-card--animated-default :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p { | |
| opacity: 0; | |
| transition: opacity 0.15s ease; | |
| transition-delay: 0.2s; | |
| } | |
| .is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p, | |
| .is-style-card--animated-default:hover :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p { | |
| opacity: 1; | |
| } | |
| ', | |
| ) | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment