1---
 2import { getCollection } from 'astro:content';
 3import Base from '../../layouts/Base.astro';
 4import '../../styles/sub-pages.css';
 5
 6const tutorials = (await getCollection('tutorials'))
 7  .sort((a, b) => a.data.order - b.data.order);
 8---
 9
10<Base
11  title="Tutorials | Impeccable"
12  description="Step-by-step guides for getting started with Impeccable, from first install to live browser iteration."
13  activeNav="docs"
14  canonicalPath="/tutorials"
15  bodyClass="sub-page"
16>
17  <div class="tutorials-index">
18    <header class="tutorials-index-header">
19      <h1 class="sub-page-title">Tutorials</h1>
20      <p class="sub-page-lede">Step-by-step guides, from first install to live browser iteration.</p>
21    </header>
22
23    <div class="tutorials-list">
24      {tutorials.map((t, i) => (
25        <a href={`/tutorials/${t.id}`} class="tutorial-card">
26          <span class="tutorial-card-num">{String(i + 1).padStart(2, '0')}</span>
27          <div>
28            <h2 class="tutorial-card-title">{t.data.title}</h2>
29            <p class="tutorial-card-desc">{t.data.description}</p>
30          </div>
31        </a>
32      ))}
33    </div>
34  </div>
35
36  <style>
37    .tutorials-index { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
38    .tutorials-index-header { margin-bottom: 2rem; }
39    .tutorials-list { display: flex; flex-direction: column; gap: 1rem; }
40    .tutorial-card {
41      display: flex; gap: 1.25rem; align-items: flex-start;
42      padding: 1.25rem; border-radius: 8px; border: 1px solid var(--color-mist);
43      text-decoration: none; color: inherit;
44      transition: border-color 0.15s ease;
45    }
46    .tutorial-card:hover { border-color: var(--color-accent); }
47    .tutorial-card-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ash); flex-shrink: 0; padding-top: 0.125rem; }
48    .tutorial-card-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
49    .tutorial-card-desc { font-size: 0.875rem; color: var(--color-ash); margin: 0; line-height: 1.5; }
50  </style>
51</Base>