feat: back-to-top, footer, about page, responsive design, etc.

(cherry picked from commit 21319d339305c77311d42aa18501d425a5a2619c)
This commit is contained in:
saicaca
2023-09-29 11:58:14 +08:00
parent 124843848f
commit 8ed0aa071f
14 changed files with 127 additions and 20 deletions

20
src/pages/about.astro Normal file
View File

@@ -0,0 +1,20 @@
---
import MainGridLayout from "../layouts/MainGridLayout.astro";
import { getEntry } from 'astro:content'
const aboutPost = await getEntry('spec', 'about')
const { Content } = await aboutPost.render()
---
<MainGridLayout>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-[120px]">
<div class="card-base z-10 px-9 py-6 relative w-full ">
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
<Content />
</div>
</div>
</div>
</MainGridLayout>

View File

@@ -30,13 +30,13 @@ const { remarkPluginFrontmatter } = await entry.render();
]}>
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition">
<div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/5 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:notes-rounded"></Icon>
</div>
<div class="text-sm">{remarkPluginFrontmatter.words} words</div>
</div>
<div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/5 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:schedule-outline-rounded"></Icon>
</div>
<div class="text-sm">{remarkPluginFrontmatter.minutes} minutes</div>
@@ -59,7 +59,7 @@ const { remarkPluginFrontmatter } = await entry.render();
categories={entry.data.categories}
></PostMetadata>
<div class="border-b-black/8 dark:border-b-white/8 border-dashed border-b-[1px] mb-5"></div>
<div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
<Content />