Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lamontacrook merged 1 commit into from
Jul 8, 2026
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion styles/lazy-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,33 @@
/* add global styles that can be loaded post LCP here */
/* add global styles that can be loaded post LCP here */

/*
* Page-level theme: "map"
* Authors enable it by setting the page metadata `theme` to `map`, which
* aem.js turns into a `map` class on <body> (see decorateTemplateAndTheme).
* It paints Holland America's illustrated route map as a full-page wallpaper
* that scrolls with the content. The image is an authored asset served from
* the site's content path.
*/
body.map {
background-color: #022658;
background-image: url("/en/bg-image/media_10ead71e9c8ea3a31cc74259d6397c1b2b7f5eac4.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: #fff;
}

/* the wallpaper is dark, so lift text to light for contrast (mirrors .section.dark) */
body.map h1,
body.map h2,
body.map h3,
body.map h4,
body.map h5,
body.map h6 {
color: #fff;
}

body.map a:not(.button) {
color: #fff;
text-decoration: underline;
}
Loading