---
import FediLogo from "@/assets/Fediverse_logo_proposal.svg"
import GitLogo from "@/assets/git-icon-logo-svgrepo-com.svg"
import MatrixLogo from "@/assets/Matrix_icon.svg"

const {homeUrl, blogUrl} = Astro.props;
---

<header>
  <img src="/mainpicture.jpg" />
  <div id="brand-container">
    <p>SmolBeaver.it</p>
    <div>
      <nav>
	<a href={homeUrl}>home</a>
	<a href={blogUrl}>blog</a>
      </nav>
      <div id="find-me-at-container">
	<a><MatrixLogo /></a>
	<a><GitLogo /></a>
	<a><FediLogo /></a>
      </div>
    </div>
  </div>
</header>

<style>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

header > img {
  width: 128px;
  height: 128px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

header > #brand-container {
  max-width: 300px;
}

header > #brand-container > p {
  padding: 0;
  
  color: #8e5f35 ;
  font-size: 42px;
}

header > #brand-container > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header > #brand-container > div > #find-me-at-container > a > svg {
  width: 24px;
  height: 24px;
}

 header > #brand-container > div > nav > a:visited, header > #brand-container > div > nav > a {
  color: #A0724A;
}
</style>
