mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Abdul WahabandGitHub
cec76bb681
* Fix designing live context alignment * Center dark theme toggle icon * Tighten designing avoid list spacing * Tighten remaining site marker spacing
52 lines
2.1 KiB
Plaintext
52 lines
2.1 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import Base from '../../layouts/Base.astro';
|
|
import '../../styles/sub-pages.css';
|
|
|
|
const tutorials = (await getCollection('tutorials'))
|
|
.sort((a, b) => a.data.order - b.data.order);
|
|
---
|
|
|
|
<Base
|
|
title="Tutorials | Impeccable"
|
|
description="Step-by-step guides for getting started with Impeccable, from first install to live browser iteration."
|
|
activeNav="docs"
|
|
canonicalPath="/tutorials"
|
|
bodyClass="sub-page kinpaku-chrome kinpaku-surface"
|
|
>
|
|
<div class="tutorials-index">
|
|
<header class="tutorials-index-header">
|
|
<h1 class="sub-page-title">Tutorials</h1>
|
|
<p class="sub-page-lede">Step-by-step guides, from first install to live browser iteration.</p>
|
|
</header>
|
|
|
|
<div class="tutorials-list">
|
|
{tutorials.map((t, i) => (
|
|
<a href={`/tutorials/${t.id}`} class="tutorial-card">
|
|
<span class="tutorial-card-num">{String(i + 1).padStart(2, '0')}</span>
|
|
<div>
|
|
<h2 class="tutorial-card-title">{t.data.title}</h2>
|
|
<p class="tutorial-card-desc">{t.data.description}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.tutorials-index { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
|
|
.tutorials-index-header { margin-bottom: 2rem; }
|
|
.tutorials-list { display: flex; flex-direction: column; gap: 1rem; }
|
|
.tutorial-card {
|
|
display: flex; gap: 0.75rem; align-items: flex-start;
|
|
padding: 1.25rem; border-radius: 8px; border: 1px solid var(--color-mist);
|
|
text-decoration: none; color: inherit;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
.tutorial-card:hover { border-color: var(--color-accent); }
|
|
.tutorial-card-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ash); flex-shrink: 0; padding-top: 0.125rem; }
|
|
.tutorial-card-title { font-family: var(--font-body); font-style: normal; font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--color-ink); }
|
|
.tutorial-card-desc { font-size: 0.875rem; color: var(--color-ash); margin: 0; line-height: 1.5; }
|
|
</style>
|
|
</Base>
|