diff options
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/Page.astro | 18 | ||||
| -rw-r--r-- | src/layouts/PageMarkdown.astro | 46 |
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> |