Interior-page course call-out: Eddie modal, footer, new-tab links, CTA card - #163
Open
nofluffdesign wants to merge 8 commits into
Open
Interior-page course call-out: Eddie modal, footer, new-tab links, CTA card#163nofluffdesign wants to merge 8 commits into
nofluffdesign wants to merge 8 commits into
Conversation
Port the course-callout work from the Eleventy prototype into this Jekyll site, adapted to Liquid includes and the site's Sass variables: - Update the fixed banner (_includes/banner.html) to showcase the course: keep the book title, author and an ebook link, with "Get Atomic Design Certified" as the highlighted CTA (reuses .btn). - Add a centered marketing modal (_includes/course-modal.html) shown once per reader after 50% scroll or 15s, never on load. Included via _layouts/default.html; behavior in js/course-cta.js (loaded from footer). - Add .course-modal styles to css/style.scss using the site's Sass palette ($orange / $tan / $brown), respecting prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bumps @brad-frost-web/eddie-web-components and eddie-design-tokens from 0.37.0 to 0.39.0 (the release Brad cut), pinning them from "*" to ^0.39.0. Rebuilds the component bundle (registers ed-modal, ed-button, ed-icon) and vendors the design-tokens CSS the components read from :root. 0.39's <ed-modal> is a native <dialog> in modal mode, so the browser now provides the backdrop, focus trap, Esc-to-close and focus restore. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Implements the interior-page course call-out reviewed with Brad: - #172 Replace the custom <dialog> with Eddie's <ed-modal>; load the component bundle and design tokens on interior pages. course-cta.js now only opens it on reader engagement — the native dialog handles a11y. - #173 Footer: "Atomic Design by Brad Frost" on the left, "Buy the ebook" on the right; links underline on hover/focus only (visible keyboard focus, WCAG 2.1 AA). - #175 Course/product links open in a new tab (target=_blank + noopener). - The CTA button slides up on hover/focus to reveal distinct course details (self-paced video course, 10+ hours, sample DS architecture, design systems community). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
nofluffdesign
changed the title
…, reading-pages-only firing with 1-week cooldown, banner gap + lockup polish Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements the interior-page course call-out reviewed with Brad in the 2026-07-14 check-in, now built on the Eddie 0.39.0 release. Closes #172, #173, #175.
Changes
#172 — Adopt the Eddie modal
<dialog>engagement modal with Eddie's<ed-modal>(header slot, built-in close button).default.html,head.html).<dialog>in modal mode, so the browser provides the backdrop, focus trap, Esc-to-close and focus restore.course-cta.jsis now just the engagement trigger (scroll 50% / 10s / once per reader) that flipsisActive.#173 — Footer link order + underline
#175 — Open course/product links in a new tab
target="_blank"+rel="external noopener").Primary CTA hover card (Brad's follow-up)
Dependencies
@brad-frost-web/eddie-web-componentsandeddie-design-tokens0.37.0 → 0.39.0, pinned from*to^0.39.0. Rebuilt bundle + vendored tokens CSS.Verification
Verified functionally in a local Jekyll build (DOM/CSS/geometry/focus assertions): modal opens as a native
:modalwith a 25% backdrop, centered, focus + Esc + close all work; footer layout + underline behavior; all course links open in new tabs; CTA slide-up reveal.