Basically finishes styling

This commit is contained in:
2025-06-21 21:40:40 -07:00
parent 2ad5e29cad
commit 0daac5bba4
33 changed files with 412 additions and 569 deletions

View File

@@ -1,8 +1,6 @@
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import RootLayout from '../layouts/RootLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Image } from 'astro:assets';
@@ -11,52 +9,7 @@ type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
color: rgb(var(--gray-dark));
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
</style>
</head>
<body>
<Header />
<RootLayout title={title} description={description}>
<main>
<article>
<div class="hero-image">
@@ -81,6 +34,4 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</div>
</article>
</main>
<Footer />
</body>
</html>
</RootLayout>