diff --git a/src/components/SectionContainer.astro b/src/components/SectionContainer.astro new file mode 100644 index 0000000..a56e6a0 --- /dev/null +++ b/src/components/SectionContainer.astro @@ -0,0 +1,24 @@ +--- +import BaseHead from '../components/BaseHead.astro'; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; +import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; +--- + +<!DOCTYPE html> +<html lang="en"> + <head> + <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> + </head> + <body> + <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0"> + <div class="flex flex-col justify-between h-screen"> + <Header title={SITE_TITLE} /> + + <slot /> + + <Footer /> + </div> + </section> + </body> +</html> \ No newline at end of file diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index fac2ed1..b82128d 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -1,34 +1,26 @@ --- import type { CollectionEntry } from 'astro:content'; import BaseHead from '../components/BaseHead.astro'; -import Header from '../components/Header.astro'; -import Footer from '../components/Footer.astro'; import FormattedDate from '../components/FormattedDate.astro'; +import SectionContainer from '../components/SectionContainer.astro'; type Props = CollectionEntry<'blog'>['data']; const { title, description, pubDate } = Astro.props; --- +<head> + <BaseHead title={title} description={description} /> +</head> -<html lang="en"> - <head> - <BaseHead title={title} description={description} /> - </head> - - <body> - <div class="flex flex-col"> - <Header /> - <main class="flex flex-col items-center mx-auto mt-8"> - <article class="flex flex-col mx-auto mb-32"> - <h1 class="text-4xl font-extrabold">{title}</h1> - <p class="italic">{description}</p> - <FormattedDate date={pubDate}/> - <div class="flex flex-col items-left w-full max-w-prose blog"> - <slot /> - </div> - </article> - </main> - <Footer /> - </div> - </body> -</html> +<SectionContainer> + <main class="mb-auto break-words mt-4"> + <article> + <h1 class="text-4xl font-extrabold">{title}</h1> + <p class="italic">{description}</p> + <FormattedDate date={pubDate}/> + <div class="blog"> + <slot /> + </div> + </article> + </main> +</SectionContainer> \ No newline at end of file diff --git a/src/pages/about.astro b/src/pages/about.astro index 5caccb8..58f9cc5 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,26 +1,14 @@ --- -import BaseHead from '../components/BaseHead.astro'; -import Header from '../components/Header.astro'; -import Footer from '../components/Footer.astro'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; +import SectionContainer from '../components/SectionContainer.astro'; --- -<!DOCTYPE html> -<html lang="en"> - <head> - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> - </head> - <body> - <div class="flex flex-col fixed w-screen"> - <Header title={SITE_TITLE} /> - <main class="flex flex-col justify-center items-left mx-auto"> - <h1 class="text-4xl font-extrabold">About me</h1> - <p>Some information about me & stuff I like</p> - <div class="mt-4"> - <a href="/tools">link to tools</a> - </div> - </main> - <Footer /> - </div> - </body> -</html> \ No newline at end of file +<SectionContainer> + <main class="mb-auto break-words mt-4"> + <h1 class="text-4xl font-extrabold">About me</h1> + <p>Some information about me & stuff I like</p> + <a href="/tools">link to tools</a> + <p> + sidojdjosajoidsajaiodoaisoiasdosiadjoiaskflsdmklmdfsmlkfdskmdjdoasijsadkldsanlndsalnasdnlksadnklsdnlkdoasjdoasidjaoisjdoiasjdoasijdoiasjdoaijdio flex justify-center mx-auto md:gap-64 gap-4 py-5 + </p> + </main> +</SectionContainer> \ No newline at end of file diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 2c4c9f6..0b786fd 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,57 +1,44 @@ --- -import BaseHead from '../../components/BaseHead.astro'; -import Header from '../../components/Header.astro'; -import Footer from '../../components/Footer.astro'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts'; import { getCollection } from 'astro:content'; import FormattedDate from '../../components/FormattedDate.astro'; +import SectionContainer from '../../components/SectionContainer.astro'; const posts = (await getCollection('blog')).sort( (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf() ); --- +<SectionContainer> + <main class="flex flex-col h-screen gap-4 mt-4"> + <h1 class="text-4xl font-extrabold">Blog posts</h1> + <section class="mt-4"> + <ul> + { + posts.map((post) => ( + <li> + <FormattedDate date={post.data.pubDate} /> + <a href={`/blog/${post.slug}/`}>{post.data.title}</a> + </li> + )) + } + </ul> + </section> + </main> +</SectionContainer> -<!DOCTYPE html> -<html lang="en"> - <head> - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> - <style> - ul { - list-style-type: none; - padding: unset; - } - ul li { - display: flex; - } - ul li :global(time) { - flex: 0 0 130px; - font-style: italic; - color: #595959; - } - ul li a { - color: #815B5B; - } - </style> - </head> - <body> - <div class="flex flex-col fixed w-screen"> - <Header /> - <main class="flex flex-col justify-center items-left mx-auto"> - <h1 class="text-4xl font-extrabold">Blog posts</h1> - <section class="mt-4"> - <ul> - { - posts.map((post) => ( - <li> - <FormattedDate date={post.data.pubDate} /> - <a href={`/blog/${post.slug}/`}>{post.data.title}</a> - </li> - )) - } - </ul> - </section> - </main> - <Footer /> - </div> - </body> -</html> +<style> + ul { + list-style-type: none; + padding: unset; + } + ul li { + display: flex; + } + ul li :global(time) { + flex: 0 0 130px; + font-style: italic; + color: #595959; + } + ul li a { + color: #815B5B; + } +</style> \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index e04dc4e..c5d0cd9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,51 +3,40 @@ import BaseHead from '../components/BaseHead.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; +import SectionContainer from '../components/SectionContainer.astro'; --- <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> -<!DOCTYPE html> -<html lang="en"> - <head> - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> - </head> - <body> - <div class="flex flex-col fixed w-screen"> - <Header title={SITE_TITLE} /> - <main class="flex flex-col justify-center items-center text-center pt-48 description gap-4"> - <div class="profile"></div> - <h1 class="text-3xl font-bold">Sindre Kjelsrud</h1> - <p class="md:max-w"> - Student at Western University of Applied Sciences. - </p> - <div class="flex gap-1 social"> - <a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/"> - <iconify-icon icon="lucide:linkedin" width="30" height="30" /> - </a> - <a href="https://github.com/SindreKjelsrud"> - <iconify-icon icon="ri:github-line" width="30" height="30" /> - </a> - <a href="https://www.instagram.com/SindreKjelsrud/"> - <iconify-icon icon="mdi:instagram" width="30" height="30" /> - </a> - <a href="https://open.spotify.com/user/kjelsrud!"> - <iconify-icon icon="mdi:spotify" width="30" height="30" /> - </a> - </div> - </main> - <Footer /> +<SectionContainer> + <main class="flex flex-col justify-center items-center h-screen gap-4 description"> + <div class="profile"></div> + <h1 class="text-3xl font-bold">Sindre Kjelsrud</h1> + <p>Student at Western University of Applied Sciences.</p> + <div class="flex gap-1 social"> + <a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/"> + <iconify-icon icon="lucide:linkedin" width="30" height="30" /> + </a> + <a href="https://github.com/SindreKjelsrud"> + <iconify-icon icon="ri:github-line" width="30" height="30" /> + </a> + <a href="https://www.instagram.com/SindreKjelsrud/"> + <iconify-icon icon="mdi:instagram" width="30" height="30" /> + </a> + <a href="https://open.spotify.com/user/kjelsrud!"> + <iconify-icon icon="mdi:spotify" width="30" height="30" /> + </a> </div> - </body> -</html> + </main> +</SectionContainer> <style> .profile { width: 10rem; height: 10rem; - background: url("../../public/assets/pb.jpg"); + background: url("../../assets/pb.jpg"); background-size: cover; border-radius: 9999px; } diff --git a/src/pages/tools.astro b/src/pages/tools.astro index 1cdf25b..7378142 100644 --- a/src/pages/tools.astro +++ b/src/pages/tools.astro @@ -1,51 +1,38 @@ --- -import BaseHead from '../components/BaseHead.astro'; -import Header from '../components/Header.astro'; -import Footer from '../components/Footer.astro'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; -import stackData from '../../public/data/tools.json' +import stackData from '../../data/tools.json' +import SectionContainer from '../components/SectionContainer.astro'; --- -<!DOCTYPE html> -<html lang="en"> - <head> - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> - </head> - <body> - <div class="flex flex-col fixed w-screen p-5"> - <Header title={SITE_TITLE} /> - <main class="flex flex-col justify-center items-left mx-auto pt-8"> - <h1 class="text-2xl">Tools</h1> - <p>Tools I use everyday (or at least most days)</p> - <ul class="pt-2"> - {stackData.map((data) => - <div class="p-2 mb-4 cards"> - <ul> - <a - href={data.link} - class="flex gap-2" - > - <img src={data.icon} class="w-20 h-20" /> - <div class="flex flex-col"> - <p> - {data.name} - </p> - <div class="description"> - <p>{data.description}</p> - </div> - <div class="tag"> - <button class="flex auto border-solid border-2 px-1 rounded-md text-sm"> - #{data.tag} - </button> - </div> +<SectionContainer> + <main class="flex flex-col justify-center items-left mx-auto pt-8"> + <h1 class="text-2xl">Tools</h1> + <p>Tools I use everyday (or at least most days)</p> + <ul class="pt-2"> + {stackData.map((data) => + <div class="p-2 mb-4 cards"> + <ul> + <a + href={data.link} + class="flex gap-2" + > + <img src={data.icon} class="w-20 h-20" /> + <div class="flex flex-col"> + <p> + {data.name} + </p> + <div class="description"> + <p>{data.description}</p> </div> - </a> - </ul> - </div> - )} - </ul> - </main> - <Footer /> - </div> - </body> -</html> \ No newline at end of file + <div class="tag"> + <button class="flex auto border-solid border-2 px-1 rounded-md text-sm"> + #{data.tag} + </button> + </div> + </div> + </a> + </ul> + </div> + )} + </ul> + </main> +</SectionContainer> \ No newline at end of file