diff --git a/block-styles.css b/block-styles.css index 9bf7883..7d80ee1 100644 --- a/block-styles.css +++ b/block-styles.css @@ -26,3 +26,26 @@ border-left: 1px solid; border-top: 2px solid var(--wp--preset--color--background); } + +/* For the "Markdown-style Heading" block style */ +.is-style-markdown-heading::before { + content: "##"; + width: 4ch; + margin-right: 0; + font-family: monospace; + margin-inline-end: .3em; + letter-spacing: 2px; +} + +@media screen and (max-width: 782px) { + .is-style-markdown-heading::before { + margin-inline-start: 1em; + } +} + +@media screen and (min-width: 782px) { + .is-style-markdown-heading { + margin-top: 4em; + font-size: var(--wp--preset--font-size--medium); + } +} \ No newline at end of file diff --git a/js/block-styles.js b/js/block-styles.js index b96cd09..bacfd08 100644 --- a/js/block-styles.js +++ b/js/block-styles.js @@ -12,4 +12,18 @@ wp.domReady( () => { label: 'Tabbed Heading', } ) + + wp.blocks.registerBlockStyle( + 'core/heading', { + name: 'markdown-heading', + label: 'Markdown-style Heading', + } + ) + + wp.blocks.registerBlockStyle( + 'core/post-title', { + name: 'markdown-heading', + label: 'Markdown-style Heading', + } + ) } ) \ No newline at end of file diff --git a/style.css b/style.css index 1be0f8d..410ca86 100644 --- a/style.css +++ b/style.css @@ -25,48 +25,18 @@ html, body { height: 100%; } -.wp-site-blocks{ +.wp-site-blocks { display: flex; flex-direction: column; height: 100%; } - -.wp-site-blocks h2.blog-post-heading { - border-top: none; - height: revert; - container-type: inline-size; -} - @container (max-width: 20ch) { .wp-site-blocks h2::before { width: 7ch; } } -.wp-site-blocks h2.blog-post-heading::before { - content: "##"; - border-bottom: none; - border-right: none; - width: 4ch; - margin-right: 0; - height: revert; - border-top: none; - font-family: monospace; - margin-inline-end: .3em; - letter-spacing: 2px; -} - -.wp-site-blocks h2.blog-post-heading::after { - content: none; - border-bottom: none; - flex-grow: 1; - margin-left: 0; - height: revert; - border-left: none; - border-top: none; -} - .home .wp-site-blocks ul { list-style-image: url('https://beta.autonomic.zone/wp-content/uploads/2023/01/arrow.png'); } @@ -159,10 +129,6 @@ html, body { line-height: 1.5 !important; margin-top: 40px !important; } - - .wp-site-blocks h2.blog-post-heading::before { - margin-inline-start: 1em; - } } @media screen and (min-width: 600px){ @@ -224,9 +190,4 @@ html, body { .wp-site-blocks .category-portfolio h2 { margin-block: 40px !important; } - - .wp-site-blocks h2.blog-post-heading { - margin-top: 4em; - font-size: var(--wp--preset--font-size--medium); - } } \ No newline at end of file