personal-website/src/pages/blog/[slug].astro

---
import { getEntry } from "astro:content";
import Layout from "../../layouts/Layout.astro";

const { slug } = Astro.params;
if (!slug) {
    return Astro.redirect("/404");
}

const entry = await getEntry("blog", slug);

if (!entry) {
    return Astro.redirect("/404");
}

const { Content } = await entry.render();
---

<Layout title={entry.data.title}>
    <div class="split-layout">
        <main class="content-workspace">
            <div class="content-container">
                <article class="h-entry">
                    <header class="post-header">
                        <a href="/blog" class="back-link">
                            &larr; Back to Blog
                        </a>

                        <h1 class="p-name">{entry.data.title}</h1>

                        <div class="metadata">
                            <span class="dt-published">
                                {entry.data.pubDate.toISOString().slice(0, 10)}
                            </span>
                            {
                                entry.data.updatedDate && (
                                    <span class="updated-date">
                                        &nbsp;&bull;&nbsp; Updated:{" "}
                                        {entry.data.updatedDate
                                            .toISOString()
                                            .slice(0, 10)}
                                    </span>
                                )
                            }
                        </div>

                        <div class="divider"></div>
                    </header>

                    <div class="e-content">
                        <Content />
                    </div>
                </article>
            </div>
        </main>
    </div>
</Layout>

<style>
    /* Split Layout */
    .split-layout {
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: var(--bg-color);
    }

    /* Content Workspace */
    .content-workspace {
        flex-grow: 1;
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .content-container {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        padding: 4rem 2rem;
        box-sizing: border-box;
    }

    /* Header Styling */
    .post-header {
        margin-bottom: 3rem;
    }

    .back-link {
        display: inline-block;
        margin-bottom: 1.5rem;
        font-family:
            system-ui,
            -apple-system,
            sans-serif;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.2s;
    }

    .back-link:hover {
        color: #fff;
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 800;
        margin: 0 0 1rem 0;
        line-height: 1.2;
        color: #fff;
        letter-spacing: -0.5px;
    }

    .metadata {
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 2rem;
    }

    .divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        width: 100%;
    }

    /* Content Styling (Markdown) */
    .e-content {
        line-height: 1.8;
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
        font-family:
            system-ui,
            -apple-system,
            sans-serif; /* Clean reading font */
    }

    /* Typography Overrides */
    .e-content :global(h1),
    .e-content :global(h2),
    .e-content :global(h3),
    .e-content :global(h4) {
        font-family:
            system-ui,
            -apple-system,
            sans-serif;
        color: #fff;
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .e-content :global(h2) {
        font-size: 1.8rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.5rem;
    }
    .e-content :global(h3) {
        font-size: 1.4rem;
    }

    .e-content :global(p) {
        margin-bottom: 1.5rem;
    }

    .e-content :global(a) {
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        transition: border-color 0.2s;
    }

    .e-content :global(a:hover) {
        border-bottom-color: #fff;
    }

    .e-content :global(ul),
    .e-content :global(ol) {
        margin-bottom: 1.5rem;
        padding-left: 2rem;
    }

    .e-content :global(li) {
        margin-bottom: 0.5rem;
    }

    .e-content :global(blockquote) {
        border-left: 4px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.03);
        margin: 2rem 0;
        padding: 1rem 1.5rem;
        font-style: italic;
        color: rgba(255, 255, 255, 0.8);
    }

    .e-content :global(img) {
        max-width: 100%;
        height: auto;
        border-radius: 8px; /* Softer corners */
        margin: 2rem 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Code Blocks */
    .e-content :global(pre) {
        background: #111 !important; /* Force override */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px; /* Softer corners */
        padding: 1.5rem;
        margin: 2rem 0;
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: 0.9rem;
        line-height: 1.5;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .e-content :global(code) {
        font-family: var(--font-mono);
        background: rgba(255, 255, 255, 0.1);
        padding: 0.2em 0.4em;
        border-radius: 4px;
        font-size: 0.85em;
        color: #fff;
    }

    .e-content :global(pre code) {
        background: none;
        padding: 0;
        color: inherit;
        font-size: 1em;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .split-layout {
            flex-direction: column;
            overflow: hidden;
            height: 100dvh;
        }

        .content-workspace {
            height: auto;
            flex-grow: 1;
            overflow-y: auto;
        }
    }
</style>