From bd7a59ce8d2d0b34166fdcf40247115be8b37099 Mon Sep 17 00:00:00 2001 From: Code Code Date: Fri, 18 Oct 2024 14:26:55 -0400 Subject: [PATCH] 53 image size block (#55) * Make terminology background full screen. * Add block to size, align, and animate, any image. --- cigars-for-beginners/blocks/images/images.css | 61 +++++++++++++++++++ cigars-for-beginners/blocks/images/images.js | 1 + cigars-for-beginners/scripts/scripts.js | 20 ++++-- cigars-for-beginners/styles/styles.css | 43 ++++++++----- 4 files changed, 106 insertions(+), 19 deletions(-) create mode 100644 cigars-for-beginners/blocks/images/images.css create mode 100644 cigars-for-beginners/blocks/images/images.js diff --git a/cigars-for-beginners/blocks/images/images.css b/cigars-for-beginners/blocks/images/images.css new file mode 100644 index 0000000..07c3639 --- /dev/null +++ b/cigars-for-beginners/blocks/images/images.css @@ -0,0 +1,61 @@ +/* Size Images */ +.images.extra-small img { + max-width: 150px; + width: 100%; + height: auto; +} + +.images.small img { + max-width: 300px; + width: 100%; + height: auto; +} + +.images.medium img { + max-width: 500px; + width: 100%; + height: auto; +} + +.images.large img { + max-width: 700px; + width: 100%; + height: auto; +} + +.images.extra-large img { + max-width: 1000px; + width: 100%; + height: auto; +} + +/* Align Images */ +.images.align-left img { + display: block; + margin-left: 0; + margin-right: auto; +} + +.images.center img { + display: block; + margin-left: auto; + margin-right: auto; +} + +.images.align-right img { + display: block; + margin-left: auto; + margin-right: 0; +} + +/* Zoom-in effect */ +.images.zoom-in img { + transform: scale(0.7); + transition: transform 0.3s ease-out; + opacity: 0.8; +} + +.images.zoom-in img.in-view { + transform: scale(1); + opacity: 1; +} diff --git a/cigars-for-beginners/blocks/images/images.js b/cigars-for-beginners/blocks/images/images.js new file mode 100644 index 0000000..39aa0e6 --- /dev/null +++ b/cigars-for-beginners/blocks/images/images.js @@ -0,0 +1 @@ +// No JavaScript required for the images block diff --git a/cigars-for-beginners/scripts/scripts.js b/cigars-for-beginners/scripts/scripts.js index 4d01386..953048f 100644 --- a/cigars-for-beginners/scripts/scripts.js +++ b/cigars-for-beginners/scripts/scripts.js @@ -58,8 +58,10 @@ export async function fetchArticleInfo() { // Function to check if an element is in the viewport function isInViewport(element) { const rect = element.getBoundingClientRect(); - const height = window.innerHeight || document.documentElement.clientHeight; - return rect.top >= 0 && rect.top + 100 <= height; + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + const viewportWidth = window.innerWidth || document.documentElement.clientWidth; + // eslint-disable-next-line max-len + return rect.top + 100 < viewportHeight && rect.bottom > 0 && rect.left < viewportWidth && rect.right > 0; } // Function to add the 'visible' class to list items when they scroll into view @@ -71,13 +73,21 @@ function handleScroll() { item.style.transform = 'translateX(0)'; } }); + + const zoomInImages = document.querySelectorAll('.images.zoom-in img'); + zoomInImages.forEach((img) => { + if (isInViewport(img)) { + img.classList.add('in-view'); + } + }); } -// Check if the document has the 'animate-right' class +// Check for elements with onScroll animations const animateRight = document.querySelector('.item-list.animate-right'); +const zoomInImages = document.querySelectorAll('.images.zoom-in img'); -// Add event listener for scroll if animate-right class is present -if (animateRight) { +// Add event listener for scroll if animation classes are present +if (animateRight || zoomInImages) { window.addEventListener('scroll', handleScroll); // Initial check in case some items are already in view handleScroll(); diff --git a/cigars-for-beginners/styles/styles.css b/cigars-for-beginners/styles/styles.css index 27ec9f9..5276ee9 100644 --- a/cigars-for-beginners/styles/styles.css +++ b/cigars-for-beginners/styles/styles.css @@ -173,7 +173,7 @@ button { background-color: var(--button-color); overflow: hidden; text-overflow: ellipsis; - transition: background .2s; + transition: background 0.2s; } a.button:any-link::after { @@ -214,8 +214,7 @@ button.secondary { a.button.secondary:hover, a.button.secondary:focus, -button.secondary:hover -button.secondary:focus { +button.secondary:hover button.secondary:focus { background-color: var(--text-color); border-color: var(--text-color); color: var(--background-color); @@ -276,7 +275,7 @@ main .section { } .section.bg-tobacco-leaves { - background-image: url("/cigars-for-beginners/icons/background-tobacco-leaves.png"); + background-image: url('/cigars-for-beginners/icons/background-tobacco-leaves.png'); background-color: #5d7333; background-position: left top; background-size: cover; @@ -285,7 +284,7 @@ main .section { } .section.bg-sand { - background-image: url("/cigars-for-beginners/icons/background-infused-cigars.jpg"); + background-image: url('/cigars-for-beginners/icons/background-infused-cigars.jpg'); background-color: #6a3c25; background-position: left top; background-size: cover; @@ -294,7 +293,7 @@ main .section { } .section.bg-wood { - background-image: url("/cigars-for-beginners/icons/background-wood-texture2.jpg"); + background-image: url('/cigars-for-beginners/icons/background-wood-texture2.jpg'); background-color: #f3efe4; background-position: left top; background-size: 50%; @@ -302,6 +301,24 @@ main .section { max-width: none; } +.section.bg-wood2 { + background-image: url('/cigars-for-beginners/icons/background-wood-texture-cigar-sizes.jpg'); + background-color: #f3efe4; + background-position: left top; + background-size: cover; + background-repeat: no-repeat; + max-width: none; +} + +.section.bg-brown-texture { + background-image: url('/cigars-for-beginners/images/terms-tabs/media_11c9563b2b00d3c3f59376737971c9a720c9689a6.jpeg'); + background-color: #6a3c25; + background-position: left top; + background-size: cover; + background-repeat: no-repeat; + max-width: none; +} + .how-cigars-are-rolled h3 { padding-top: 3em; } @@ -311,14 +328,15 @@ main .section { margin-bottom: 2.5em; } -.numbered-comparison h2, .numbered-comparison h3, .numbered-comparison em { +.numbered-comparison h2, +.numbered-comparison h3, +.numbered-comparison em { text-align: center; display: block; } .section.center-title h2, -.section.center-title h3 -{ +.section.center-title h3 { text-align: center; text-transform: uppercase; } @@ -401,9 +419,7 @@ main .section:empty { .wrapper-tabs .tabs .tabs-list button[aria-selected='true'] img { position: relative; z-index: 35; - box-shadow: - 0 0 0 7px #d8d8d8, /* First outline: 7px, blue */ - 0 0 0 8px #333; /* Second outline: 1px, green */ + box-shadow: 0 0 0 7px #d8d8d8, /* First outline: 7px, blue */ 0 0 0 8px #333; /* Second outline: 1px, green */ } .compare-list .columns > div { @@ -453,7 +469,6 @@ main .section:empty { /* specific sections */ main .section.cigar-terminology { - background: url("/cigars-for-beginners/images/terms-tabs/media_11c9563b2b00d3c3f59376737971c9a720c9689a6.jpeg"); color: white; width: 100%; } @@ -575,7 +590,7 @@ main .section.cigar-terminology { .humi-tabs .tabs .tabs-list button[aria-selected='true'] { border-bottom: 0; cursor: initial; - background: url("/cigars-for-beginners/images/media_14bd13a9db54810d16ac3a87e78aeacd08d800a20.png"); + background: url('/cigars-for-beginners/images/media_14bd13a9db54810d16ac3a87e78aeacd08d800a20.png'); background-position: center bottom; background-repeat: no-repeat; }