Merge pull request 'Adding some ios safari optimizations' (#9) from dev into main

jacoknapp · jacoknapp · commit 02f6cce792ec · 2025-09-01T21:57:42.000-05:00
Reviewed-on: https://gitea.knapp/jacoknapp/EternalVows/pulls/9
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -3,19 +3,47 @@ on:
   push:
     branches: ["**"]
     tags: ["v*"]
+  schedule:
+    - cron: '0 0 * * 3'
 permissions:
   contents: read
   packages: write
 env:
   IMAGE_NAME: ${{ github.repository }}
   REGISTRY_GHCR: ghcr.io
   REGISTRY_DOCKER: docker.io
+  # Branches to run when triggered by schedule (JSON array string). Update as needed.
+  SCHEDULE_BRANCHES: '["main","dev"]'
 jobs:
+  # Prepare a dynamic branch matrix so schedule can target multiple branches without duplicating workflows
+  prepare-matrix:
+    runs-on: ubuntu-latest
+    outputs:
+      branches: ${{ steps.set.outputs.branches }}
+    steps:
+      - name: Compute branch matrix
+        id: set
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [ "${{ github.event_name }}" = "schedule" ]; then
+            echo "branches=${{ env.SCHEDULE_BRANCHES }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "branches=[\"${{ github.ref_name }}\"]" >> "$GITHUB_OUTPUT"
+          fi
+
   build-and-push:
     runs-on: ubuntu-latest
+    needs: prepare-matrix
+    strategy:
+      fail-fast: false
+      matrix:
+        branch: ${{ fromJSON(needs.prepare-matrix.outputs.branches) }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ matrix.branch }}
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -91,6 +119,8 @@ jobs:
             type=sha,prefix=sha-,format=short
             type=ref,event=tag
             type=ref,event=branch
+            # On scheduled runs, also tag with the matrix branch name
+            type=raw,value=${{ matrix.branch }},enable=${{ github.event_name == 'schedule' }}
             type=raw,value=latest,enable={{is_default_branch}}
 
       - name: Login to external GHCR
diff --git a/README.md b/README.md
@@ -67,6 +67,10 @@ Edit `config/config.json`. All fields are optional; unset sections/buttons are h
   - Optional color palette: `ui.colors` or top-level `colors`.
     - Supported keys: `accent1`, `accent2`, `accent3`, `text`, `ink`, `bgOverlay`, `border`, `card`, `maxw`, `blur`.
     - Values are CSS colors or raw CSS for `blur` (e.g., `saturate(140%) blur(6px)`) and unit values for `maxw` (e.g., `1024px`).
+  - Background (fallback when photos aren’t visible): `ui.background` or top-level `background`.
+    - Keys: `baseTop`, `baseBottom`, `radial1`, `radial2` (CSS colors).
+    - Alternate keys also accepted in `ui.colors` for convenience: `bgBaseTop`, `bgBaseBottom`, `bgRadial1`, `bgRadial2` (or kebab-case `bg-base-top`, etc.).
+    - Defaults to a warm golden palette if not provided.
 
 Example (default with multiple venues):
 
@@ -106,6 +110,12 @@ Example (default with multiple venues):
       "card": "rgba(255,255,255,0.08)",
       "maxw": "1024px",
       "blur": "saturate(140%) blur(6px)"
+    },
+    "background": {
+      "baseTop": "#2d2616",
+      "baseBottom": "#1f1a10",
+      "radial1": "rgba(234, 200, 94, 0.45)",
+      "radial2": "rgba(255, 239, 189, 0.38)"
     }
   }
 }
diff --git a/config/config.json b/config/config.json
@@ -91,6 +91,12 @@
       "card": "rgba(255,255,255,0.08)",
       "maxw": "1024px",
       "blur": "saturate(140%) blur(6px)"
+    },
+    "background": {
+      "baseTop": "#2d2616",
+      "baseBottom": "#1f1a10",
+      "radial1": "rgba(234, 200, 94, 0.45)",
+      "radial2": "rgba(255, 239, 189, 0.38)"
     }
   }
 }
diff --git a/index.html b/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="theme-color" content="#131a25" />
+  <meta name="theme-color" content="#131a25" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
   <title>Wedding of Partner A &amp; Partner B</title>
   <meta name="description" content="Join us for our wedding celebration!" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -43,7 +46,7 @@
   --btn-gap: clamp(0.4rem, 0.35rem + 0.4vw, 0.8rem);
     }
     * { box-sizing: border-box }
-  html, body { margin:0; height:100%; background:#101010; color:var(--text); line-height:1.65; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; }
+  html, body { margin:0; height:100%; background:#131a25; color:var(--text); line-height:1.65; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; }
   html { scroll-behavior: smooth; }
     body::before, body::after {
       content:""; position: fixed; width: 260px; height: 260px; z-index: 1; pointer-events:none; opacity:.55; mix-blend-mode: screen; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
@@ -52,11 +55,16 @@
     body::before { top: 0; left: 0; transform: translate(-10%,-10%) rotate(0deg); }
     body::after  { bottom: 0; right: 0; transform: translate(10%,10%) rotate(180deg); }
   .bg { position: fixed; inset: 0; overflow:hidden; z-index:0;
-      /* Lighter gradient fallback so the page isn't black before photos load */
+      /* Configurable golden gradient fallback using CSS variables */
       background:
-        radial-gradient(1200px circle at 75% 10%, rgba(163,188,214,0.40), transparent 55%),
-        radial-gradient(900px circle at 15% 85%, rgba(247,237,220,0.35), transparent 50%),
-        linear-gradient(180deg, #1b2230, #131a25);
+        radial-gradient(1200px circle at 75% 10%, var(--bg-r1, rgba(234, 200, 94, 0.45)), transparent 55%),
+        radial-gradient(900px circle at 15% 85%, var(--bg-r2, rgba(255, 239, 189, 0.38)), transparent 50%),
+        /* Deep warm base to keep good contrast with white text */
+        linear-gradient(180deg, var(--bg-base-top, #2d2616), var(--bg-base-bottom, #1f1a10));
+    }
+    /* iOS: ensure background covers when toolbar collapses */
+    @supports (height: 100lvh) {
+      .ios .bg { inset: 0; min-height: 100lvh; }
     }
   #content { position: relative; z-index: 2; }
     .bg-slide { position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition: opacity 1.2s ease-in-out; will-change: opacity; }
@@ -68,6 +76,11 @@
     @supports (height: 100dvh) {
       header.hero { min-height: 100dvh; }
     }
+    /* On iOS Safari prefer dynamic viewport height for exact fit; add 1px to avoid rounding gap */
+    @supports (height: 100dvh) {
+      .ios header.hero { min-height: calc(100dvh + 1px); }
+    }
+    /* Background already covers the safe area using 100lvh; no extra offset needed */
     .hero .inner {
       position:relative; z-index:2; width:min(92vw, 840px);
       background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.06));
@@ -151,8 +164,17 @@
     .loading { text-align:center; padding:2rem; opacity:.9; }
     .hide { display:none !important; }
   </style>
-</head>
-<body>
+ </head>
+ <body>
+  <script>
+    (function(){
+      try {
+        var ua = navigator.userAgent || navigator.platform || "";
+        var isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+        if (isIOS) document.documentElement.classList.add('ios');
+      } catch {}
+    })();
+  </script>
   <div class="bg" id="bg"></div>
   <div id="loading" class="loading">Loading details…</div>
 
@@ -246,22 +268,32 @@ <h2>FAQ</h2>
 
     // Theme colors -> CSS variables
     function applyThemeColors(cfg) {
-      const colors = cfg?.ui?.colors || cfg?.colors; if (!colors) return;
       const root = document.documentElement;
-      const pick = (...k) => { for (const key of k) { const v = colors[key]; if (typeof v === 'string' && v.trim()) return v.trim(); } };
-      const map = [
-        ['--accent-1', pick('accent1','accent-1')],
-        ['--accent-2', pick('accent2','accent-2')],
-        ['--accent-3', pick('accent3','accent-3')],
-        ['--text', pick('text')],
-        ['--ink', pick('ink')],
-        ['--bg-overlay', pick('bgOverlay','bg-overlay')],
-        ['--border', pick('border')],
-        ['--card', pick('card')],
-      ];
-      for (const [css, val] of map) if (val) root.style.setProperty(css, val);
-      const maxw = pick('maxw','maxWidth'); if (maxw) root.style.setProperty('--maxw', typeof maxw === 'number' ? `${maxw}px` : maxw);
-      const blur = pick('blur'); if (blur) root.style.setProperty('--blur', blur);
+      const colors = cfg?.ui?.colors || cfg?.colors || {};
+      const pickFrom = (obj, ...keys) => {
+        for (const k of keys) { const v = obj?.[k]; if (typeof v === 'string' && v.trim()) return v.trim(); }
+      };
+      const setVar = (name, value) => { if (typeof value === 'string' && value.trim()) root.style.setProperty(name, value.trim()); };
+      // Existing color variables
+      setVar('--accent-1', pickFrom(colors, 'accent1','accent-1'));
+      setVar('--accent-2', pickFrom(colors, 'accent2','accent-2'));
+      setVar('--accent-3', pickFrom(colors, 'accent3','accent-3'));
+      setVar('--text',      pickFrom(colors, 'text'));
+      setVar('--ink',       pickFrom(colors, 'ink'));
+      setVar('--bg-overlay',pickFrom(colors, 'bgOverlay','bg-overlay'));
+      setVar('--border',    pickFrom(colors, 'border'));
+      setVar('--card',      pickFrom(colors, 'card'));
+      const maxw = pickFrom(colors, 'maxw','maxWidth'); if (maxw) root.style.setProperty('--maxw', typeof maxw === 'number' ? `${maxw}px` : maxw);
+      const blur = pickFrom(colors, 'blur'); if (blur) root.style.setProperty('--blur', blur);
+
+      // Background customization from colors or ui.background/background
+      // Accept both flat keys in colors and nested object with keys: baseTop, baseBottom, radial1, radial2
+      const bgCfg = (cfg?.ui?.background || cfg?.background || {});
+      const bgColors = { ...colors, ...bgCfg };
+      setVar('--bg-base-top',    pickFrom(bgColors, 'bgBaseTop','bg-base-top','baseTop','top'));
+      setVar('--bg-base-bottom', pickFrom(bgColors, 'bgBaseBottom','bg-base-bottom','baseBottom','bottom'));
+      setVar('--bg-r1',          pickFrom(bgColors, 'bgRadial1','bg-r1','radial1','r1'));
+      setVar('--bg-r2',          pickFrom(bgColors, 'bgRadial2','bg-r2','radial2','r2'));
     }
 
     // Buttons

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,12 @@`
`91`	`91`	`"card": "rgba(255,255,255,0.08)",`
`92`	`92`	`"maxw": "1024px",`
`93`	`93`	`"blur": "saturate(140%) blur(6px)"`
	`94`	`+ },`
	`95`	`+ "background": {`
	`96`	`+ "baseTop": "#2d2616",`
	`97`	`+ "baseBottom": "#1f1a10",`
	`98`	`+ "radial1": "rgba(234, 200, 94, 0.45)",`
	`99`	`+ "radial2": "rgba(255, 239, 189, 0.38)"`
`94`	`100`	`}`
`95`	`101`	`}`
`96`	`102`	`}`