sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 update blogpost ui

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-03-17 14:58:49 +01:00
parent d82120d904
commit 8a3970e783
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 53 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/BlogContainer.astro Normal file
View file

@ -0,0 +1,21 @@
---
import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---
<!DOCTYPE html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0">
<div class="flex flex-col h-screen">
<BlogHeader title={SITE_TITLE} />
<slot class="flex-1"/>
</div>
</section>
</body>
</html>

29
src/components/BlogHeader.astro Normal file
View file

@ -0,0 +1,29 @@
---
import ThemeIcon from './ThemeIcon.astro';
function toggleTheme() {
const currentTheme = document.body.getAttribute('data-theme');
document.body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}
---
<header class="flex justify-between items-center py-5">
<div>
<a class="text-l font-semibold" href="/blog">
<svg class="w-6 h-6 text-gray-800 dark:text-white" style="color: var(--color-current);" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
</svg>
</a>
</div>
<ThemeIcon />
</header>
<style>
[data-theme='dark'] {
--color-current: #9AD3BB;
}
[data-theme='light'] {
--color-current: #3B2C29;
}
</style>

6
src/layouts/BlogPost.astro
View file

@ -1,7 +1,7 @@
---
import type { CollectionEntry } from 'astro:content';
import FormattedDate from '../components/FormattedDate.astro';
import SectionContainer from '../components/SectionContainer.astro';
import BlogContainer from '../components/BlogContainer.astro';
type Props = CollectionEntry<'blog'>['data'];
@ -23,7 +23,7 @@ const { title, description, pubDate } = Astro.props;
}
</script>
<SectionContainer>
<BlogContainer>
<main class="flex flex-col flex-1 mb-auto break-words mt-4">
<article class="flex flex-col gap-1">
<h1 class="text-4xl font-extrabold">{title}</h1>
@ -37,4 +37,4 @@ const { title, description, pubDate } = Astro.props;
</div>
</article>
</main>
</SectionContainer>
</BlogContainer>