Major progress on blog page, set defaults
Change-Id: I94ac9d96ff56fdb1b795ef938e37d4e91c4c6bc2
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/678
Tested-by: Samuel Shuert <coded@clicks.codes>
Reviewed-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/layouts/BlogPost.astro b/sites/blog/src/layouts/BlogPost.astro
index e67b2b3..6b96dd7 100644
--- a/sites/blog/src/layouts/BlogPost.astro
+++ b/sites/blog/src/layouts/BlogPost.astro
@@ -1,79 +1,41 @@
---
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 FormattedDate from '../components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data'];
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate } = 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 />
- <main>
- <article>
- <div class="hero-image">
- {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
- </div>
- <div class="prose">
- <div class="title">
- <div class="date">
+ <body class="flex items-center flex-col w-full bg-mantle px-10">
+ <nav class="bg-mantle flex flex-col items-center justify-center py-2 mb-4 group">
+ <a href="/" class="text-text cursor-pointer group-hover:text-text group-hover:bg-surface0 rounded px-4 transition-colors">
+ Home
+ </a>
+ <div class="bg-text h-[2px] w-0 -mt-1 rounded-full group-hover:w-10 transition-all" />
+ </nav>
+ <main class="bg-mantle w-full lg:w-[1024px]">
+ <article class="flex flex-col items-center">
+ <div class="w-11/12 lg:[720px]">
+ <div class="text-left">
+ <h1 class="my-2 text-text">{title}</h1>
+ <div class="text-subtext0 mb-2">
<FormattedDate date={pubDate} />
{
updatedDate && (
- <div class="last-updated-on">
+ <div class="italic">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
- <h1>{title}</h1>
<hr />
</div>
<slot />