diff options
| author | Pinapelz <yukais@pinapelz.com> | 2023-09-12 15:40:16 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2023-09-12 15:40:16 -0700 |
| commit | baf899ad91de520f4440259df945de0abbcf7acc (patch) | |
| tree | 03b87b95ad4782e34459445e3d8befbf78dd210a /src/pages | |
| parent | 5ae476057f59e8b65a3272976cc520cffbf41d54 (diff) | |
update homepage styling
- New header design
- Embed pinapelz.moe as iframe bottom
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/index.astro | 126 |
1 files changed, 72 insertions, 54 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro index 6d801e7..6c9c278 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,62 +1,80 @@ --- -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 ProjectGrid from '../components/ProjectGrid.astro' +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 ProjectGrid from "../components/ProjectGrid.astro"; -const posts = (await getCollection('blog')).sort( - (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() +const posts = (await getCollection("blog")).sort( + (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() ); --- <!DOCTYPE html> <html lang="en"> - <head> - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> - </head> - <body> - <Header title={SITE_TITLE} /> - - <main> - <style> - ul { - list-style-type: none; - padding: unset; - } - ul li { - display: flex; - } - ul li :global(time) { - flex: 0 0 130px; - font-style: italic; - color: #646464; - } - </style> - <h2>Recent Posts</h2> - <section> - <ul> - { - posts.slice(-3).map((post) => ( - <li> - <FormattedDate date={post.data.pubDate} /> - <a href={`/blog/${post.slug}/`}>{post.data.title}</a> - </li> - )).reverse() - } - </ul> - </section> - <h1>👋 Greetings, <a href="https://pinapelz.gitlab.io/3d-ascii-rpg/">Adventurer!</a></h1> - <p> - Welcome to my site/blog! This place will serve as a corner where I can document the progress and process with some of things I've experimented with or made. - I guess its like programming documentation, but uhh more of a mess? - </p> - <h3>I did a thing..</h3> - <p>Here are some of the things I've done/experimented with and found pretty cool! (you can also find more <a href="https://pinapelz.moe">here</a> - <ProjectGrid> - </main> - <Footer /> - </body> + <head> + <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> + </head> + <body> + <Header title={SITE_TITLE} /> + + <main> + <style> + ul { + list-style-type: none; + padding: unset; + } + ul li { + display: flex; + } + ul li :global(time) { + flex: 0 0 130px; + font-style: italic; + color: #646464; + } + </style> + <h2>Recent Blog Posts</h2> + <section> + <ul> + { + posts + .slice(-3) + .map((post) => ( + <li> + <FormattedDate date={post.data.pubDate} /> + <a href={`/blog/${post.slug}/`}>{post.data.title}</a> + </li> + )) + .reverse() + } + </ul> + </section> + <h1> + 👋 Greetings, <a href="https://pinapelz.gitlab.io/3d-ascii-rpg/" + >Adventurer!</a + > + </h1> + <p> + Welcome to my site/blog! This place will serve as a corner where I can + document the progress and process with some of things I've experimented + with or made. I guess its kind of like writing documentation for all the + things I've found intriguing or interesting. + </p> + <h3>I did a thing..</h3> + <p> + Here are some of the things I've done/experimented with and found pretty + cool! + <ProjectGrid> + <section> + <h2>Check below for some links to more stuff!</h2> + <iframe src="https://pinapelz.moe/" width="100%" height="500px" + ></iframe> + </section> + </ProjectGrid> + <Footer /> + </p> + </main> + </body> </html> |