Skip to content

Add 'map' page theme with navy wallpaper background#8

Merged
lamontacrook merged 1 commit into
mainfrom
map-page-theme
Jul 8, 2026
Merged

Add 'map' page theme with navy wallpaper background#8
lamontacrook merged 1 commit into
mainfrom
map-page-theme

Conversation

@lamontacrook

Copy link
Copy Markdown
Contributor

What

Adds a page-level `map` theme. Authors enable it by setting the page metadata field `theme` to `map`; aem.js turns that into a `map` class on `` (`decorateTemplateAndTheme`). The theme:

  • paints an authored image (`/en/bg-image/media_10ead71e9c8ea3a31cc74259d6397c1b2b7f5eac4.png`) as a full-page wallpaper that scrolls with the content
  • fills any uncovered area with navy `#022658`
  • lifts text, headings, and plain links to white for contrast on the dark background (mirrors the existing `.section.dark` treatment)

The rule lives in `styles/lazy-styles.css` because the wallpaper is decorative and not LCP-critical.

Preview

Base preview: https://map-page-theme--hal--AdobeDevXSC.aem.page/

⚠️ The visual effect only shows on a page whose metadata `theme` = `map`. No existing content page sets that yet, so the wallpaper won't be visible on the preview until an author adds the `theme: map` metadata to a page (e.g. a find-a-cruise page). Happy to point this at a specific path once one exists.

Testing

  • Verified on the local dev server: theme class applied, authored image loads (HTTP 200), navy fill + light text render correctly, background scrolls with content.
  • `npm run lint:css` passes clean.

🤖 Generated with Claude Code

Add a body.map page-level theme (set via the page metadata 'theme'
field) that paints an authored map image as a full-page wallpaper
that scrolls with the content, backed by a #022658 navy fill. Text,
headings, and plain links are lifted to white for contrast on the
dark background, mirroring the existing .section.dark treatment.

The rule lives in lazy-styles.css since the wallpaper is decorative
and not LCP-critical.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@aem-code-sync

aem-code-sync Bot commented Jul 8, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Jul 8, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@lamontacrook
lamontacrook merged commit d66a751 into main Jul 8, 2026
1 of 3 checks passed
@lamontacrook
lamontacrook deleted the map-page-theme branch July 8, 2026 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant