mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 21:23:33 +00:00
106 lines
2.4 KiB
Text
106 lines
2.4 KiB
Text
---
|
|
import Layout from "./Layout.astro";
|
|
import TableOfContent from "../components/blocks/TableOfContent.astro";
|
|
import VerticalNav from "../components/blocks/verticalNav.astro";
|
|
import "../assets/styles/remark-callout-directives.css";
|
|
|
|
const { frontmatter, headings } = Astro.props;
|
|
---
|
|
|
|
<Layout title={frontmatter.title} description={frontmatter.description}>
|
|
<div class="mx-auto px-6 max-w-7xl">
|
|
<div class="flex flex-col lg:grid lg:grid-cols-10">
|
|
<!-- vertical navbar -->
|
|
<div class="lg:col-span-2" transition:name="vertical-navbar">
|
|
<aside
|
|
class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
|
>
|
|
<VerticalNav />
|
|
</aside>
|
|
</div>
|
|
<div class="lg:col-span-8">
|
|
<div class="flex flex-col lg:grid lg:grid-cols-10">
|
|
<div class="col-span-8 pr-10 pb-10 pt-8">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
|
>
|
|
<!-- TOC -->
|
|
<TableOfContent headings={headings} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style is:global>
|
|
blockquote {
|
|
@apply my-4 border-l-4 border-gray-500 pl-4;
|
|
}
|
|
|
|
a {
|
|
@apply inline-block text-blue-400 hover:underline;
|
|
}
|
|
|
|
h1 {
|
|
@apply mb-2 text-4xl font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
|
|
}
|
|
|
|
h3 {
|
|
@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
|
|
}
|
|
|
|
h4 {
|
|
@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
|
|
}
|
|
|
|
p {
|
|
@apply mb-2 mt-2 font-[system-ui] leading-6;
|
|
}
|
|
|
|
hr {
|
|
@apply my-10 border-gray-500;
|
|
}
|
|
|
|
ul {
|
|
@apply list-outside list-disc leading-7;
|
|
}
|
|
|
|
code {
|
|
@apply rounded-md bg-[#323232] px-1 py-1 font-[monospace,courier-new] text-sm;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
@apply list-outside leading-7;
|
|
}
|
|
|
|
ul {
|
|
@apply list-disc;
|
|
}
|
|
|
|
ul ul,
|
|
ol ul {
|
|
@apply mb-2 ml-5 list-[circle];
|
|
}
|
|
|
|
ul li,
|
|
ol li {
|
|
@apply mb-1 ml-5;
|
|
}
|
|
|
|
ol {
|
|
@apply ml-5 list-outside list-decimal leading-7;
|
|
}
|
|
</style>
|
|
<script is:inline>
|
|
// make all <a> attributes have target="_blank" except for Table of Contents
|
|
document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
|
|
el.setAttribute("target", "_blank");
|
|
});
|
|
</script>
|
|
</Layout>
|