---
import HeaderLink from "./HeaderLink.astro";
import { SITE_TITLE, SITE_BASE } from "../consts";
---

<header>
  <nav>
    <h2><a href={SITE_BASE}>{SITE_TITLE}</a></h2>
    <div class="internal-links">
      <HeaderLink href="/">Home</HeaderLink>
      <HeaderLink href="/blog">Blog</HeaderLink>
    </div>
    <div class="social-links"></div>
  </nav>
</header>
<style>
  header {
    margin: 0;
    padding: 0 1em;
    background: white;
    box-shadow: 0 2px 8px rgba(var(--black), 5%);
  }
  h2 {
    margin: 0;
    font-size: 1em;
  }

  h2 a,
  h2 a.active {
    text-decoration: none;
  }
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  nav a {
    padding: 1em 0.5em;
    color: var(--black);
    border-bottom: 4px solid transparent;
    text-decoration: none;
  }
  nav a.active {
    text-decoration: none;
    border-bottom-color: var(--accent);
  }
  .social-links,
  .social-links a {
    display: flex;
  }
  @media (max-width: 720px) {
    .social-links {
      display: none;
    }
  }
</style>