---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
---

<Layout
  title="Social Links"
  description="Connect with Ayo Ayco on various social platforms"
>
  <main>
    <h1>Social <span class="text-gradient">Links</span></h1>
    <ul role="list" class="link-card-grid">
      <Card
        newTab={true}
        rel="me"
        href="/mastodon"
        title="#Fediverse"
        body="Follow my social microblog"
      />
      <Card
        newTab={true}
        rel="me"
        href="/linkedin"
        title="LinkedIn"
        body="Connect with me and my professional network"
      />
      <Card
        newTab={true}
        rel="me"
        href="/soundcloud"
        title="SoundCloud"
        body="Some music I made as a hobby"
      />
    </ul>
    <Footer />
  </main>
</Layout>

<style>

  .highlighted-content {
    margin: 1rem 0;
    background: #4f39fa;
    padding: 1rem;
    border-radius: 0.4rem;
    color: var(--color-bg);
  }

  .highlighted-content code {
    font-size: var(--font-size-base);
    border: 0.1em solid var(--color-border);
    border-radius: 4px;
    padding: 0.15em 0.25em;
  }

  .link-card-grid {
    display: grid;
    gap: 1rem;
    padding: 0;
  }
</style>