@simple-photo-gallery/theme-modern 2.0.16 → 2.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-photo-gallery/theme-modern",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Modern theme for Simple Photo Gallery",
   "license": "MIT",
   "author": "Vladimir Haltakov, Tomasz Rusin",

package/src/features/themes/base-theme/components/footer/Footer.astro

@@ -14,7 +14,7 @@
   .footer {
     padding: 2rem 1.5rem 1.5rem;
     text-align: center;
-    background-color: transparent;
+    background-color: var(--section-bg-color-odd, var(--section-bg-color, #ffffff));
   }
 
   .footer__text {

package/src/features/themes/base-theme/components/gallery-section/GallerySection.astro

@@ -40,7 +40,7 @@ const validImages = section.images.filter(
 <style>
   .gallery-section {
     padding: 1rem 1rem;
-    background-color: var(--section-bg-color-odd, var(--section-bg-color, transparent));
+    background-color: var(--section-bg-color-odd, var(--section-bg-color, #ffffff));
   }
 
   .gallery-section:nth-child(even) {

package/src/features/themes/base-theme/components/hero/Hero.astro

@@ -145,13 +145,13 @@ const headerPhotoPath = getPhotoPath(headerImage || '', mediaBaseUrl);
               () => {
                 // Final fallback failed, blurhash stays visible
               },
-              { once: true }
+              { once: true },
             );
 
             // If fallback succeeds, hide blurhash
             img.addEventListener('load', hideBlurhash, { once: true });
           },
-          { once: true }
+          { once: true },
         );
       })();
     </script>
@@ -168,7 +168,7 @@ const headerPhotoPath = getPhotoPath(headerImage || '', mediaBaseUrl);
   .hero {
     position: relative;
     min-height: 450px;
-    height: 100vh;
+    height: var(--hero-height, 100vh);
     display: flex;
     align-items: center;
     justify-content: center;

package/src/features/themes/base-theme/utils/queryParams.ts

@@ -134,6 +134,16 @@ const applySectionBackgroundColors = (params: URLSearchParams): void => {
   setCSSVar(root, '--section-bg-color-odd', parseColor(params.get('sectionBgColorOdd')));
 };
 
+/**
+ * Applies hero height from the 'heroHeight' query parameter.
+ * Accepts a number (e.g., '100' for 100vh, '50' for 50vh).
+ */
+const applyHeroHeight = (params: URLSearchParams): void => {
+  const value = params.get('heroHeight')?.trim();
+  const height = value && /^\d+(\.\d+)?$/.test(value) ? `${value}vh` : null;
+  setCSSVar(document.documentElement, '--hero-height', height);
+};
+
 /**
  * Main function that applies all query parameter configurations to the page.
  * Reads URL search params and applies header visibility, background, typography, and section colors.
@@ -145,4 +155,5 @@ export const applyQueryParams = (): void => {
   applyTransparentBackground(params);
   applyTypographyColors(params);
   applySectionBackgroundColors(params);
+  applyHeroHeight(params);
 };