Course call-out footer + engagement modal on interior pages#163
Open
nofluffdesign wants to merge 3 commits into
Open
Course call-out footer + engagement modal on interior pages#163nofluffdesign wants to merge 3 commits into
nofluffdesign wants to merge 3 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>
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
1 participant
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.
What
Ports the Atomic Design course call-out work into this Jekyll site (originally prototyped in the Eleventy
atomic-design-v2repo), adapted to Liquid includes and the site's own Sass palette. Reflects Brad's feedback from the design review._includes/banner.html): keeps the book title + author, adds a Buy the ebook link, and makes "Get Atomic Design Certified" the highlighted CTA (reuses.btn). Not dismissible._includes/course-modal.html, included via_layouts/default.html): native<dialog>, opens once per reader after 50% scroll or 15s — never on load. Title "Get Atomic Design Certified!", copy on latest thinking + battle-tested best practices, 10+ hours of video, sample architecture, resources, community. CTA "Learn more and get certified!". Closes via ✕ / backdrop / Esc; remembered inlocalStorage.js/course-cta.js(loaded from_includes/footer.html).css/style.scssusing the site's Sass variables ($orange/$tan/$brown), respectingprefers-reduced-motion.Design system
Uses this repo's existing Sass palette and
.btncomponent — no hardcoded colors, no new dependencies. (The$orange/$tan/$brownhere match the tokens used in the prototype.)Verified
npm install(for@brad-frost-web/eddie-design-tokens, currently missing) +bundle install+bundle exec jekyll serve, which wasn't set up in my environment. Please run locally to confirm before merge.Follow-up
shop.bradfrost.com/products/atomic-design-ebook).🤖 Generated with Claude Code