---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

export interface Props {
  title: string;
  description: string;
  permalink: string;
  current?: string;
}
const { title, description, permalink, current } = Astro.props;
---
<html lang="en">
<head>
  <BaseHead title={title} description={description} permalink={permalink} />
</head>
<body>
  <div class="layout">
    <Header current={current} />

    <main>
      <slot />
    </main>

    <Footer />
  </div>
</body>
</html>

<style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
  }

  main {
    flex: 1;
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    padding: 1em 2em;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
