diff --git a/cigars-for-beginners/blocks/hero/hero.css b/cigars-for-beginners/blocks/hero/hero.css index 2312112..17e5d94 100644 --- a/cigars-for-beginners/blocks/hero/hero.css +++ b/cigars-for-beginners/blocks/hero/hero.css @@ -7,22 +7,24 @@ main .hero-container { max-width: none; } +main .hero-container + .section { + padding-top: 0; +} + .hero { position: relative; - padding: 32px; + padding: 0 0 32px; min-height: 300px; } .hero h1 { max-width: var(--content-width); - margin-left: auto; - margin-right: auto; - color: white; - font-size: var(--heading-font-size-xxl); + margin: 32px auto; + padding: 0 32px; + text-align: center; } .hero picture { - position: absolute; z-index: -1; inset: 0; object-fit: cover; @@ -33,4 +35,15 @@ main .hero-container { object-fit: cover; width: 100%; height: 100%; + max-height: 500px; +} + +.hero p { + margin: 0; +} + +@media (max-width: 768px) { + .hero img { + max-height: 300px; + } } 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();