TextOutline text

---
interface Props {
  text: string;
  sub?: string;
}
const { text = "GROEI", sub = "Dat is waar alles om draait." } = Astro.props;
---

<div class="tx-outline">
  <p class="tx-outline__text">{text}</p>
  {sub && <p class="tx-outline__sub">{sub}</p>}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-outline {
    text-align: center;
    padding: 2rem 0;
  }
  .tx-outline__text {
    margin: 0 0 0.5rem;
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    text-stroke: 2px var(--color-primary);
  }
  .tx-outline__sub {
    margin: 0;
    font-size: 1rem;
    color: #777;
  }
</style>