diff --git a/assets/uploads/2013/10/Little-Angels-Presentationlight1-1050.webp b/assets/uploads/2013/10/Little-Angels-Presentationlight1-1050.webp new file mode 100644 index 00000000..f8c6e771 Binary files /dev/null and b/assets/uploads/2013/10/Little-Angels-Presentationlight1-1050.webp differ diff --git a/assets/uploads/2013/10/Little-Angels-Presentationlight1-640.webp b/assets/uploads/2013/10/Little-Angels-Presentationlight1-640.webp new file mode 100644 index 00000000..ba90a5de Binary files /dev/null and b/assets/uploads/2013/10/Little-Angels-Presentationlight1-640.webp differ diff --git a/assets/uploads/2013/10/TrueParentsSlider-1050.webp b/assets/uploads/2013/10/TrueParentsSlider-1050.webp new file mode 100644 index 00000000..6d492f96 Binary files /dev/null and b/assets/uploads/2013/10/TrueParentsSlider-1050.webp differ diff --git a/assets/uploads/2013/10/TrueParentsSlider-640.webp b/assets/uploads/2013/10/TrueParentsSlider-640.webp new file mode 100644 index 00000000..cf47fbfe Binary files /dev/null and b/assets/uploads/2013/10/TrueParentsSlider-640.webp differ diff --git a/assets/uploads/2013/10/father-Seung-Hwa_Presentation-1050.webp b/assets/uploads/2013/10/father-Seung-Hwa_Presentation-1050.webp new file mode 100644 index 00000000..f99afc24 Binary files /dev/null and b/assets/uploads/2013/10/father-Seung-Hwa_Presentation-1050.webp differ diff --git a/assets/uploads/2013/10/father-Seung-Hwa_Presentation-640.webp b/assets/uploads/2013/10/father-Seung-Hwa_Presentation-640.webp new file mode 100644 index 00000000..1e49dda6 Binary files /dev/null and b/assets/uploads/2013/10/father-Seung-Hwa_Presentation-640.webp differ diff --git a/css/site.css b/css/site.css index 90c9e7dd..a954bc5a 100644 --- a/css/site.css +++ b/css/site.css @@ -22,6 +22,133 @@ body.custom-background { background-color: #ffffff; } width: 100%; } +/* Lightweight homepage carousel with a fixed aspect ratio to prevent layout shift. */ +.home-carousel { + position: relative; + width: 100%; + max-width: 1200px; + aspect-ratio: 24 / 7; + margin: 30px auto 38px; + overflow: hidden; + background: #f7f7f2; +} + +.home-carousel-track, +.home-carousel-slide, +.home-carousel-slide > a, +.home-carousel-slide picture { + position: absolute; + inset: 0; + display: block; +} + +.home-carousel-slide { + z-index: 0; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: opacity 500ms ease; +} + +.home-carousel-slide.is-active { + z-index: 1; + visibility: visible; + opacity: 1; + pointer-events: auto; +} + +.home-carousel-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.home-carousel-caption { + position: absolute; + z-index: 2; + left: 0; + bottom: 0; + padding: 14px 22px; + color: #0e2012; + background: rgba(252, 250, 250, 0.82); + font-family: "Bebas Neue"; + font-size: 22px; + line-height: 1.2; +} + +.home-carousel-control, +.home-carousel-dots button { + border: 0; + cursor: pointer; +} + +.home-carousel-control { + position: absolute; + z-index: 3; + top: 50%; + display: grid; + place-items: center; + width: 42px; + height: 48px; + margin: 0; + padding: 0 0 4px; + border-radius: 0; + color: #fff; + background: rgba(19, 18, 17, 0.62); + font: 42px/1 Arial, sans-serif; + transform: translateY(-50%); + transition: background-color 180ms ease; +} + +.home-carousel-control:hover { + background: rgba(19, 18, 17, 0.86); +} + +.home-carousel-previous { + left: 14px; +} + +.home-carousel-next { + right: 14px; +} + +.home-carousel-dots { + position: absolute; + z-index: 3; + right: 16px; + bottom: 14px; + display: flex; + gap: 8px; +} + +.home-carousel-dots button { + width: 11px; + height: 11px; + margin: 0; + padding: 0; + border: 2px solid rgba(255, 255, 255, 0.95); + border-radius: 50%; + background: rgba(19, 18, 17, 0.45); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); +} + +.home-carousel-dots button.is-active { + background: #89c76b; +} + +.home-carousel-control:focus-visible, +.home-carousel-dots button:focus-visible { + outline: 3px solid #89c76b; + outline-offset: 3px; +} + +@media (prefers-reduced-motion: reduce) { + .home-carousel-slide { + transition: none; + } +} + /* Mobile-specific fix for the header image */ @media (max-width: 768px) { #bg_image { @@ -30,6 +157,34 @@ body.custom-background { background-color: #ffffff; } width: 100%; /* Let the image adjust to screen width */ height: auto; /* Maintain aspect ratio */ } + + .home-carousel { + margin: 15px auto 24px; + } + + .home-carousel-control { + width: 34px; + height: 40px; + font-size: 34px; + } + + .home-carousel-previous { + left: 8px; + } + + .home-carousel-next { + right: 8px; + } + + .home-carousel-caption { + padding: 8px 12px; + font-size: 17px; + } + + .home-carousel-dots { + right: 10px; + bottom: 9px; + } } /* Shortcodes Ultimate column rule used by exported content. */ .su-column-size-1-4{ diff --git a/js/home-carousel.js b/js/home-carousel.js new file mode 100644 index 00000000..6659c55e --- /dev/null +++ b/js/home-carousel.js @@ -0,0 +1,72 @@ +(function () { + "use strict"; + + var carousel = document.querySelector("[data-home-carousel]"); + if (!carousel) return; + + var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-slide]")); + var dots = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-dot]")); + var previous = carousel.querySelector("[data-carousel-previous]"); + var next = carousel.querySelector("[data-carousel-next]"); + var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + var current = 0; + var timer = null; + + function show(index) { + current = (index + slides.length) % slides.length; + + slides.forEach(function (slide, slideIndex) { + var active = slideIndex === current; + var link = slide.querySelector("a"); + slide.classList.toggle("is-active", active); + slide.setAttribute("aria-hidden", active ? "false" : "true"); + if (link) link.setAttribute("tabindex", active ? "0" : "-1"); + }); + + dots.forEach(function (dot, dotIndex) { + var active = dotIndex === current; + dot.classList.toggle("is-active", active); + dot.setAttribute("aria-current", active ? "true" : "false"); + }); + } + + function stop() { + if (timer) window.clearInterval(timer); + timer = null; + } + + function start() { + stop(); + if (!reduceMotion && slides.length > 1 && !document.hidden) { + timer = window.setInterval(function () { + show(current + 1); + }, 5000); + } + } + + previous.addEventListener("click", function () { + show(current - 1); + start(); + }); + + next.addEventListener("click", function () { + show(current + 1); + start(); + }); + + dots.forEach(function (dot, dotIndex) { + dot.addEventListener("click", function () { + show(dotIndex); + start(); + }); + }); + + carousel.addEventListener("mouseenter", stop); + carousel.addEventListener("mouseleave", start); + carousel.addEventListener("focusin", stop); + carousel.addEventListener("focusout", start); + document.addEventListener("visibilitychange", start); + + show(0); + start(); +})(); diff --git a/src/components/SiteLayout.astro b/src/components/SiteLayout.astro index 9fc78b0c..0453fc84 100644 --- a/src/components/SiteLayout.astro +++ b/src/components/SiteLayout.astro @@ -54,7 +54,7 @@ const metaTitle = title - + {plausibleDomain && } diff --git a/src/content/pages/index.html b/src/content/pages/index.html index be5c3cb9..b61d841b 100644 --- a/src/content/pages/index.html +++ b/src/content/pages/index.html @@ -4,6 +4,43 @@
+
+
+ + + +
+ + +
+ + + +
+
@@ -11,7 +48,7 @@
- Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International + Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International

Founders of FFWPU International

diff --git a/src/pages/index.astro b/src/pages/index.astro index ea607ec7..6beb4b0e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -14,5 +14,16 @@ const normalizedMainHtml = normalizeInternalHtmlLinks(mainHtml); canonical="/index" parabolaSettings={{ masonry: "0", magazine: "0", mobile: "1", fitvids: "1" }} > + +