Skip to content

Fixing learning hub hero #1360

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
aaronpowell merged 2 commits into from
Apr 10, 2026
Merged

Fixing learning hub hero #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82ba9fb
Combining the spans
aaronpowell Apr 10, 2026
7ace020
Removing some excessive padding
aaronpowell Apr 10, 2026
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
183 changes: 143 additions & 40 deletions website/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import Modal from '../components/Modal.astro';
import Icon from '../components/Icon.astro';
import BackToTop from '../components/BackToTop.astro';
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import Modal from "../components/Modal.astro";
import Icon from "../components/Icon.astro";
import BackToTop from "../components/BackToTop.astro";

const base = import.meta.env.BASE_URL;
---

<StarlightPage
frontmatter={{
title: 'Awesome GitHub Copilot',
title: "Awesome GitHub Copilot",
description:
'Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience',
template: 'splash',
"Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience",
template: "splash",
pagefind: false,
prev: false,
next: false,
editUrl: false,
head: [
{
tag: 'meta',
tag: "meta",
attrs: {
property: 'og:type',
content: 'website',
property: "og:type",
content: "website",
},
},
],
Expand All @@ -34,14 +34,18 @@ const base = import.meta.env.BASE_URL;
<section class="hero" aria-labelledby="hero-heading">
<div class="container">
<h1 id="hero-heading">
<span class="gradient-text">Awesome</span>
<span class="gradient-text-alt">GitHub Copilot</span>
<span class="gradient-text">Awesome GitHub Copilot</span>
Copy link

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hero heading was changed from two spans (gradient-text + gradient-text-alt) to a single gradient-text span. This changes the intended visual design (single gradient instead of two) and leaves the .gradient-text-alt styling unused; if the goal is just to fix the extra gap between “Awesome” and “GitHub Copilot”, it would be more targeted to keep the two spans and adjust the spacing/margin on the second span instead.

Suggested change
<span class="gradient-text">Awesome GitHub Copilot</span>
<span class="gradient-text">Awesome</span>
<span class="gradient-text-alt">GitHub Copilot</span>

Copilot uses AI. Check for mistakes.
</h1>
Comment on lines 34 to 38
Copy link

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR description mentions only changing .gradient-text-alt margin-left, but the implementation instead removes the .gradient-text-alt span and also changes global hero/layout spacing. Please update the PR description to match the actual approach, or adjust the changes to align with the stated intent (a targeted word-spacing fix).

Copilot uses AI. Check for mistakes.
<p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
<p class="hero-subtitle">
Community-contributed agents, instructions, and skills to enhance your
GitHub Copilot experience
</p>
<div class="hero-search">
<label for="global-search" class="sr-only">Search all resources</label>
<label for="global-search" class="sr-only">Search all resources</label
>
<p id="global-search-help" class="sr-only">
Type at least two characters to show matching resources, then press the Down Arrow key to move into the results.
Type at least two characters to show matching resources, then press
the Down Arrow key to move into the results.
</p>
<p id="global-search-status" class="sr-only" aria-live="polite"></p>
<div class="search-row">
Expand All @@ -51,15 +55,33 @@ const base = import.meta.env.BASE_URL;
placeholder="Search all resources..."
autocomplete="off"
aria-describedby="global-search-help global-search-status"
/>
<a
href="https://github.com/github/awesome-copilot"
target="_blank"
rel="noopener"
class="github-btn"
aria-label="View on GitHub"
>
<a href="https://github.com/github/awesome-copilot" target="_blank" rel="noopener" class="github-btn" aria-label="View on GitHub">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="currentColor"
>
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
></path>
</svg>
<span>GitHub</span>
</a>
</div>
<div id="search-results" class="search-results hidden" aria-label="Search results"></div>
<div
id="search-results"
class="search-results hidden"
aria-label="Search results"
>
</div>
</div>
</div>
</section>
Expand All @@ -69,69 +91,151 @@ const base = import.meta.env.BASE_URL;
<h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
<div class="container">
<div class="cards-grid">
<a href={`${base}agents/`} class="card card-with-count card-category-ai" id="card-agents" style="--animation-delay: 0ms;">
<div class="card-icon" aria-hidden="true"><Icon name="robot" size={40} /></div>
<a
href={`${base}agents/`}
class="card card-with-count card-category-ai"
id="card-agents"
style="--animation-delay: 0ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="robot" size={40} />
</div>
<div class="card-content">
<h3>Agents</h3>
<p>Custom agents for specialized Copilot experiences</p>
</div>
<div class="card-count" data-count="agents" aria-label="Agent count">-</div>
<div
class="card-count"
data-count="agents"
aria-label="Agent count"
>
-
</div>
</a>
<a href={`${base}instructions/`} class="card card-with-count card-category-docs" id="card-instructions" style="--animation-delay: 50ms;">
<div class="card-icon" aria-hidden="true"><Icon name="document" size={40} /></div>
<a
href={`${base}instructions/`}
class="card card-with-count card-category-docs"
id="card-instructions"
style="--animation-delay: 50ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="document" size={40} />
</div>
<div class="card-content">
<h3>Instructions</h3>
<p>Coding standards and best practices for Copilot</p>
</div>
<div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
<div
class="card-count"
data-count="instructions"
aria-label="Instruction count"
>
-
</div>
</a>
<a href={`${base}skills/`} class="card card-with-count card-category-power" id="card-skills" style="--animation-delay: 100ms;">
<div class="card-icon" aria-hidden="true"><Icon name="lightning" size={40} /></div>
<a
href={`${base}skills/`}
class="card card-with-count card-category-power"
id="card-skills"
style="--animation-delay: 100ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="lightning" size={40} />
</div>
<div class="card-content">
<h3>Skills</h3>
<p>Self-contained folders with instructions and resources</p>
</div>
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
<div
class="card-count"
data-count="skills"
aria-label="Skill count"
>
-
</div>
</a>
<a href={`${base}hooks/`} class="card card-with-count card-category-automation" id="card-hooks" style="--animation-delay: 150ms;">
<div class="card-icon" aria-hidden="true"><Icon name="hook" size={40} /></div>
<a
href={`${base}hooks/`}
class="card card-with-count card-category-automation"
id="card-hooks"
style="--animation-delay: 150ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="hook" size={40} />
</div>
<div class="card-content">
<h3>Hooks</h3>
<p>Automated workflows triggered by agent events</p>
</div>
<div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
<div class="card-count" data-count="hooks" aria-label="Hook count">
-
</div>
</a>
<a href={`${base}workflows/`} class="card card-with-count card-category-automation" id="card-workflows" style="--animation-delay: 200ms;">
<a
href={`${base}workflows/`}
class="card card-with-count card-category-automation"
id="card-workflows"
style="--animation-delay: 200ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="workflow" size={40} />
</div>
<div class="card-content">
<h3>Workflows</h3>
<p>AI-powered automations for GitHub Actions</p>
</div>
<div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
<div
class="card-count"
data-count="workflows"
aria-label="Workflow count"
>
-
</div>
</a>
<a href={`${base}plugins/`} class="card card-with-count card-category-extension" id="card-plugins" style="--animation-delay: 250ms;">
<a
href={`${base}plugins/`}
class="card card-with-count card-category-extension"
id="card-plugins"
style="--animation-delay: 250ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="plug" size={40} />
</div>
<div class="card-content">
<h3>Plugins</h3>
<p>Curated plugins organized by themes</p>
</div>
<div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
<div
class="card-count"
data-count="plugins"
aria-label="Plugin count"
>
-
</div>
</a>
<a href={`${base}tools/`} class="card card-with-count card-category-dev" id="card-tools" style="--animation-delay: 300ms;">
<a
href={`${base}tools/`}
class="card card-with-count card-category-dev"
id="card-tools"
style="--animation-delay: 300ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="wrench" size={40} />
</div>
<div class="card-content">
<h3>Tools</h3>
<p>MCP servers and developer tools</p>
</div>
<div class="card-count" data-count="tools" aria-label="Tool count">-</div>
<div class="card-count" data-count="tools" aria-label="Tool count">
-
</div>
</a>
<a href={`${base}learning-hub/`} class="card card-with-count card-category-learn" id="card-learning-hub" style="--animation-delay: 350ms;">
<a
href={`${base}learning-hub/`}
class="card card-with-count card-category-learn"
id="card-learning-hub"
style="--animation-delay: 350ms;"
>
<div class="card-icon" aria-hidden="true">
<Icon name="book" size={40} />
</div>
Expand All @@ -143,7 +247,6 @@ const base = import.meta.env.BASE_URL;
</div>
</div>
</section>

</div>

<Modal />
Expand All @@ -152,6 +255,6 @@ const base = import.meta.env.BASE_URL;
<BackToTop />

<script>
import '../scripts/pages/index';
import "../scripts/pages/index";
</script>
</StarlightPage>
9 changes: 4 additions & 5 deletions website/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,10 @@ body:has(#main-content) {
padding: 0 24px;
}

.main-frame {
Copy link

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.main-frame is introduced here, but there are no other references to main-frame in the repo sources (only this CSS rule). If this is meant to override a Starlight/third-party layout class, it should be scoped (e.g., under body:has(#main-content) / #main-content) and/or documented; otherwise consider removing it to avoid a global, hard-to-trace layout override.

Suggested change
.main-frame {
body:has(#main-content) .main-frame {

Copilot uses AI. Check for mistakes.
padding-top: 0px;
}

#main-content a {
color: var(--color-link);
text-decoration: none;
Expand All @@ -200,7 +204,6 @@ body:has(#main-content) {

/* Hero Section */
.hero {
padding: 80px 0 40px;
text-align: center;
position: relative;
background: transparent;
Expand Down Expand Up @@ -1876,10 +1879,6 @@ body:has(#main-content) {
}

@media (max-width: 768px) {
.hero {
padding: 60px 0 30px;
}

.hero-particle {
opacity: 0.2;
}
Expand Down
Loading