diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-01-22 19:56:50 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-01-22 20:53:41 -0500 |
| commit | 8fd6f1a2739b686092bbb5806666e63f283d6510 (patch) | |
| tree | e378cd080f8f6882e0282e9db6a6b0c48030049b /src/layouts | |
| parent | 7604592b7a68fee231b63ff5123837e3eb1beaf8 (diff) | |
| download | personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.gz personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.bz2 personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.zip | |
Add Vue.JS for Navbar; Transitions; Getting started on projects
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/Default.astro | 22 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 22 |
2 files changed, 34 insertions, 10 deletions
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index ecc4e2e..29662c6 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -1,18 +1,19 @@ --- interface Props { title: string; - description: string; + description: string; } const { title, description } = Astro.props; -import { ViewTransitions } from 'astro:transitions'; -import Navbar from '../components/Navbar.astro'; +import { ViewTransitions, slide } from 'astro:transitions'; +import Navbar from '../components/Navbar.vue'; --- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> + <meta name="title" content={title} /> <meta name="description" content={description} /> <meta name="viewport" content="width=device-width" /> <link rel="preconnect" href="https://fonts.googleapis.com"> @@ -24,11 +25,13 @@ import Navbar from '../components/Navbar.astro'; <title>{title}</title> </head> <body> - <Navbar /> + <Navbar client:load /> + <div transition:animate={slide({ duration: '0.2s' })}> <slot /> - <footer> - <p>Copyright © 2024 Andrew Lee</p> - </footer> + <footer> + <p>Copyright © 2024 Andrew Lee</p> + </footer> + </div> </body> </html> <style is:global> @@ -40,6 +43,11 @@ import Navbar from '../components/Navbar.astro'; color: #FFFFFF; } + ul { + padding-left: 20px; + font-size: 1.1em; + } + footer { text-align: center; font-size: 1.3em; diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index b0f202a..9b8dd8f 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -3,15 +3,31 @@ import Layout from './Default.astro'; const { title, description } = Astro.props; --- -<Layout title=`${title} | Andrew Lee` description={description}> +<Layout title=`${title} - Andrew Lee` description={description}> <header> - <h1>{title}</h1> - <h2>{description}</h2> + <h1 class="header-text">{title}</h1> + <h2 class="header-text">{description}</h2> </header> </Layout> <style> header { + display: flex; + flex-direction: column; + gap: 0.5em; + margin: 0; + padding: 0; text-align: center; } + + .header-text { + font-size: 2em; + margin: 0; + } + + h2.header-text { + font-size: 1.5em; + font-weight: 300; + } + </style> |