feat: use social icons

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);
   }
 

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;

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',

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"
+          title="Showcase"
-          body="See demos of my hobby projects"
+          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;
   }

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>