Added guidelines and markdown layout

2 files changed, 61 insertions, 3 deletions

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 91ef798..667f7c3 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -8,7 +8,9 @@ const { title, description } = Astro.props;
         <h1 class="header-text">{title}</h1>
         <h2 class="header-text">{description}</h2>
     </header>
-    <slot />
+    <div class="container">
+        <slot />
+    </div>
 </Layout>
 
 <style>
@@ -17,9 +19,8 @@ const { title, description } = Astro.props;
         flex-direction: column;
         gap: 0.5em;
         margin: 0;
-        padding: 0;
         text-align: center;
-        padding-bottom: 1em;
+        padding: 0 0 1em;
     }
 
     .header-text {
@@ -31,5 +32,16 @@ const { title, description } = Astro.props;
         font-size: 1.5em;
         font-weight: 300;
     }
+    .container {
+        margin: 10px 10em 10px 10em;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            margin: 10px 20px 10px 20px;
+        }
+    }
+
+
 
 </style>
diff --git a/src/layouts/PageMarkdown.astro b/src/layouts/PageMarkdown.astro
new file mode 100644
index 0000000..1da7491
--- /dev/null
+++ b/src/layouts/PageMarkdown.astro
@@ -0,0 +1,46 @@
+---
+import Layout from './Default.astro';
+const { frontmatter } = Astro.props;
+---
+
+<Layout title=`${frontmatter.title} - Andrew Lee` description={frontmatter.description}>
+    <header>
+        <h1 class="header-text">{frontmatter.title}</h1>
+        <h2 class="header-text">{frontmatter.description}</h2>
+    </header>
+    <div class="container">
+        <slot />
+    </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: 10px 10em 10px 10em;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            margin: 10px 20px 10px 20px;
+        }
+    }
+
+</style>