kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: finish page layout of Haiku detail

Browse Source
This commit is contained in:
Stefan Imhoff
2023-04-25 19:06:45 +02:00
parent 4635ea5f59
commit 94bc8f7d84
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/haiku/[...slug].astro
View File

@@ -2,6 +2,7 @@
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import PageHeader from '../../components/PageHeader.astro';
import { Verse } from '../../components';
export async function getStaticPaths() {
@@ -15,7 +16,30 @@ export async function getStaticPaths() {
const { entry } = Astro.props;
---
<BaseLayout title={`Haiku ${entry.slug}`} backLink="/haiku/" navigation={false} footer={false}>
<Verse>{entry.data.de}</Verse>
<Verse>{entry.data.en}</Verse>
<BaseLayout title={`Haiku ${entry.slug}`} header={false} footer={false}>
<div class="grid h-full grid-cols-18 grid-rows-haiku">
<PageHeader
class="!mbe-0 z-10 col-span-full row-start-1"
navigation={false}
backLink="/haiku/"
/>
<div
class="col-span-full row-start-1 row-end-3 grid w-full grid-cols-haiku haiku:grid-cols-haiku-xl"
>
<div class="grid h-full w-full items-center">
<Verse
class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
>
{entry.data.de}
</Verse>
</div>
<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
<Verse
class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
>
{entry.data.en}
</Verse>
</div>
</div>
</div>
</BaseLayout>

4
tailwind.config.cjs
View File

@@ -9,6 +9,7 @@ module.exports = {
md: '768px',
xl: '1280px',
'3xl': '1800px',
haiku: '25rem',
},
colors: {
accent: '#e60510',
@@ -48,9 +49,12 @@ module.exports = {
16: 'repeat(16, minmax(0, 1fr))',
18: 'repeat(18, minmax(0, 1fr))',
books: 'repeat(auto-fill, minmax(150px, 1fr))',
haiku: 'repeat(auto-fit, minmax(15rem, 1fr))',
'haiku-xl': 'repeat(auto-fit, minmax(25rem, 1fr))',
},
gridTemplateRows: ({ theme }) => ({
layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,
haiku: `clamp(3rem, ${theme('spacing.column')}, 9rem) 1fr`,
}),
columns: {
13: '13',