fixing some text not having the maxwidth on long-form articles.

fixing seperators on long-form articles linting
headwirecom · Sep 27, 2023 · 76cb3c4 · 76cb3c4
1 parent b1249ef
commit 76cb3c4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git 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
@@ -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,13 +136,46 @@
     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;
     padding: 0 20px;
 }
 
 @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
@@ -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);