lukeonline - commit 02f124f

diff --git a/src/components/Header.astro b/src/components/Header.astro index b588b11..6543e09 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,12 @@ --- const { title } = Astro.props; --- -<header> - <h1>Luke Jones</h1> +<header class="mb-4 flex flex-col gap-1"> + <h1 class="text-2xl font-bold">Luke Jones</h1> + <nav class="flex flex-row gap-6"> + <a href="/">Home</a> + <a href="/blog">Blog</a> + <a href="/projects">Projects</a> + <a href="/about">About</a> + </nav> </header> diff --git a/src/components/TextSection.astro b/src/components/TextSection.astro new file mode 100644 index 0000000..5582a8e --- /dev/null +++ b/src/components/TextSection.astro @@ -0,0 +1,3 @@ +<p> + <slot /> +</p> diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index fffea5c..fd754b1 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -8,13 +8,15 @@ import Footer from "../components/Footer.astro"; const { ...props } = Astro.props; --- -<html> +<html class="bg-gray-200"> <Head title={`lukeonline - ${props.title}`} /> - <body class="bg-gray-100 w-256 m-auto text-base"> - <Header /> - <main> - <slot /> - </main> - <Footer /> + <body class="w-full md:w-192 m-auto mt-8 text-base p-8"> + <div class="border-solid border-1 p-8 bg-white"> + <Header /> + <main> + <slot /> + </main> + <Footer /> + </div> </body> </html> diff --git a/src/layouts/ContentList.astro b/src/layouts/ContentList.astro index dd6468f..8cbd921 100644 --- a/src/layouts/ContentList.astro +++ b/src/layouts/ContentList.astro @@ -4,6 +4,5 @@ import Base from "./Base.astro"; const { ...props } = Astro.props; --- <Base title={props.title}> - <p>This is a blog page</p> <slot /> </Base> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index f4ca90e..76f3355 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,8 +1,11 @@ --- import ContentList from "../../layouts/ContentList.astro"; +import TextSection from "../../components/TextSection.astro"; const title = "Blogs"; --- <ContentList title={title}> - <p>hello world</p> + <TextSection> + This is a body of text + </TextSection> </ContentList>