From 4a570793c3d5665aced7d0136f8f59ce2b970dfb Mon Sep 17 00:00:00 2001
From: Tony Klapatch <aklapatch@famous-smoke.com>
Date: Fri, 18 Oct 2024 11:30:43 -0400
Subject: [PATCH 1/3] Display hero behind nav, remove video summary embed title

---
 cigars-for-beginners/blocks/hero/hero.css       |  8 ++++++++
 .../blocks/video-summary/video-summary.css      | 17 -----------------
 .../blocks/video-summary/video-summary.js       |  6 +-----
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/cigars-for-beginners/blocks/hero/hero.css b/cigars-for-beginners/blocks/hero/hero.css
index 2312112..b6d1b78 100644
--- a/cigars-for-beginners/blocks/hero/hero.css
+++ b/cigars-for-beginners/blocks/hero/hero.css
@@ -11,6 +11,7 @@ main .hero-container {
   position: relative;
   padding: 32px;
   min-height: 300px;
+  margin-top: calc(0px - var(--nav-height));
 }
 
 .hero h1 {
@@ -19,6 +20,13 @@ main .hero-container {
   margin-right: auto;
   color: white;
   font-size: var(--heading-font-size-xxl);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  right: 0;
+  padding: 0 0.5em;
+  text-shadow: 1px 1px 2px #333;
 }
 
 .hero picture {
diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.css b/cigars-for-beginners/blocks/video-summary/video-summary.css
index dd178c9..cb12d37 100644
--- a/cigars-for-beginners/blocks/video-summary/video-summary.css
+++ b/cigars-for-beginners/blocks/video-summary/video-summary.css
@@ -14,17 +14,6 @@
     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;
@@ -83,9 +72,3 @@
     visibility: visible;
     max-height: 500px;
 }
-
-@media (max-width: 600px) {
-    .video-summary-embed-title {
-        font-size: 0.8em;
-    }
-}
diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.js b/cigars-for-beginners/blocks/video-summary/video-summary.js
index 84ce814..8dd8214 100644
--- a/cigars-for-beginners/blocks/video-summary/video-summary.js
+++ b/cigars-for-beginners/blocks/video-summary/video-summary.js
@@ -39,18 +39,14 @@ function getShowHide() {
 export default async function decorate(block) {
   const url = block.querySelector('a');
 
-  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;
+  const facadeWrap = img.parentElement;
   facadeWrap.className = 'video-summary-embed-facade';
   facadeWrap.addEventListener('click', () => {
     const embed = getEmbed(url.innerText);
     facadeWrap.replaceWith(embed);
-    title.remove();
   });
 
   url.remove();

From a6cba533a7f1b7fbe9413e1892789fd0cff4d039 Mon Sep 17 00:00:00 2001
From: Tony Klapatch <aklapatch@famous-smoke.com>
Date: Fri, 18 Oct 2024 15:58:09 -0400
Subject: [PATCH 2/3] Move h1 to display below hero picture

---
 cigars-for-beginners/blocks/hero/hero.css | 27 ++++++++++++-----------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/cigars-for-beginners/blocks/hero/hero.css b/cigars-for-beginners/blocks/hero/hero.css
index b6d1b78..1e35785 100644
--- a/cigars-for-beginners/blocks/hero/hero.css
+++ b/cigars-for-beginners/blocks/hero/hero.css
@@ -7,30 +7,24 @@ main .hero-container {
   max-width: none;
 }
 
+main .hero-container + .section {
+  padding-top: 0;
+}
+
 .hero {
   position: relative;
-  padding: 32px;
+  padding: 32px 0;
   min-height: 300px;
   margin-top: calc(0px - var(--nav-height));
 }
 
 .hero h1 {
   max-width: var(--content-width);
-  margin-left: auto;
-  margin-right: auto;
-  color: white;
-  font-size: var(--heading-font-size-xxl);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0;
-  right: 0;
-  padding: 0 0.5em;
-  text-shadow: 1px 1px 2px #333;
+  margin: 32px auto;
+  padding: 0 32px;
 }
 
 .hero picture {
-  position: absolute;
   z-index: -1;
   inset: 0;
   object-fit: cover;
@@ -41,4 +35,11 @@ main .hero-container {
   object-fit: cover;
   width: 100%;
   height: 100%;
+  max-height: 500px;
+}
+
+@media (max-width: 768px) {
+  .hero img {
+    max-height: 300px;
+  }
 }

From 6a7d1f56ad25863a4f9e473e6760cd36dd15bdce Mon Sep 17 00:00:00 2001
From: Tony Klapatch <aklapatch@famous-smoke.com>
Date: Mon, 21 Oct 2024 08:29:46 -0400
Subject: [PATCH 3/3] Fix hero image alignment, center h1

---
 cigars-for-beginners/blocks/hero/hero.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/cigars-for-beginners/blocks/hero/hero.css b/cigars-for-beginners/blocks/hero/hero.css
index 1e35785..17e5d94 100644
--- a/cigars-for-beginners/blocks/hero/hero.css
+++ b/cigars-for-beginners/blocks/hero/hero.css
@@ -13,15 +13,15 @@ main .hero-container + .section {
 
 .hero {
   position: relative;
-  padding: 32px 0;
+  padding: 0 0 32px;
   min-height: 300px;
-  margin-top: calc(0px - var(--nav-height));
 }
 
 .hero h1 {
   max-width: var(--content-width);
   margin: 32px auto;
   padding: 0 32px;
+  text-align: center;
 }
 
 .hero picture {
@@ -38,6 +38,10 @@ main .hero-container + .section {
   max-height: 500px;
 }
 
+.hero p {
+  margin: 0;
+}
+
 @media (max-width: 768px) {
   .hero img {
     max-height: 300px;