website-astro/src/components/EditorialContent.astro

56 lines
1.1 KiB
Plaintext

---
import MetaDate from "./MetaDate.astro";
import TOC from "./TOC.astro";
const { content } = Astro.props;
const { Content, headings } = await content.render();
const toc = headings.map((heading) => {
return heading;
});
// if (content.data.code) {
// import "../styles/vendor/one-dark-pro.css";
// }
---
<div class="sidebar region">
<TOC toc={toc} />
<article class="flow editorial">
<h1>{content.data.title}</h1>
<p class="h3">{content.data.subtitle}</p>
<MetaDate item={content.data} />
<div class="flow content">
<Content />
</div>
</article>
</div>
<style>
.sidebar {
--gutter: var(--space-xs-m);
}
.sidebar > :global(:first-child) {
--sidebar-target-width: 16rem;
}
.sidebar > :global(:last-child) {
--sidebar-content-min-width: 60%;
}
h1 {
font-size: var(--size-4);
}
.editorial :global(h2),
.editorial :global(.h2) {
font-size: var(--size-3);
color: var(--color-blue);
}
.editorial :global(img),
.editorial :global(picture) {
margin: var(--space-s-m) 0;
}
.content :global(p + p) {
margin-block-start: var(--space-s);
}
</style>