50 lines
2.3 KiB
Plaintext
50 lines
2.3 KiB
Plaintext
---
|
|
import BaseLayout from './BaseLayout.astro';
|
|
import PageHero from '../components/PageHero.astro';
|
|
import { getPublication } from '../utils/publication';
|
|
|
|
interface Props {
|
|
title: string;
|
|
heading?: string;
|
|
description: string;
|
|
intro?: string[];
|
|
lang?: 'en' | 'ar' | 'es';
|
|
}
|
|
|
|
const { title, heading, description, intro = [], lang = 'en' } = Astro.props;
|
|
const { entry } = await getPublication(Astro.url.pathname);
|
|
---
|
|
<BaseLayout title={title} description={description} lang={lang}>
|
|
<PageHero title={entry.data.displayH1 ?? heading ?? title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
|
|
<section class="library-intro">
|
|
<div class="container">
|
|
<h2>Library</h2>
|
|
{intro.length ? intro.map((paragraph) => <p>{paragraph}</p>) : <p>{description}</p>}
|
|
</div>
|
|
</section>
|
|
<div class="container section library-layout"><slot /></div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
:global(.library-intro) { background: var(--color-primary); color: white; padding-block: 3rem; }
|
|
:global(.library-intro h2) { color: white; }
|
|
:global(.library-layout) { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 240px; }
|
|
:global(.library-sidebar) { position: sticky; top: 1rem; }
|
|
:global(.library-sidebar h2) { font-size: 1.1rem; margin-top: 2rem; }
|
|
:global(.library-sidebar ul) { list-style: none; padding: 0; }
|
|
:global(.library-sidebar li) { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
|
|
:global(.library-sidebar a) { color: var(--color-primary); font-size: .9rem; }
|
|
:global(.blog-list) { display: block; }
|
|
:global(.library-search-results[hidden]), :global(.library-archive[hidden]), :global(.blog-list[hidden]) { display: none; }
|
|
:global(.library-search-results h2) { margin-top: 0; }
|
|
:global(.library-search-result) { border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; padding-bottom: 1.5rem; }
|
|
:global(.library-search-result h3) { font-family: var(--font-body); margin-bottom: .65rem; }
|
|
:global(.library-search-result p) { margin-bottom: .65rem; }
|
|
:global(.library-search-result__meta) { font-size: .85rem; }
|
|
:global(.library-search-results__pager) { display: flex; gap: .75rem; }
|
|
@media (max-width: 760px) {
|
|
:global(.library-layout) { grid-template-columns: 1fr; }
|
|
:global(.library-sidebar) { position: static; }
|
|
}
|
|
</style>
|