https://hgastro.github.io/tags/moon/Recent content in Moon on Suburban Backyard Astro SightsHugo -- gohugo.ioenhgastroblog@gmail.comhgastroblog@gmail.comAll images and content on this website © 2025 Howard GramsThu, 20 Mar 2025 00:00:00 +0000https://hgastro.github.io/posts/2025-03-20-the-march-14-lunar-eclipse/Thu, 20 Mar 2025 00:00:00 +0000hgastroblog@gmail.comhttps://hgastro.github.io/posts/2025-03-20-the-march-14-lunar-eclipse/<style> /* The following styles are for the slideshow. Better to only include them if we actually have a slideshow! */ /* ✅ Ensure the slideshow container stacks elements properly */ .slideshow-container { display: flex; flex-direction: column; /* Stack slideshow and buttons */ align-items: flex-start; /* Align everything to the left */ width: 100%; max-width: 800px; margin-bottom: 20px; /* Ensure space before next content */ margin-top: -60px; /* had to modify this from jekyll version 8? } /* ✅ Use padding-bottom to maintain aspect ratio instead of fixed height */ .slideshow { width: 100%; max-width: 800px; position: relative; overflow: hidden; aspect-ratio: 1 / 1; /* Makes it a square, adapts responsively */ } /* ✅ Ensure slides take up full container height */ .slide { width: 100%; height: 100%; opacity: 0; transition: opacity 0s ease-in-out; position: absolute; } .slide:first-child { opacity: 1; } /* ✅ Ensure captions appear properly */ /* had to modify top/left from what was used in jekyll */ .caption { position: absolute; top: 40px; left: 5px; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; font-size: 16px; border-radius: 5px; } /* ✅ Ensure buttons appear BELOW the slideshow naturally */ .controls { display: flex; flex-direction: row; /* Arrange buttons in a row */ gap: 10px; margin-top: 10px; /* Space between slideshow and buttons */ z-index: 10; position: relative; width: 100%; /* Match slideshow width */ } /* ✅ Style buttons properly */ .controls button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: 1px solid #ccc; background: #f5f5f5; color: black; border-radius: 5px; } .controls button:hover { background: #ddd; } </style> <script> document.addEventListener("DOMContentLoaded", function () { let slides = document.querySelectorAll(".slideshow .slide"); let totalSlides = slides.length; let index = 0; let playing = false; let slideshowTimeout; let button = document.getElementById("slideshowControl"); let prevButton = document.getElementById("prevSlide"); let nextButton = document.getElementById("nextSlide"); let defaultInterval = 1000; // Default slide duration if (!button || !prevButton || !nextButton || slides.length === 0) { console.error("❌ ERROR: One or more elements not found. Check HTML structure."); return; } function showSlide(i) { console.log(`🔄 Changing to slide ${i}`); slides.forEach((slide, idx) => { slide.style.opacity = idx === i ? "1" : "0"; }); index = i; } function startSlideshow() { console.log("▶ Starting Slideshow..."); playing = true; button.textContent = "Pause Slideshow"; function nextSlide() { if (index < totalSlides - 1) { index++; showSlide(index); // Get custom duration from `data-duration` or use default let slideDuration = slides[index].getAttribute("data-duration") || defaultInterval; slideshowTimeout = setTimeout(nextSlide, slideDuration); } else { console.log("⏹ Slideshow finished."); playing = false; button.textContent = "Restart Slideshow"; } } nextSlide(); // Start the slideshow } function pauseSlideshow() { console.log("⏸ Pausing Slideshow..."); playing = false; button.textContent = "Resume Slideshow"; clearTimeout(slideshowTimeout); } button.addEventListener("click", function () { if (!playing) { if (button.textContent === "Restart Slideshow") { index = 0; // Reset to first slide showSlide(index); } startSlideshow(); } else { pauseSlideshow(); } }); prevButton.addEventListener("click", function () { index = Math.max(0, index - 1); // Prevent going below 0 showSlide(index); }); nextButton.addEventListener("click", function () { index = Math.min(totalSlides - 1, index + 1); // Prevent going past last slide showSlide(index); }); showSlide(index); // Show the first image initially }); </script> <p>We had fine weather here in North Carolina for the Pi Day March eclipse of the moon. Here&rsquo;s how it looked through my telescope.</p>