Article css issues (#265)

headwirecom · Sep 25, 2023 · 51058b9 · 51058b9
1 parent 808bafe
commit 51058b9
Show file tree

Hide file tree

Showing 17 changed files with 655 additions and 330 deletions.
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
diff --git a/blocks/courses/courses.css b/blocks/courses/courses.css
@@ -5,13 +5,20 @@
     justify-content: space-between;
     font-family: var(--font-gotham);
     padding: 20px;
-    margin: 20px;
+    margin: 20px auto;
+    max-width: 800px;
 }
 
 .courses-wrapper .courses.block .courses-info-wrapper {
     display: flex;
 }
 
+.courses-wrapper .courses.block .courses-info {
+    line-height: 26.4px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
 .courses-wrapper .courses.block .courses-info-wrapper + p {
     margin-bottom: 0;
 }
@@ -53,7 +60,7 @@
 
 .article-body .courses-text-wrapper .courses-tags > li > a {
     text-decoration: none; 
-    color: #fff;
+    color: #fff !important;
     background: #105259;
     white-space: nowrap;
     font-family: var(--font-gotham);

diff --git a/blocks/default-article/default-article.css b/blocks/default-article/default-article.css
@@ -1,3 +1,8 @@
+.default-article-wrapper .default-article.block .center-seperator {
+    display: flex;
+    justify-content: center;
+}
+
 .default-article-wrapper .default-article.block .container {
     max-width: var(--layout-width);
     margin: 0 auto;
@@ -149,10 +154,6 @@
     justify-content: center;
 }
 
-.default-article-wrapper .default-article.block .lead .portrait img {
-    max-width: 400px;
-}
-
 .default-article-wrapper .default-article.block .credit {
     margin: 0 auto;
     padding-top: 15px;
@@ -230,3 +231,15 @@
 .default-article-wrapper .default-article.block .article-body .portrait img {
     max-width: 600px;
 }
+
+.default-article-wrapper .default-article.block .article-body h2 {
+    font-family: var(--font-tungsten);
+    font-size: 37px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px;
+    letter-spacing: .05em;
+    border-bottom: 2px solid #ed3e49;
+    margin: 60px auto;
+    width: max-content;
+}
diff --git a/blocks/default-article/default-article.js b/blocks/default-article/default-article.js
@@ -44,9 +44,9 @@ export default async function decorate(block) {
             <div class="attribution">
               ${author ? `<span>By&nbsp;</span><a href="${normalizeAuthorURL(author)}">${author}</a>` : ''}
             </div>
-            <div class="publication">
+            ${publicationDate ? `<div class="publication">
                 <span>${publicationDate}</span>
-            </div>
+            </div>` : ''}
             <div class="sharing">
                 <slot name="share"></slot>
             </div>
@@ -92,6 +92,12 @@ export default async function decorate(block) {
   share.setAttribute('slot', 'share');
   block.append(share);
 
+  block.querySelectorAll('p').forEach((p) => {
+    if (p.textContent.includes('• • •')) {
+      p.classList.add('center-seperator');
+    }
+  });
+
   replaceLinksWithEmbed(block);
 
   // Render template

diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css
@@ -79,6 +79,10 @@ main .embed.block:has(div > iframe, iframe) {
     max-width: 100%;
 }
 
+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/embed/embed.js b/blocks/embed/embed.js
@@ -111,7 +111,6 @@ const embedTwitter = (url) => {
 };
 
 const loadEmbed = (block, link, autoplay) => {
-  console.log('\x1b[31m ~ link:', link);
   if (block.classList.contains('embed-is-loaded')) {
     return;
   }

diff --git a/blocks/full-bleed/full-bleed.css b/blocks/full-bleed/full-bleed.css
@@ -122,7 +122,7 @@
 
 
 .full-bleed-wrapper .full-bleed.block .article-body div > p {
-  margin: 0 auto 30px;
+  margin: 0 auto 60px;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -138,7 +138,7 @@
 }
 
 @media (min-width: 769px) {
-  .full-bleed-wrapper .full-bleed.block .article-body div > p {
+  .full-bleed-wrapper .full-bleed.block .article-body p {
     margin-bottom: 60px;
   }
 }
@@ -329,6 +329,10 @@
 
 .full-bleed-wrapper .full-bleed.block .article-body a {
   color: #000;
+  font-weight: 500;
+}
+
+.full-bleed-wrapper .full-bleed.block .article-body strong a {
   font-weight: 600;
 }
 

diff --git a/blocks/gallery-listicle/gallery-listicle.css b/blocks/gallery-listicle/gallery-listicle.css
@@ -89,6 +89,10 @@
     line-height: 30px;
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .headline p:first-of-type {
+    font-weight: 400;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .byline {
     display: flex;
     justify-content: flex-start;
@@ -131,14 +135,22 @@
     text-decoration: none;
 }
 
-.gallery-listicle-wrapper .gallery-listicle.block .article-body strong > a {
+.gallery-listicle-wrapper .gallery-listicle.block .article-body strong:not(:has(> *)) {
     text-decoration: underline;
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .article-body strong > a {
+    text-decoration: none;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .article-body > div a:hover {
     color: var(--link-hover-color);
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .article-body p > strong:only-child > a:only-child {
+    text-decoration: underline;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .publication {
     display: flex;
     align-items: baseline;

diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css
@@ -1,5 +1,7 @@
 .long-form-wrapper .long-form.block .container {
     margin: 0 auto;
+
+    --article-width: 800px;
 }
 
 .long-form-wrapper .long-form.block .container-article {
@@ -25,7 +27,7 @@
 
 .long-form-wrapper .long-form.block .article-body a {
     color: #000;
-    text-decoration: none;
+    font-weight: 500;
 }
 
 .long-form-wrapper .long-form.block .article-body strong > a {
@@ -115,18 +117,25 @@
     margin: 20px 0;
 }
 
-.long-form-wrapper .long-form.block .article-body div > p {
+.long-form-wrapper .long-form.block .article-body > div > div > div > * {
+    display: block;
     line-height: 30px;
-    margin-bottom: 20px;
+    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;
     font-style: normal;
-    font-weight: 700;
-    line-height: 38px;
+    font-weight: 600;
+    line-height: 38px !important;
     letter-spacing: .05em;
     text-decoration: underline;
     text-decoration-color: var(--link-hover-color);
@@ -142,8 +151,8 @@
 }
 
 @media (min-width: 1025px) {
-    .long-form-wrapper .long-form.block .article-body div > p {
-        padding: 0 35px;
+    .long-form-wrapper .long-form.block .article-body > div > div > div > * {
+        padding: 0 15px 0 35px;
         margin-bottom: 60px;
     }
 
@@ -153,6 +162,12 @@
     }
 }
 
+.long-form-wrapper .long-form.block .article-body p:has( > picture img ) {
+    width: 100vw;
+    max-width: none !important;
+    padding: 0 !important;
+}
+
 .long-form-wrapper .long-form.block .headline .description p {
     margin: 0;
 }
@@ -307,7 +322,6 @@
 }
 
 .long-form-wrapper .long-form.block .article-body {
-    max-width: 800px;
     margin: auto;
     padding-bottom: 60px;
 }
@@ -352,11 +366,11 @@
     }
 }
 
-.long-form-wrapper .long-form.block .article-body .fullscreen {
+.long-form-wrapper .long-form.block .article-body p > picture {
     margin-bottom: 0;
 }
 
-.long-form-wrapper .long-form.block .article-body .fullscreen img {
+.long-form-wrapper .long-form.block .article-body p > picture img {
     position: relative;
     background-color: #ededed;
     width: 100vw;

diff --git a/blocks/long-form/long-form.js b/blocks/long-form/long-form.js
@@ -1,7 +1,9 @@
 import {
   addPhotoCredit,
   ARTICLE_TEMPLATES,
-  assignSlot, getAuthors, normalizeAuthorURL,
+  assignSlot,
+  getAuthors,
+  normalizeAuthorURL,
   parseFragment,
   parseSectionMetadata,
   removeEmptyElements,
@@ -39,7 +41,9 @@ export default async function decorate(block) {
             <div class="byline">
               <div class="attribution">
                   <span>By&nbsp;</span>
-                  ${authors.map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`).join('&nbsp;and&nbsp;')}
+                  ${authors
+    .map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`)
+    .join('&nbsp;and&nbsp;')}
               </div>
               <div class="publication">
                   ${publicationDate ? '<div class="separator"></div>' : ''}  
@@ -53,7 +57,9 @@ export default async function decorate(block) {
           <div class="byline">
             <div class="attribution">
                 ${authors.length ? '<span>By&nbsp;</span>' : ''}
-                ${authors.map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`).join('&nbsp;and&nbsp;')}
+                ${authors
+    .map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`)
+    .join('&nbsp;and&nbsp;')}
             </div>
             <div class="publication">
                 <span>${publicationDate}</span>
@@ -116,21 +122,14 @@ export default async function decorate(block) {
   const pictures = template.querySelectorAll('.article-body p > picture');
   addPhotoCredit(pictures);
 
-  // Set fullscreen images
-  pictures.forEach((picture) => {
-    const img = picture.querySelector('img');
-    picture.parentElement.classList.add('fullscreen');
-    img.onload = () => {
-      img.style.left = `-${img.offsetLeft}px`;
-    };
-  });
-
   // Update block with rendered template
   block.innerHTML = '';
   block.append(template);
 
   // Inner block loading
-  block.querySelectorAll('.social-share, .embed, .more-cards, .courses').forEach((innerBlock) => decorateBlock(innerBlock));
+  block
+    .querySelectorAll('.social-share, .embed, .more-cards, .courses')
+    .forEach((innerBlock) => decorateBlock(innerBlock));
   loadBlocks(document.querySelector('main'));
 
   // Toggle dark theme on scroll
@@ -143,18 +142,39 @@ export default async function decorate(block) {
     }).observe(block.querySelector('.lead .image'));
   });
 
-  // Get images that were styled as fullscreen and adjust position
-  window.onresize = () => {
-    block.querySelectorAll('.fullscreen img').forEach((img) => {
-      // Hide visibility before resetting the position
-      img.style.visibility = 'hidden';
-      img.style.left = 0;
-
-      // Wait frame before reading position
-      requestAnimationFrame(() => {
-        img.style.left = `-${img.offsetLeft}px`;
-        img.style.visibility = 'visible';
-      });
-    });
-  };
+  // creating auto carousels
+  const autoCarouselGroups = [];
+
+  const potentialArticleImageGroups = block.querySelectorAll(
+    '.article-body *:not(:has(picture)) + p:has(> picture img)',
+  );
+  potentialArticleImageGroups.forEach((imageParagraph) => {
+    // this element is followed by at least 2 other images
+    if (
+      imageParagraph.nextElementSibling.querySelector('picture > img')
+      && imageParagraph.nextElementSibling.nextElementSibling.querySelector('picture > img')
+    ) {
+      const imageGroup = [];
+
+      let nextElementToProcess = imageParagraph;
+      while (nextElementToProcess) {
+        const hasImage = nextElementToProcess.querySelector('picture > img');
+        if (hasImage) {
+          imageGroup.push(nextElementToProcess);
+          nextElementToProcess = nextElementToProcess.nextElementSibling;
+        } else {
+          nextElementToProcess = false;
+        }
+      }
+      autoCarouselGroups.push(imageGroup);
+    }
+  });
+
+  autoCarouselGroups.forEach((imageArray) => {
+    const prevNode = imageArray[0].previousSibling;
+    const autoCarouselBlock = buildBlock('carousel', { elems: imageArray });
+    autoCarouselBlock.classList.add('auto-carousel');
+    prevNode.parentElement.insertBefore(autoCarouselBlock, prevNode.nextElementSibling);
+    decorateBlock(autoCarouselBlock);
+  });
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -111,7 +111,6 @@ const embedTwitter = (url) => { @@
     };
     const loadEmbed = (block, link, autoplay) => {
-      console.log('\x1b[31m ~ link:', link);
       if (block.classList.contains('embed-is-loaded')) {
         return;
       }
@@ Expand Down @@