pantosite/src/components/Header.astro

---
import { ClientRouter } from "astro:transitions";
import HeaderLink from "./HeaderLink.astro";
import Socials from "./Socials.astro";
---

<header>
  <nav class="head">
	  <a class="logo" href="/">
	    <img src="/logo.svg" alt="ಠ_ಠ" />
	  </a>
    <Socials/>
	</nav>
  <nav class="internal-links">
    <HeaderLink href="/projects">Projects</HeaderLink>
    <HeaderLink href="/photography">Photography</HeaderLink>
    <HeaderLink href="/blog">Blog</HeaderLink>
  </nav>
</header>

<ClientRouter />

<style>
	header {
		margin: 0;
    padding: .5em 1em;
		width: 100%;
    background-color: var(--background-soft);

    display: flex;
    flex-direction: row;
		align-items: center;
  }

  nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

	header .logo {
		display: flex;
		align-items: center;
	}

	header .logo a {
		margin: 0;
	}

	header .logo img {
		height: 24pt;
	}

  .internal-links {

    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    left: 0; 
    right: 0; 
  }

  .internal-links a {
		padding: .4em 0.5em;
		color: var(--text);
		border-bottom: 4px solid transparent;
		text-decoration: none;
  }

  .internal-links a.active {
		text-decoration: none;
		border-bottom-color: var(--primary);
	}

  @media (max-width: 720px) {
    header {
      flex-direction: column;
      padding: 0;
    }

	  header .logo img {
	    height: 18pt;
    }

    nav.head {
      padding: .5em 1em;
    }

    .internal-links {
      border-top: var(--background) 1px solid;
      position: relative;
    }
	}
</style>