blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Finished blog post styling

Browse Source 
Light & Dark mode; on sizes <sm to 2xl+
This commit is contained in:
Blboun3
2024-05-31 07:49:15 +02:00
parent ea25e69277
commit 1f06060124
7 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/layouts/BlogPost.astro
View File

@ -1,7 +1,6 @@
---
import type { CollectionEntry } from "astro:content";
import FormattedDate from "../components/FormattedDate.astro";
import SinglePage from "./SinglePage.astro";
import SinglePageBlogMode from "./SinglePageBlogMode.astro";
import MainLayout from "./MainLayout.astro";
type Props = CollectionEntry<"blog">["data"];
@ -14,7 +13,7 @@ const { title, description, language } = Astro.props;
description={description}
lang={language}
>
<SinglePage>
<SinglePageBlogMode>
<slot />
</SinglePage>
</SinglePageBlogMode>
</MainLayout>

2
src/layouts/SinglePage.astro
View File

@ -1,7 +1,7 @@
<div class="snap-start h-screen overflow-clip pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
>
<slot />
</div>

9
src/layouts/SinglePageBlogMode.astro Normal file
View File

@ -0,0 +1,9 @@
<div class="h-screen pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
>
<slot />
</div>
</div>
</div>