Here (will be the link) to the video presentation.
Below is the code for my pattern library including some css to go along in the Customizer.
Blank pattern library page with css following.
Break these two files apart for use.
Kerch McConlogue
Kerch@WeFixBrokenWebsites.com
WordCamp Philly 2020
This page includes a plain standard pattern page.
The only styling in this pattern code is the addition of .callout
Page code starts below
---------------------------------------
<!-- wp:html -->
<figure class="wp-block-table color-table"><table><tbody><tr><th>New colors:</th><td style="background-color:#4d7dbf"><span style="color:white">#4d7dbf BLUE</span></td><td style="background-color:#e27c24">#e27c24 ORANGE</td><td style="background-color:#e0c128">#e0c128 YELLOW</td><td style="background-color:#51833d"><span style="color:white">#51833d GREEN</span></td><td style="background-color:#DFE8DC">#DFE8DC med green</td><td style="background-color:#EFF4ED">#EEF4ED Very light green</td></tr></tbody></table></figure>
<!-- /wp:html -->
<!-- wp:heading -->
<h2>this is an h2 in content</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3} -->
<h3>This is an h3 in content</h3>
<!-- /wp:heading -->
<!-- wp:heading {"level":4} -->
<h4>This is an H4 in content</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Note: h2 entry-title is the one that shows on archive pages! reduce that size to about .85em</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Chuck</strong> <strong>Norris</strong> can slam a revolving door. <a href="https://www.loremipsums.nl/lorem-ipsum-origineel/chuck-norris-ipsum/"><strong>Chuck</strong> <strong>Norris</strong></a> can have his cake and eat it, too. <strong>Chuck</strong> <strong>Norris</strong> is currently suing NBC, claiming Law and Order are trademarked names for his left and right legs</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"background":"#e0c128","text":"#224270"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#e0c128;color:#224270">this is a button #e0c128</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>button color is as shown, text color is #224270</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:heading {"level":3} -->
<h3>Following is a block quote</h3>
<!-- /wp:heading -->
<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Chuck</strong> <strong>Norris</strong> can slice meat so thin is only has one side, When <strong>Chuck</strong> <strong>Norris</strong> sends in his taxes, he sends blank forms and includes only a picture of himself, crouched and ready to attack.</p><cite>Chuck Norris</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>This is a pull standard pull quote. I don’t think it should be full width with “stop” lines top and bottom.</p></blockquote></figure>
<!-- /wp:pullquote -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"className":"callout"} -->
<p class="callout">I prefer a call out that's styled with class: callout</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>The chief export of Chuck Norris is Pain Chuck Norris is the reason you turn a light on when you enter a room. There is no theory of evolution. Just a list of animals Chuck Norris allows to live Chuck Norris received an electric shock, the result was Tron Chuck Norris is the reason why Waldo is hiding Police label anyone attacking Chuck Norris as a Code 45-11… a suicide, Fool me once, shame on you. Fool Chuck Norris once and he will roundhouse you in the face.<br></p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:media-text {"mediaId":49,"mediaLink":"http://www.snibbles.com/patterns/45-2/galilei/","mediaType":"image","mediaWidth":40} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="http://www.snibbles.com/patterns/wp-content/uploads/2020/09/galilei-1010x1024.jpg" alt="" class="wp-image-49"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p class="has-large-font-size">Resize the text in the sidebar and vertical align in block editor above</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->
<!-- wp:heading {"level":3} -->
<h3>This is an unordered list</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>ul style=margin-left: 45px;</li><li>Chuck Norris can win a game of Connect Four in only three moves</li><li>There is no theory of evolution. Just a list of animals Chuck Norris allows to live</li></ul>
<!-- /wp:list -->
<!-- wp:heading {"level":3} -->
<h3>This is an ordered list</h3>
<!-- /wp:heading -->
<!-- wp:list {"ordered":true} -->
<ol><li>So these are my replacements. A dandy and a clown.</li><li>The future revolves around you, here, now, so do good!</li><li>I hate computers and refuse to be bullied by them.</li></ol>
<!-- /wp:list -->
/* CSS code starts below */
/* Add your site colors here */
#4d7dbf; BLUE
#e27c24; ORANGE
#e0c128; YELLOW
#51833d; GREEN
#DFE8DC; med green
#EEF4ED; Very light green
*/
h1,h2,h3,h4,h5,h6 {
clear: none;
}
h1 {
color:#4d7dbf;
}
.entry-content h2, h3 {
color:#51833d;
}
/*h2 titles in archives*/
h2.entry-title a {
color:#b10101
}
ul li, ol li{
margin-left:3em;
}
/* I prefer a callout so I don't use this*/
/*
* .wp-block-pullquote blockquote {
border-left:none;
}
.wp-block-pullquote blockquote p{
font-style:normal;
}
.wp-block-pullquote blockquote cite{display:none
}
*/
.wp-block-button{
padding-bottom:2em;
}
.wp-block-quote{
position: relative;
display: inline-block;
color:#111111;
border-left:none;
font-style:normal;
width:70%;
padding-left:3em;
}
.whosaid,.wp-block-quote cite {
text-align:right;
font-size:.8em;
}
.callout {
float:right;
width:35%;
margin-left:2em;
padding: 2em;
border-top:2px solid #e27c24;
border-bottom: 3px solid #e27c24;
}
