mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
ccf3573579
The Astro migration (b8f09c8) replaced the old generator's
`<section class="skill-detail-editorial prose">` wrapper with
`<div class="skills-detail-body docs-body">`, dropping the prose
class. The .prose rules in sub-pages.css were left intact but no
longer applied, so markdown bodies fell back to default browser
margins — heading top-margin shrank from 2.2em to ~0.83em and
line-height from 1.7 to 1.6, which read as cramped vertical
rhythm on mobile.
Co-authored-by: Claude <noreply@anthropic.com>
50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
---
|
|
import { getCollection, render } from 'astro:content';
|
|
import Base from '../../layouts/Base.astro';
|
|
import '../../styles/sub-pages.css';
|
|
|
|
export async function getStaticPaths() {
|
|
const entries = await getCollection('tutorials');
|
|
return entries.map(entry => ({
|
|
params: { slug: entry.id },
|
|
props: { entry },
|
|
}));
|
|
}
|
|
|
|
const { entry } = Astro.props;
|
|
const { Content } = await render(entry);
|
|
---
|
|
|
|
<Base
|
|
title={`${entry.data.title} | Impeccable`}
|
|
description={entry.data.description}
|
|
activeNav="docs"
|
|
canonicalPath={`/tutorials/${entry.id}`}
|
|
bodyClass="sub-page"
|
|
>
|
|
<div class="tutorial-page">
|
|
<nav class="skills-breadcrumb" aria-label="Breadcrumb">
|
|
<a href="/docs">Docs</a>
|
|
<span aria-hidden="true">/</span>
|
|
<a href="/tutorials">Tutorials</a>
|
|
<span aria-hidden="true">/</span>
|
|
<span>{entry.data.title}</span>
|
|
</nav>
|
|
|
|
<header class="sub-page-header">
|
|
<span class="sub-page-eyebrow">Tutorial</span>
|
|
<h1 class="sub-page-title">{entry.data.title}</h1>
|
|
{entry.data.tagline && <p class="sub-page-lede">{entry.data.tagline}</p>}
|
|
</header>
|
|
|
|
<div class="skills-detail-body docs-body tutorial-body prose">
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.tutorial-page { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
|
|
.tutorial-body { margin-top: 2rem; }
|
|
</style>
|
|
</Base>
|