Skip to content

docs: polish ESPHome Starter Kit spotlight card#849

Merged
bharvey88 merged 1 commit into
devfrom
docs-spotlight-card-polish
May 21, 2026
Merged

docs: polish ESPHome Starter Kit spotlight card#849
bharvey88 merged 1 commit into
devfrom
docs-spotlight-card-polish

Conversation

@bharvey88
Copy link
Copy Markdown
Contributor

@bharvey88 bharvey88 commented May 21, 2026

Summary

  • Replaces the top green "Are you looking for the starter kit guide?" pill with a small Spotlight eyebrow label so the card has one inner button (the green CTA) instead of two.
  • Rewords the AI-tinged subhead ("Build, learn, automate. A real product you'll keep using in your home.") to "Build your first smart sensor from scratch."
  • Bumps the image to 280x212 with rounded corners and vertically centers it inside the card.
  • Tightens card padding (28/32 -> 24/28) and adjusts the text gutter so the new image fits cleanly.

Test plan

  • Preview locally with mkdocs serve and confirm the card renders cleanly on desktop
  • Confirm the mobile media query still stacks the image below the text under 700px

Summary by CodeRabbit

Documentation

  • Updated homepage with refined visual styling and improved content layout for the ESPHome Starter Kit spotlight section. The featured spotlight card now displays enhanced design with clearer messaging, updated guidance copy, and improved visual hierarchy to help users discover and easily access important starter kit documentation, guides, and resources.

Review Change Stack

Reword AI-tinged subhead, replace top green pill with a 'Spotlight' eyebrow label, and bump the image (280x212, vertically centered) so the card hugs its content with no inner-button duplication.
@bharvey88 bharvey88 merged commit 250d327 into dev May 21, 2026
@bharvey88 bharvey88 deleted the docs-spotlight-card-polish branch May 21, 2026 19:35
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 21, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eeb07bf5-ddc2-434e-84a2-0d4c239bbe05

📥 Commits

Reviewing files that changed from the base of the PR and between b387f8f and 84b387c.

📒 Files selected for processing (1)
  • docs/index.md

Walkthrough

This PR updates the homepage documentation (docs/index.md) by introducing a new CSS class for the spotlight card image and refactoring the "ESPHome Starter Kit" spotlight card markup. The image styling is centralized into a CSS rule, the card badge text changes from a question to "Spotlight," and the overall card layout is refreshed with adjusted inline styles.

Changes

Homepage Spotlight Card Redesign

Layer / File(s) Summary
CSS styling for spotlight card image
docs/index.md
New .apollo-esk-img CSS class defines absolute positioning, fixed size (160×160), border radius, and object-fit behavior for the spotlight card image.
Spotlight card markup and content update
docs/index.md
Spotlight card is redesigned with badge text changed to "Spotlight," copy updated, card/text inline styles adjusted, and image element switched to use the new .apollo-esk-img CSS class instead of inline positioning.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

  • ApolloAutomation/docs#820: Adds new "Learn the Basics" documentation pages and navigation for the ESPHome Starter Kit area, complementing this PR's homepage spotlight card redesign.

Poem

🐰 A spotlight gleams on the kit so bright,
New CSS rules make images just right,
The card is refreshed with a badge and new voice,
Centered and styled—oh, what a choice!

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs-spotlight-card-polish

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

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