<script>
  import { _ } from "$lib/locale.js";
  let { picture, title } = $props();
</script>

<header>
  <div style="--length: {title.length + 1}">
    <h1>{title}<span>_</span></h1>
  </div>
  <img src="/assets/{picture}.png" alt="" />
</header>

<style>
  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    background: var(--transparent);
  }

  header div {
    padding: 100px 40px 10px 40px;
    color: var(--color);
    font-size: var(--size-6);
    font-family:
      Consolas,
      Monaco,
      Lucida Console,
      Liberation Mono,
      DejaVu Sans Mono,
      Bitstream Vera Sans Mono,
      Courier New,
      monospace;
    white-space: nowrap;
  }

  header div h1 {
    text-shadow: var(--text-shadow);
    overflow: hidden;
    white-space: nowrap;
    animation: typing 0.8s steps(var(--length), end);
  }

  header div span {
    content: "_";
    display: inline-block;
    animation: blink 1.5s steps(2) infinite;
  }

  header img {
    width: 220px;
    padding: 50px 50px 0 50px;
  }

  @media only screen and (max-width: 900px) {
    header img {
      display: none;
    }
  }
</style>
