Fixing learning hub hero (#1360)

* Combining the spans

* Removing some excessive padding

website/src/pages/index.astro

@@ -1,28 +1,28 @@
 ---
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import Modal from '../components/Modal.astro';
+import Modal from "../components/Modal.astro";
-import Icon from '../components/Icon.astro';
+import Icon from "../components/Icon.astro";
-import BackToTop from '../components/BackToTop.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',
+      "Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience",
-    template: 'splash',
+    template: "splash",
     pagefind: false,
     prev: false,
     next: false,
     editUrl: false,
     head: [
       {
-        tag: 'meta',
+        tag: "meta",
         attrs: {
-          property: 'og:type',
+          property: "og:type",
-          content: 'website',
+          content: "website",
         },
       },
     ],
@@ -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">Awesome GitHub Copilot</span>
-          <span class="gradient-text-alt">GitHub Copilot</span>
         </h1>
-        <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">
@@ -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
-              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                viewBox="0 0 24 24"
-                <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"/>
+                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>
@@ -69,39 +91,92 @@ 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;">
+          <a
-            <div class="card-icon" aria-hidden="true"><Icon name="robot" size={40} /></div>
+            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;">
+          <a
-            <div class="card-icon" aria-hidden="true"><Icon name="document" size={40} /></div>
+            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;">
+          <a
-            <div class="card-icon" aria-hidden="true"><Icon name="lightning" size={40} /></div>
+            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;">
+          <a
-            <div class="card-icon" aria-hidden="true"><Icon name="hook" size={40} /></div>
+            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>
@@ -109,9 +184,20 @@ const base = import.meta.env.BASE_URL;
               <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>
@@ -119,9 +205,20 @@ const base = import.meta.env.BASE_URL;
               <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>
@@ -129,9 +226,16 @@ const base = import.meta.env.BASE_URL;
               <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>
@@ -143,7 +247,6 @@ const base = import.meta.env.BASE_URL;
         </div>
       </div>
     </section>
-
   </div>
 
   <Modal />
@@ -152,6 +255,6 @@ const base = import.meta.env.BASE_URL;
   <BackToTop />
 
   <script>
-    import '../scripts/pages/index';
+    import "../scripts/pages/index";
   </script>
 </StarlightPage>

website/src/styles/global.css

@@ -175,6 +175,10 @@ body:has(#main-content) {
   padding: 0 24px;
 }
 
+.main-frame {
+  padding-top: 0px;
+}
+
 #main-content a {
   color: var(--color-link);
   text-decoration: none;
@@ -200,7 +204,6 @@ body:has(#main-content) {
 
 /* Hero Section */
 .hero {
-  padding: 80px 0 40px;
   text-align: center;
   position: relative;
   background: transparent;
@@ -1876,10 +1879,6 @@ body:has(#main-content) {
 }
 
 @media (max-width: 768px) {
-  .hero {
-    padding: 60px 0 30px;
-  }
-
   .hero-particle {
     opacity: 0.2;
   }