---
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">
<div>
<div class="__toc">
<Toc />
</div>
</div>
<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;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
.__container {
display: flex;
flex-direction: row;
gap: 24px;
}
.__toc {
flex: 0 0 200px;
}
.__content {
flex: 1 1 auto;
}
@media (max-width: 767px) {
.__container {
flex-direction: column;
}
.__toc {
flex: none;
width: auto;
}
}
</style>
