radiatingstar/radiatingstar.com

---
import { SITE_TITLE } from "../consts";
---

<div class="flex justify-between items-center">
  <div class="flex items-center gap-8">
    <a href="/" class="relative w-16 h-16 group">
      <span class="sr-only">{SITE_TITLE}</span>
      <svg
        viewBox="0 0 150 150"
        xmlns="http://www.w3.org/2000/svg"
        class="group-hover:scale-105 group-hover:rotate-3 transition-transform"
      >
        <defs>
          <linearGradient id="background" gradientTransform="rotate(45)">
            <stop offset="0%" stop-color="hsl(var(--primary-red))"></stop>
            <stop offset="100%" stop-color="hsl(var(--primary-pink))"></stop>
          </linearGradient>
        </defs>
        <path
          d="
            M 0, 75
            C 0, 6.749999999999997 6.749999999999997, 0 75, 0
            S 150, 6.749999999999997 150, 75
            143.25, 150 75, 150
            0, 143.25 0, 75"
          fill="url('#background')"></path>
      </svg>
      <svg
        class="absolute inset-4 w-8 h-8 text-white group-hover:scale-105 group-hover:rotate-3 transition-transform"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 576 512"
      >
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path
          fill="currentColor"
          d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"
        >
        </path>
      </svg>
    </a>
    <nav class="flex gap-2 font-black">
      <a
        href="/tags/css"
        class="bg-foreground font-nunito font-black bg-clip-text text-transparent hover:bg-gradient-to-r hover:from-primary-red hover:to-primary-pink"
        >#css</a
      >
      <a
        href="/tags/javascript"
        class="bg-foreground font-nunito font-black bg-clip-text text-transparent hover:bg-gradient-to-r hover:from-primary-red hover:to-primary-pink"
        >#javascript</a
      >
      <a
        href="/tags/tailwind"
        class="bg-foreground font-nunito font-black bg-clip-text text-transparent hover:bg-gradient-to-r hover:from-primary-red hover:to-primary-pink"
        >#tailwind</a
      >
      <a
        href="/tags"
        class="bg-foreground font-nunito font-black bg-clip-text text-transparent hover:bg-gradient-to-r hover:from-primary-red hover:to-primary-pink"
        >...tags</a
      >
    </nav>
  </div>
  <!--<nav>-->
  <!--  <ul class="flex gap-8 font-nunito">-->
  <!--    {-->
  <!--      [-->
  <!--        ["/blog", "Blog"],-->
  <!--      ].map(([url, text]) => (-->
  <!--        <li>-->
  <!--          <a href={url} class="text-foreground hover:text-primary-red">-->
  <!--            {text}-->
  <!--          </a>-->
  <!--        </li>-->
  <!--      ))-->
  <!--    }-->
  <!--  </ul>-->
  <!--</nav>-->
</div>