Skip to content

Commit e838306

Browse files
aaronpowellaaronpowell
authored
Fixing learning hub hero (#1360)
* Combining the spans * Removing some excessive padding
1 parent 5f59ddb commit e838306

2 files changed

Lines changed: 147 additions & 45 deletions

File tree

‎website/src/pages/index.astro‎

Lines changed: 143 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
---
2-
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
3-
import Modal from '../components/Modal.astro';
4-
import Icon from '../components/Icon.astro';
5-
import BackToTop from '../components/BackToTop.astro';
2+
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
3+
import Modal from "../components/Modal.astro";
4+
import Icon from "../components/Icon.astro";
5+
import BackToTop from "../components/BackToTop.astro";
66
77
const base = import.meta.env.BASE_URL;
88
---
99

1010
<StarlightPage
1111
frontmatter={{
12-
title: 'Awesome GitHub Copilot',
12+
title: "Awesome GitHub Copilot",
1313
description:
14-
'Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience',
15-
template: 'splash',
14+
"Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience",
15+
template: "splash",
1616
pagefind: false,
1717
prev: false,
1818
next: false,
1919
editUrl: false,
2020
head: [
2121
{
22-
tag: 'meta',
22+
tag: "meta",
2323
attrs: {
24-
property: 'og:type',
25-
content: 'website',
24+
property: "og:type",
25+
content: "website",
2626
},
2727
},
2828
],
@@ -34,14 +34,18 @@ const base = import.meta.env.BASE_URL;
3434
<section class="hero" aria-labelledby="hero-heading">
3535
<div class="container">
3636
<h1 id="hero-heading">
37-
<span class="gradient-text">Awesome</span>
38-
<span class="gradient-text-alt">GitHub Copilot</span>
37+
<span class="gradient-text">Awesome GitHub Copilot</span>
3938
</h1>
40-
<p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
39+
<p class="hero-subtitle">
40+
Community-contributed agents, instructions, and skills to enhance your
41+
GitHub Copilot experience
42+
</p>
4143
<div class="hero-search">
42-
<label for="global-search" class="sr-only">Search all resources</label>
44+
<label for="global-search" class="sr-only">Search all resources</label
45+
>
4346
<p id="global-search-help" class="sr-only">
44-
Type at least two characters to show matching resources, then press the Down Arrow key to move into the results.
47+
Type at least two characters to show matching resources, then press
48+
the Down Arrow key to move into the results.
4549
</p>
4650
<p id="global-search-status" class="sr-only" aria-live="polite"></p>
4751
<div class="search-row">
@@ -51,15 +55,33 @@ const base = import.meta.env.BASE_URL;
5155
placeholder="Search all resources..."
5256
autocomplete="off"
5357
aria-describedby="global-search-help global-search-status"
58+
/>
59+
<a
60+
href="https://github.com/github/awesome-copilot"
61+
target="_blank"
62+
rel="noopener"
63+
class="github-btn"
64+
aria-label="View on GitHub"
5465
>
55-
<a href="https://github.com/github/awesome-copilot" target="_blank" rel="noopener" class="github-btn" aria-label="View on GitHub">
56-
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
57-
<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"/>
66+
<svg
67+
viewBox="0 0 24 24"
68+
width="20"
69+
height="20"
70+
fill="currentColor"
71+
>
72+
<path
73+
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"
74+
></path>
5875
</svg>
5976
<span>GitHub</span>
6077
</a>
6178
</div>
62-
<div id="search-results" class="search-results hidden" aria-label="Search results"></div>
79+
<div
80+
id="search-results"
81+
class="search-results hidden"
82+
aria-label="Search results"
83+
>
84+
</div>
6385
</div>
6486
</div>
6587
</section>
@@ -69,69 +91,151 @@ const base = import.meta.env.BASE_URL;
6991
<h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
7092
<div class="container">
7193
<div class="cards-grid">
72-
<a href={`${base}agents/`} class="card card-with-count card-category-ai" id="card-agents" style="--animation-delay: 0ms;">
73-
<div class="card-icon" aria-hidden="true"><Icon name="robot" size={40} /></div>
94+
<a
95+
href={`${base}agents/`}
96+
class="card card-with-count card-category-ai"
97+
id="card-agents"
98+
style="--animation-delay: 0ms;"
99+
>
100+
<div class="card-icon" aria-hidden="true">
101+
<Icon name="robot" size={40} />
102+
</div>
74103
<div class="card-content">
75104
<h3>Agents</h3>
76105
<p>Custom agents for specialized Copilot experiences</p>
77106
</div>
78-
<div class="card-count" data-count="agents" aria-label="Agent count">-</div>
107+
<div
108+
class="card-count"
109+
data-count="agents"
110+
aria-label="Agent count"
111+
>
112+
-
113+
</div>
79114
</a>
80-
<a href={`${base}instructions/`} class="card card-with-count card-category-docs" id="card-instructions" style="--animation-delay: 50ms;">
81-
<div class="card-icon" aria-hidden="true"><Icon name="document" size={40} /></div>
115+
<a
116+
href={`${base}instructions/`}
117+
class="card card-with-count card-category-docs"
118+
id="card-instructions"
119+
style="--animation-delay: 50ms;"
120+
>
121+
<div class="card-icon" aria-hidden="true">
122+
<Icon name="document" size={40} />
123+
</div>
82124
<div class="card-content">
83125
<h3>Instructions</h3>
84126
<p>Coding standards and best practices for Copilot</p>
85127
</div>
86-
<div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
128+
<div
129+
class="card-count"
130+
data-count="instructions"
131+
aria-label="Instruction count"
132+
>
133+
-
134+
</div>
87135
</a>
88-
<a href={`${base}skills/`} class="card card-with-count card-category-power" id="card-skills" style="--animation-delay: 100ms;">
89-
<div class="card-icon" aria-hidden="true"><Icon name="lightning" size={40} /></div>
136+
<a
137+
href={`${base}skills/`}
138+
class="card card-with-count card-category-power"
139+
id="card-skills"
140+
style="--animation-delay: 100ms;"
141+
>
142+
<div class="card-icon" aria-hidden="true">
143+
<Icon name="lightning" size={40} />
144+
</div>
90145
<div class="card-content">
91146
<h3>Skills</h3>
92147
<p>Self-contained folders with instructions and resources</p>
93148
</div>
94-
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
149+
<div
150+
class="card-count"
151+
data-count="skills"
152+
aria-label="Skill count"
153+
>
154+
-
155+
</div>
95156
</a>
96-
<a href={`${base}hooks/`} class="card card-with-count card-category-automation" id="card-hooks" style="--animation-delay: 150ms;">
97-
<div class="card-icon" aria-hidden="true"><Icon name="hook" size={40} /></div>
157+
<a
158+
href={`${base}hooks/`}
159+
class="card card-with-count card-category-automation"
160+
id="card-hooks"
161+
style="--animation-delay: 150ms;"
162+
>
163+
<div class="card-icon" aria-hidden="true">
164+
<Icon name="hook" size={40} />
165+
</div>
98166
<div class="card-content">
99167
<h3>Hooks</h3>
100168
<p>Automated workflows triggered by agent events</p>
101169
</div>
102-
<div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
170+
<div class="card-count" data-count="hooks" aria-label="Hook count">
171+
-
172+
</div>
103173
</a>
104-
<a href={`${base}workflows/`} class="card card-with-count card-category-automation" id="card-workflows" style="--animation-delay: 200ms;">
174+
<a
175+
href={`${base}workflows/`}
176+
class="card card-with-count card-category-automation"
177+
id="card-workflows"
178+
style="--animation-delay: 200ms;"
179+
>
105180
<div class="card-icon" aria-hidden="true">
106181
<Icon name="workflow" size={40} />
107182
</div>
108183
<div class="card-content">
109184
<h3>Workflows</h3>
110185
<p>AI-powered automations for GitHub Actions</p>
111186
</div>
112-
<div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
187+
<div
188+
class="card-count"
189+
data-count="workflows"
190+
aria-label="Workflow count"
191+
>
192+
-
193+
</div>
113194
</a>
114-
<a href={`${base}plugins/`} class="card card-with-count card-category-extension" id="card-plugins" style="--animation-delay: 250ms;">
195+
<a
196+
href={`${base}plugins/`}
197+
class="card card-with-count card-category-extension"
198+
id="card-plugins"
199+
style="--animation-delay: 250ms;"
200+
>
115201
<div class="card-icon" aria-hidden="true">
116202
<Icon name="plug" size={40} />
117203
</div>
118204
<div class="card-content">
119205
<h3>Plugins</h3>
120206
<p>Curated plugins organized by themes</p>
121207
</div>
122-
<div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
208+
<div
209+
class="card-count"
210+
data-count="plugins"
211+
aria-label="Plugin count"
212+
>
213+
-
214+
</div>
123215
</a>
124-
<a href={`${base}tools/`} class="card card-with-count card-category-dev" id="card-tools" style="--animation-delay: 300ms;">
216+
<a
217+
href={`${base}tools/`}
218+
class="card card-with-count card-category-dev"
219+
id="card-tools"
220+
style="--animation-delay: 300ms;"
221+
>
125222
<div class="card-icon" aria-hidden="true">
126223
<Icon name="wrench" size={40} />
127224
</div>
128225
<div class="card-content">
129226
<h3>Tools</h3>
130227
<p>MCP servers and developer tools</p>
131228
</div>
132-
<div class="card-count" data-count="tools" aria-label="Tool count">-</div>
229+
<div class="card-count" data-count="tools" aria-label="Tool count">
230+
-
231+
</div>
133232
</a>
134-
<a href={`${base}learning-hub/`} class="card card-with-count card-category-learn" id="card-learning-hub" style="--animation-delay: 350ms;">
233+
<a
234+
href={`${base}learning-hub/`}
235+
class="card card-with-count card-category-learn"
236+
id="card-learning-hub"
237+
style="--animation-delay: 350ms;"
238+
>
135239
<div class="card-icon" aria-hidden="true">
136240
<Icon name="book" size={40} />
137241
</div>
@@ -143,7 +247,6 @@ const base = import.meta.env.BASE_URL;
143247
</div>
144248
</div>
145249
</section>
146-
147250
</div>
148251

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

154257
<script>
155-
import '../scripts/pages/index';
258+
import "../scripts/pages/index";
156259
</script>
157260
</StarlightPage>

‎website/src/styles/global.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@ body:has(#main-content) {
175175
padding: 0 24px;
176176
}
177177

178+
.main-frame {
179+
padding-top: 0px;
180+
}
181+
178182
#main-content a {
179183
color: var(--color-link);
180184
text-decoration: none;
@@ -200,7 +204,6 @@ body:has(#main-content) {
200204

201205
/* Hero Section */
202206
.hero {
203-
padding: 80px 0 40px;
204207
text-align: center;
205208
position: relative;
206209
background: transparent;
@@ -1876,10 +1879,6 @@ body:has(#main-content) {
18761879
}
18771880

18781881
@media (max-width: 768px) {
1879-
.hero {
1880-
padding: 60px 0 30px;
1881-
}
1882-
18831882
.hero-particle {
18841883
opacity: 0.2;
18851884
}

0 commit comments

Comments
 (0)