Starting to work on blog

1 files changed, 50 insertions, 0 deletions

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..60baee6
--- /dev/null
+++ b/src/layouts/BlogPost.astro
@@ -0,0 +1,50 @@
+---
+import Layout from './Default.astro';
+const { title, description } = Astro.props;
+---
+
+<Layout title=`${title} - Andrew Lee` description={description}>
+    <header>
+        <h1 class="header-text">{title}</h1>
+        <h2 class="header-text">{description}</h2>
+    </header>
+    <div class="container">
+        <main>
+            <article>
+                <slot />
+            </article>
+        </main>
+    </div>
+</Layout>
+
+<style>
+    header {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        margin: 0;
+        text-align: center;
+        padding: 0 0 1em;
+    }
+
+    .header-text {
+        font-size: 2em;
+        margin: 0;
+    }
+
+    h2.header-text {
+        font-size: 1.5em;
+        font-weight: 300;
+    }
+
+    .container {
+        margin: 1em 10em 1em 10em;
+    }
+
+    @media (max-width: 992px) {
+        .container {
+            margin: 10px 20px 10px 20px;
+        }
+    }
+
+</style>