troylusty.com/src/components/Header.astro

---
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
---

<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
  <div
    class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
  >
    <a class="inline-flex items-center" href="/" title={SITE.TITLE}>
      <Icon
        name="icon"
        title={SITE.TITLE}
        class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
      />
      <div
        class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
      >
        Troy Lusty
      </div>
    </a>
  </div>
</header>