From 6b8124d810eae9a19862eed901344fb2f9f10a0b Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sat, 12 Apr 2025 19:04:05 +0200
Subject: [PATCH] feat: use social icons

---
 src/components/Card.astro   |  1 +
 src/components/Footer.astro | 14 +++++++-------
 src/constants/links.ts      |  4 +++-
 src/pages/index.astro       |  5 +++--
 src/pages/showcase.astro    |  2 +-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 92ebdc3..30ec692 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -54,6 +54,7 @@ const { href, title, rel, body, newTab = false } = Astro.props
 
   h2 {
     margin: 0;
+    font-size: var(--font-size-base);
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
 
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 58267eb..5b74298 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -18,17 +18,11 @@ const year = new Date().getFullYear()
     <li>
       <a href="/showcase">Some Projects</a>
     </li>
-    <li>
-      <a href="https://ayos.blog/talks">Talks</a>
-    </li>
-    <li>
-      <a href="https://ayos.blog/projects">More Projects</a>
-    </li>
   </ul>
   <ul>
     {
       links.map((linkObj) => (
-        <li>
+        <li title={linkObj.text}>
           <a href={linkObj.url}>
             <Icon pack={linkObj.set ?? 'mdi'} name={linkObj.icon} />
           </a>
@@ -46,6 +40,12 @@ const year = new Date().getFullYear()
 </footer>
 
 <style>
+  a {
+    color: var(--text-color-dark);
+    &:hover {
+      color: var(--color-brand-blue-5);
+    }
+  }
   footer {
     margin-top: 2em;
     padding: 0;
diff --git a/src/constants/links.ts b/src/constants/links.ts
index 40c904a..eea47a8 100644
--- a/src/constants/links.ts
+++ b/src/constants/links.ts
@@ -40,6 +40,7 @@ export const footerLinks: Link[] = [
     text: 'SourceHut',
     url: 'https://sr.ht/~ayoayco',
     icon: 'sourcehut',
+    set: 'simple-icons',
   },
   {
     text: 'GitHub',
@@ -54,7 +55,8 @@ export const footerLinks: Link[] = [
   {
     text: 'Pixelfed',
     url: 'https://metapixl.com/@ayo',
-    icon: 'pixelfed',
+    icon: 'pixelfed-fill',
+    set: 'ri',
   },
   {
     text: 'SoundCloud',
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d433a0d..a34cf8d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -41,8 +41,8 @@ import now from '../constants/now.json'
       <ul class="cards-section__grid">
         <Card
           href="showcase"
-          title="Hobby Projects"
-          body="See demos of my hobby projects"
+          title="Showcase"
+          body="See links to my hobby projects"
         />
         <Card
           newTab={true}
@@ -151,6 +151,7 @@ import now from '../constants/now.json'
 
   .cards-section__grid {
     display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
     gap: 1rem;
     padding: 0;
   }
diff --git a/src/pages/showcase.astro b/src/pages/showcase.astro
index 643380e..4d8edbc 100644
--- a/src/pages/showcase.astro
+++ b/src/pages/showcase.astro
@@ -5,7 +5,7 @@ import Card from '../components/Card.astro'
 ---
 
 <Layout
-  title="Fun Hobby Projects"
+  title="Showcase"
   description="See demos of hobby projects Ayo Ayco created"
 >
   <main>