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

@@ -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;
+}

cigars-for-beginners/blocks/images/images.js

@@ -0,0 +1 @@
+// No JavaScript required for the images block

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();

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,14 +293,32 @@ 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%;
   background-repeat: repeat;
   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;
 }