Newer
Older
hello-programmer-world / src / layouts / MarkdownLayout.astro
@h.sakamoto h.sakamoto on 17 Dec 818 bytes layout
---
import "github-markdown-css";
import Toc from "../components/Toc.astro";
---

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body class="markdown-body">
    <div class="__container">
      <Toc />
      <div class="__content">
        <slot />
      </div>
    </div>
  </body>
</html>

<style>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    <!-- padding: 45px; -->
  }
  .__container {
    display: grid;
    grid-template-columns: 200px calc(100% - 200px);
    margin: 16px;

    padding: 32px;
    position: relative;
  }

  @media (max-width: 767px) {
    .__container {
      grid-template-columns: 100%;
      padding: 16px;
    }
  }
</style>