Skip to content

Instantly share code, notes, and snippets.

View melchoyce's full-sized avatar

Mel Choyce-Dwan melchoyce

View GitHub Profile
@melchoyce
melchoyce / poster.gist
Created June 11, 2021 21:44
WordPress Pattern: Poster
<!-- wp:cover {"overlayColor":"white","align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"100px"}}}} -->
<div class="wp-block-cover alignfull has-white-background-color has-background-dim" style="padding-top:100px;padding-bottom:100px"><div class="wp-block-cover__inner-container"><!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2049919-jpeg-scaled.jpg","id":3121,"dimRatio":0,"minHeight":800,"minHeightUnit":"px","contentPosition":"top right","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<div class="wp-block-cover has-custom-content-position is-position-top-right" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;min-height:800px"><img class="wp-block-cover__image-background wp-image-3121" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2049919-jpeg-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-containe
@melchoyce
melchoyce / chapter-opening.gist
Created June 11, 2021 21:30
WordPress Pattern: Chapter opening
<!-- wp:group {"align":"full","style":{"color":{"background":"#40364b"},"spacing":{"padding":{"top":"80px","right":"0px","bottom":"100px","left":"0px"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#40364b;padding-top:80px;padding-right:0px;padding-bottom:100px;padding-left:0px"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"align":"wide","style":{"typography":{"fontSize":62,"lineHeight":"1.1"},"color":{"text":"#ffffff"}}} -->
<h2 class="alignwide has-text-color" style="color:#ffffff;font-size:62px;line-height:1.1">MERLIN FORETELLS THE BIRTH OF ARTHUR</h2>
<!-- /wp:heading -->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
@melchoyce
melchoyce / Cover block with caption.gist
Last active June 10, 2021 16:52
WordPress Pattern: Cover block with caption
<!-- wp:cover {"url":"https://www.anarieldesign.com/blockpatterns/image-from-rawpixel-id-414445-bigjpeg-scaled.jpeg","id":20466,"dimRatio":0,"focalPoint":{"x":"0.69","y":"0.32"},"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-20466" alt="" src="https://www.anarieldesign.com/blockpatterns/image-from-rawpixel-id-414445-bigjpeg-scaled.jpeg" style="object-position:69% 32%" data-object-fit="cover" data-object-position="69% 32%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","style":{"color":{"text":"#28303d"}},"backgroundColor":"white","className":"is-style-default"} -->
<div class="wp-block-group alignwide is-style-default has-white-background-color has-text-color has-background" style="color:#28303d"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-blo
@melchoyce
melchoyce / Two columns with full-width backgrounds.gist
Created June 8, 2021 19:16
WordPress Pattern: Two columns with full-width backgrounds
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420162-jpeg-scaled.jpg","id":3080,"dimRatio":40,"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-3080" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420162-jpeg-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"72px"}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>Flowers
@melchoyce
melchoyce / Centered introduction text with button and offset images.gist
Created June 8, 2021 17:42
WordPress Pattern: Centered introduction text with button and offset images
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#050c35"},"typography":{"lineHeight":"1","fontSize":"20px"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:20px;line-height:1"><em>Introducing</em></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"96px","lineHeight":"1"},"color":{"text":"#050c35"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:96px;line-height:1">Ukiyo-e Prints</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#050c35"},"typography":{"fontSize":"22px"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:22px">Printed in Tokyo, Japan and made of <br>100% organic cotton rag paper. <br>Available for a limited time.</p>
@melchoyce
melchoyce / Three images and text.gist
Created June 8, 2021 17:10
WordPress Pattern: Three images and text
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:gallery {"ids":[3053,3054,3052],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2848918-jpeg-683x1024.jpg" alt="" data-id="3053" data-full-url="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2848918-jpeg.jpg" data-link="https://mywptesting.site/?attachment_id=3053" class="wp-image-3053"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2849089-jpeg-683x1024.jpg" alt="" data-id="3054" data-full-url="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2849089-jpeg.jpg" data-link="https://mywptesting.site/?attachment_id=3054
@melchoyce
melchoyce / Two columns with impressionist image.gist
Created June 8, 2021 16:46
WordPress Pattern: Two columns with impressionist image
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"250px"} -->
<div class="wp-block-column" style="flex-basis:250px"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
@melchoyce
melchoyce / Full width image of space with big headline.gist
Created June 8, 2021 16:31
WordPress Pattern: Full width image of space with big headline
<!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-283674-jpeg-2.jpg","id":3031,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom left","align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-bottom-left" style="padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px;min-height:100vh"><img class="wp-block-cover__image-background wp-image-3031" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-283674-jpeg-2.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"72px","lineHeight":"1.15"}}} -->
<p class="has-text-align-center" style="font-size:72px;line-height:1.15"><strong>STAR CLUSTERS</strong><br><strong>IN HERCULES</strong></p
@melchoyce
melchoyce / Big image with headline and columns above.gist
Created June 8, 2021 15:47
WordPress Pattern: Big image with headline and columns above.
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:heading {"style":{"typography":{"fontSize":"48px","lineHeight":"1"}}} -->
<h2 style="font-size:48px;line-height:1"><strong>PETAL &amp;</strong><br><strong>STAMEN</strong></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph -->
<p>Petal &amp; Stamen is a new nature magazine from the same folks who brought you Antler &amp; Horn. Each magazine contains over a dozen photography essays.</p>
@melchoyce
melchoyce / bounce.css
Last active September 27, 2017 15:29
Bouncing animation from WordPress.com
.cdm-subtle-focus {
-webkit-animation: bounce .7s 1;
animation: bounce .7s 1;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);