<script lang="ts">
  import "../css/reset.css";
  import "../css/vars.css";
  import "../css/typography.css";
  import "../css/color.css";
  import "../css/anchor.css";
  import "../css/list.css";
  import "../css/img.css";
  import "../css/code.css";

  let { children } = $props();
</script>

<main>
  <article>
    {@render children()}
  </article>
</main>

<style>
  main {
    padding-top:    var(--main-spacing);
    padding-bottom: var(--main-spacing);
  }

  article {
    padding:     var(--article-spacing);
    width:       var(--article-width);
    max-width:   calc(100vw - var(--article-spacing) * 2);
    margin:      0 auto;
    font-size:   var(--article-font-size);
    line-height: var(--article-line-height);
  }
</style>