init

src/layouts/ProseLayout.astro

@@ -0,0 +1,118 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<BaseLayout title={frontmatter.title} description={frontmatter.description}>
+  <main class="main">
+    <a href="/" class="back">← Home</a>
+    <div class="content">
+      <slot />
+      <script>
+        document.querySelectorAll('[data-obf]').forEach(el => {
+          el.textContent = atob((el as HTMLElement).dataset.obf!);
+        });
+        document.querySelectorAll('[data-obf-href]').forEach(el => {
+          (el as HTMLAnchorElement).href = atob((el as HTMLElement).dataset.obfHref!);
+        });
+      </script>
+    </div>
+  </main>
+</BaseLayout>
+
+<style>
+  .main {
+    max-width: var(--width-prose);
+    margin: 0 auto;
+    padding: 2rem 2rem 4rem;
+    width: 100%;
+  }
+
+  .back {
+    display: inline-block;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+    color: #555;
+    text-decoration: none;
+  }
+
+  .back:hover {
+    color: var(--accent);
+  }
+
+  .content {
+    font-size: 1rem;
+    line-height: 1.75;
+    color: #333;
+  }
+
+  .content :global(h1) {
+    font-size: 1.75rem;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin-bottom: 2rem;
+    color: #111;
+  }
+
+  .content :global(h2) {
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #888;
+    margin: 2rem 0 0.75rem;
+    padding-bottom: 0.4rem;
+    border-bottom: 2px solid #111;
+  }
+
+  .content :global(h3) {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 1.5rem 0 0.5rem;
+    color: #111;
+  }
+
+  .content :global(p) {
+    margin-bottom: 1.25rem;
+  }
+
+  .content :global(ul),
+  .content :global(ol) {
+    margin-bottom: 1.25rem;
+    padding-left: 1.5rem;
+  }
+
+  .content :global(li) {
+    margin-bottom: 0.4rem;
+  }
+
+  .content :global(strong) {
+    font-weight: 600;
+    color: #111;
+  }
+
+  .content :global(a) {
+    color: var(--accent);
+    text-underline-offset: 3px;
+  }
+
+  .content :global(code) {
+    font-family: monospace;
+    font-size: 0.9rem;
+    background: #eeeeed;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+  }
+
+  .content :global(.r) {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+
+  .content :global(hr) {
+    border: none;
+    border-top: 1px solid #ddd;
+    margin: 2rem 0;
+  }
+</style>