diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 3065b8a..ae50598 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -87,15 +87,15 @@ main article.article-content .embed.block:has(iframe) { max-width: 800px; } +main article.article-content .embed.block:has(div > iframe, iframe) { + max-width: 800px; +} + main .open-article.block article.article-content .embed.block:has(iframe) { max-width: none; margin: 0; } -main article.article-content .embed.block:has(div > iframe, iframe) { - max-width: 800px; -} - main .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] { max-width: var(--layout-width); } diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css index ac4ffe9..bea4679 100644 --- a/blocks/long-form/long-form.css +++ b/blocks/long-form/long-form.css @@ -1,3 +1,8 @@ +.long-form-wrapper .long-form.block .center-seperator { + width: max-content; + margin: auto; +} + .long-form-wrapper .long-form.block .container { margin: 0 auto; @@ -117,19 +122,6 @@ margin: 20px 0; } -.long-form-wrapper .long-form.block .article-body div > p { - display: block; - line-height: 30px; - margin: 0 auto 20px; - padding: 0 20px; - max-width: var(--article-width); -} - -.long-form-wrapper .long-form.block .article-body > div > div > div > div:has(iframe:not([src*="players.brightcove.net"])) { - max-width: none; - padding: 0; -} - .long-form-wrapper .long-form.block .article-body h2 { font-family: var(--font-tungsten); font-size: 37px; @@ -144,6 +136,29 @@ text-align: center; } +.long-form-wrapper .long-form.block .article-body div > h2, +.long-form-wrapper .long-form.block .article-body div > h3, +.long-form-wrapper .long-form.block .article-body div > h4, +.long-form-wrapper .long-form.block .article-body div > h5, +.long-form-wrapper .long-form.block .article-body div > h6, +.long-form-wrapper .long-form.block .article-body div > b, +.long-form-wrapper .long-form.block .article-body div > i, +.long-form-wrapper .long-form.block .article-body div > em, +.long-form-wrapper .long-form.block .article-body div > blockquote, +.long-form-wrapper .long-form.block .article-body div > strong, +.long-form-wrapper .long-form.block .article-body div > p { + display: block; + line-height: 30px; + margin: 0 auto 20px; + padding: 0 20px; + max-width: var(--article-width); +} + +.long-form-wrapper .long-form.block .article-body > div > div > div > div:has(iframe:not([src*="players.brightcove.net"])) { + max-width: none; + padding: 0; +} + .long-form-wrapper .long-form.block .article-body div > h2 { margin-top: 0; margin-bottom: 20px; @@ -151,6 +166,16 @@ } @media (min-width: 1025px) { + .long-form-wrapper .long-form.block .article-body div > h2, + .long-form-wrapper .long-form.block .article-body div > h3, + .long-form-wrapper .long-form.block .article-body div > h4, + .long-form-wrapper .long-form.block .article-body div > h5, + .long-form-wrapper .long-form.block .article-body div > h6, + .long-form-wrapper .long-form.block .article-body div > b, + .long-form-wrapper .long-form.block .article-body div > i, + .long-form-wrapper .long-form.block .article-body div > em, + .long-form-wrapper .long-form.block .article-body div > blockquote, + .long-form-wrapper .long-form.block .article-body div > strong, .long-form-wrapper .long-form.block .article-body div > p { padding: 0 15px 0 35px; margin-bottom: 60px; diff --git a/blocks/long-form/long-form.js b/blocks/long-form/long-form.js index 3863134..bbf0b15 100644 --- a/blocks/long-form/long-form.js +++ b/blocks/long-form/long-form.js @@ -112,6 +112,12 @@ export default async function decorate(block) { replaceLinksWithEmbed(block); + block.querySelectorAll('p').forEach((p) => { + if (p.textContent.includes('• • •')) { + p.classList.add('center-seperator'); + } + }); + // Render template render(template, block, ARTICLE_TEMPLATES.LongForm);