feat(ui): website polish — modal, footer, hero stats, and icon cleanup#2035
Open
joeVenner wants to merge 49 commits into
Open
feat(ui): website polish — modal, footer, hero stats, and icon cleanup#2035joeVenner wants to merge 49 commits into
joeVenner wants to merge 49 commits into
Conversation
Per brand guidance, drop the custom awesome-copilot.png logo from the header. Ignore website/ws.log so local dev logs never get committed.
Adds cubic-bezier easing, duration, radius, glass, and layered shadow tokens to global.css. Mirrors tokens in light/auto theme blocks and resolves auto theme early in Head.astro to prevent flash. Adds Starlight auto/light media query fallback so docs paint with the correct palette.
Replace platform-specific comment wording with generic fit-and-finish terminology.
Adds an eyebrow, refined hero typography, and a glass search input with / shortcut. Implements lightweight client-side search against search-index.json with keyboard navigation. Adds a GitHub CTA using the Primer mark-github icon per brand guidelines. Gates entrance animations behind prefers-reduced-motion.
Uses glass card background, larger radius, and lift + accent-glow hover states. Introduces --card-accent custom property per category for consistent gradient borders. Makes counts more accessible (muted by default, accent on hover/focus). Respects prefers-reduced-motion by disabling card entrance animation and lift.
Makes Starlight header sticky with glass backdrop-filter and disables it for reduced-motion. Refines PageHeader.astro layout, typography, and Contribute button using Icon component. Replaces custom stroke icons in ThemeToggle with Primer moon/auto/sun icons and adds sliding indicator. Improves theme toggle accessibility labels and reduced-motion handling.
Adds glass modal backdrop with blur and reduced-motion fallback. Uses surface-glass background on modal content for a layered look. Replaces inline close SVG with the Primer close icon via Icon component. Adds explicit modal-close styling and improves btn-icon focus/hover states.
Glass listing-toolbar background and refined sort trigger styling. Improved search-bar input sizing and focus transitions. Refined resource-item hover: lift instead of slide, accent border, and reduced-motion fallback. All changes reuse existing shared classes; no page-specific CSS duplication.
Refines sidebar link hover/active states with rounded backgrounds and transitions. Improves docs typography: tighter headings, section underlines, better line-height. Adds rounded borders to expressive-code blocks and inline code styling. Styles Starlight callouts with refined accent-left borders and accent-low backgrounds.
Adds alt="GitHub Skills logo" to the inline image in 03-development-workflows.md. Leaves all-contributors avatars as decorative because adjacent text provides the name.
Remove the auto/system state from the toggle UI. The first visit still respects the system preference, but after that users cycle only between explicit dark and light palettes. Co-Authored-By: Claude <noreply@anthropic.com>
Introduce a .glass-card component class with macOS-style translucent background, gradient border highlight, and lift-on-hover animation. Co-Authored-By: Claude <noreply@anthropic.com>
Add two new splash pages based on README/CONTRIBUTING content and link them in the Browse Resources sidebar. Pages reuse the new glass-card surface and include copy-to-clipboard and clear CTAs. Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Sync the custom toggle storage key with Starlight's starlight-theme key so the bundled Starlight script does not override the user's explicit choice after hydration.
Extract Hero, HomeCategoryCard, QuickLinks, and StatsRibbon components. Move the flat 9-card grid into three intent-driven clusters (Code smarter, Automate workflows, Extend and learn) with section headers and live counts.
Add ambient gradient orbs, scroll-triggered reveals, shimmer and spotlight hover effects on cards, glow primary button, glass pill button, and a live stats ribbon with count-up animation.
Use glass-card styling on resource items, listing toolbar, search input, filter panel, and ContributeCTA. Update PageHeader to support an optional eyebrow, primary action, and glass-backed Contribute link.
Add reusable HomeSection components and wire them into the landing page with glass-card styling and copy-to-clipboard support.
Replace the segmented pill toggle with a single clean 44x44 icon button that morphs between moon and sun. Keeps dark/light cycling and the Ctrl/Cmd+Shift+L shortcut.
- Remove hero ambient orbs and keep hero background transparent. - Switch primary buttons from purple to clean light-on-dark (and inverted in light mode); update secondary/outline to visible glass/solid styles. - Fix GitHub button icon size and vertical alignment. - Align stats numbers with consistent min-height and tighten spacing. - Increase search results min/max height so ~3 items are visible.
Replace the three variable-height step cards with a connected horizontal commit-node timeline that shares glass-card surfaces and equal heights, falling back to a vertical line on narrow screens.
- Fix stats ribbon alignment with flex-start justification and baseline value display. - Bump hero GitHub button icon to 22px and ensure vertical centering.
Replace the horizontal timeline with a vertical commit-history layout: connected dots, step hash, title, and description on glass cards.
- Center-align the Install in seconds icon with the heading. - Enlarge the Built by developers GitHub icon from 32px to 40px and increase its container to 64px for visual balance.
github-actions
Bot
added
new-submission
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.
Summary
Follow-up UI/UX polish to the Awesome GitHub Copilot website, building on the work in #1069. This PR tightens the landing page, resource modal, footer, and visual consistency across the site.
Enhancements
Landing page
copilot plugin installcommand.Hero
887+ Resources · 218+ Agents · 355+ Skills · 189+ Instructions · 92+ Plugins).Modal
min(95vw, 1100px)for better readability.Footer
Visual consistency
Docs
website/docs/DISCOVERIES.mdwith notes on glass theming, theme toggle behavior, listing-page polish, and footer/modal rendering fixes.Testing
npm run buildpasses#browse-resourcesDemo