Merge branch 'main' into 37-section-metadata

cigars-for-beginners/blocks/alternating-colors/alternating-colors.css

@@ -0,0 +1,14 @@
+.alternating-colors > div {
+  margin-bottom: 20px;
+  padding: 25px;
+  background-color: rgb(242 251 255);
+}
+
+.alternating-colors > div:nth-child(2n+2) {
+  background-color: rgb(244 242 255);
+}
+
+.alternating-colors div h4 {
+  text-align: left;
+  margin-bottom: 12px;
+}

cigars-for-beginners/blocks/alternating-colors/alternating-colors.js

@@ -0,0 +1,9 @@
+export default function decorate(block) {
+  [...block.children].forEach((row) => {
+    const firstDiv = row.children[0];
+    const h4 = document.createElement('h4');
+    // convert the first div to h4
+    h4.textContent = firstDiv.textContent;
+    firstDiv.replaceWith(h4);
+  });
+}

cigars-for-beginners/blocks/video-summary/video-summary.css

@@ -7,6 +7,37 @@
     aspect-ratio: 16 / 9;
 }
 
+.video-summary .video-summary-embed-facade {
+    position: relative;
+    max-width: 820px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+.video-summary .video-summary-embed-title {
+    position: absolute;
+    top: 0;
+    color: #fff;
+    margin: 0 auto;
+    padding: 0.5em;
+    text-shadow: 2px 2px black;
+    font-size: var(--body-font-size-m);
+    background: #00000075;
+}
+
+.video-summary .video-summary-embed-facade::after {
+    content: url('/cigars-for-beginners/icons/play.png');
+    position: absolute;
+    display: block;
+    z-index: 1;
+    width: 60px;
+    height: 60px;
+    margin: 0 auto;
+    inset: 50% 0 0;
+    transform: translateY(-50%);
+    filter: drop-shadow(2px 4px 6px black);
+}
+
 .video-summary > div > div:last-child {
     text-align: center;
 }
@@ -52,3 +83,9 @@
     visibility: visible;
     max-height: 500px;
 }
+
+@media (max-width: 600px) {
+    .video-summary-embed-title {
+        font-size: 0.8em;
+    }
+}

cigars-for-beginners/blocks/video-summary/video-summary.js

@@ -5,8 +5,12 @@
  */
 function getEmbed(url) {
   const frame = document.createElement('iframe');
+
+  const frameUrl = new URL(url);
+  frameUrl.searchParams.append('autoplay', 1);
+
   frame.className = 'video-summary-embed';
-  frame.src = url;
+  frame.src = frameUrl.toString();
   frame.allow = 'autoplay; fullscreen; picture-in-picture';
   frame.allowFullscreen = true;
 
@@ -34,9 +38,23 @@ function getShowHide() {
 
 export default async function decorate(block) {
   const url = block.querySelector('a');
-  const embed = getEmbed(url);
-  url.parentElement.replaceWith(embed);
 
-  const description = block.querySelector('div > div:last-child p');
+  const title = block.querySelector('h3');
+  title.className = 'video-summary-embed-title';
+
+  const img = block.querySelector('img');
+  img.className = 'video-summary-embed';
+
+  const facadeWrap = title.parentElement;
+  facadeWrap.className = 'video-summary-embed-facade';
+  facadeWrap.addEventListener('click', () => {
+    const embed = getEmbed(url.innerText);
+    facadeWrap.replaceWith(embed);
+    title.remove();
+  });
+
+  url.remove();
+
+  const description = block.querySelector(':scope > div > div:last-child p');
   description.parentElement.prepend(getShowHide());
 }

cigars-for-beginners/styles/styles.css

@@ -320,6 +320,105 @@ main .section.highlight {
   background-color: var(--light-color);
 }
 
+/* dont display any sections that are empty, this can occur with formatting in sharepoint */
+main .section:empty {
+  display: none;
+}
+
+/* generic section styling */
+.section.bg-green {
+  background-color: #5d7333;
+}
+
+.section.text-white {
+  color: #fff;
+}
+
+.section.bg-numbered-gray {
+  background-color: #d8d8d8;
+  background-image: url('/cigars-for-beginners/icons/background-smoke.jpg');
+  background-position: left top;
+  background-size: cover;
+  background-repeat: no-repeat;
+  max-width: 100%;
+}
+
+.section.compare-list {
+  max-width: 100%;
+  padding: 80px 0;
+}
+
+.cigar-pairing img {
+  margin: 1em 0;
+}
+
+.compare-list .columns img {
+  width: auto;
+  float: left;
+  padding: 0 1.75em;
+  max-height: 330px;
+}
+
+.compare-list .columns > div {
+  align-items: start;
+}
+
+.compare-list ul {
+  overflow: hidden;
+}
+
+.compare-list ul li {
+  font-weight: 300;
+  line-height: 1.3em;
+  margin: 0 0 1em;
+}
+
+.section.cigar-pairing {
+  text-align: center;
+  font-weight: 300;
+  padding: 0 32px;
+}
+
+.numbered-comparison .columns > div {
+  align-items: start;
+}
+
+.cigar-pairing .columns > div > div {
+  overflow: hidden;
+}
+
+.cigar-pairing .columns > div > div p:first-child img {
+  max-width: 152px;
+}
+
+.numbered-comparison h2 {
+  font-weight: bold;
+  margin-bottom: 2.5em;
+}
+
+.numbered-comparison h2, .numbered-comparison h3, .numbered-comparison em {
+  text-align: center;
+  display: block;
+}
+
+.numbered-comparison p {
+  font-weight: 300;
+}
+
+.numbered-comparison p em {
+  border-radius: 50%;
+  background-color: #1d1d1d;
+  color: #fff;
+  font-size: 2rem;
+  width: 70px;
+  height: 70px;
+  line-height: 70px;
+  margin: 0 auto 20px;
+  font-style: normal;
+  font-weight: bold;
+}
+
+/* specific sections */
 main .section.cigar-terminology {
   background: url("/cigars-for-beginners/images/terms-tabs/media_11c9563b2b00d3c3f59376737971c9a720c9689a6.jpeg");
   color: white;