diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/Default.astro | 6 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 34 | ||||
| -rw-r--r-- | src/pages/blog/index.astro | 57 | ||||
| -rw-r--r-- | src/pages/blog/rss.xml.js | 2 | ||||
| -rw-r--r-- | src/pages/index.astro | 13 | ||||
| -rw-r--r-- | src/styles/Page.css | 27 | ||||
| -rw-r--r-- | src/styles/index.css | 6 |
7 files changed, 77 insertions, 68 deletions
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index db559c0..c7ef6bd 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -11,12 +11,12 @@ const date = new Date(); --- <!doctype html> -<html lang="en"> +<html lang="en-ca"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> - <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" /> + <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/blog/rss.xml" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> @@ -29,7 +29,7 @@ const date = new Date(); <!-- Open Graph Metadata --> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> - <meta property="og:image" content="/profile.png" /> + <meta property="og:image" content="https://alee14.me/profile.png" /> <meta property="og:type" content="website" /> <meta name="theme-color" content="#1B291F"/> diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 3731d5e..ea191f8 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -1,6 +1,7 @@ --- import Layout from './Default.astro'; const { title, description } = Astro.props; +import '../styles/Page.css'; --- <Layout title=`${title} - Andrew Lee` description={description}> @@ -12,36 +13,3 @@ const { title, description } = Astro.props; <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: 1em 10em 1em 10em; - } - - @media (max-width: 992px) { - .container { - margin: 10px 20px 10px 20px; - } - } - - - -</style> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index bc8844c..a35537a 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,33 +1,40 @@ --- -import Page from "../../layouts/Page.astro"; +import Page from "../../layouts/Default.astro"; import { getCollection } from "astro:content"; import {formatDate} from "../../util"; +import '../../styles/Page.css'; import "../../styles/cards.css"; import {Icon} from "astro-icon/components"; const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()); --- -<Page title="Blog" description="Where I post can be anything!"> +<Page title="Blog - Andrew Lee" description="Where I post can be anything!"> <main> - <div class="header"> - <a href="/blog/rss.xml"> - <Icon name="fa6-solid:square-rss" aria-label="RSS" /> - </a> - </div> - <div class="grid"> - {allBlogPosts.map((post) => ( - <article class="card"> - <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1> - <small>{formatDate(post.data.pubDate)}</small> - <p>{post.data.description}</p> - <div class="tags"> - {post.data.tags.map((tag) => ( - <a href={`/blog/tags/${tag}`}>{tag}</a> - ))} - </div> - </article> - )) - } + <header> + <h1 class="header-text"> + Blog + <a href="/blog/rss.xml"> + <Icon name="fa6-solid:square-rss" aria-label="RSS" /> + </a> + </h1> + <h2 class="header-text">Where I post can be anything!</h2> + </header> + <div class="container"> + <div class="grid"> + {allBlogPosts.map((post) => ( + <article class="card"> + <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1> + <small>{formatDate(post.data.pubDate)}</small> + <p>{post.data.description}</p> + <div class="tags"> + {post.data.tags.map((tag) => ( + <a href={`/blog/tags/${tag}`}>{tag}</a> + ))} + </div> + </article> + )) + } + </div> </div> </main> </Page> @@ -38,12 +45,4 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate gap: 1em; } - .header { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 0.5em; - font-size: 3em; - } </style> diff --git a/src/pages/blog/rss.xml.js b/src/pages/blog/rss.xml.js index fe17f91..bb67243 100644 --- a/src/pages/blog/rss.xml.js +++ b/src/pages/blog/rss.xml.js @@ -25,7 +25,7 @@ export async function GET(context) { link: `/blog/${post.slug}/`, content: sanitizeHtml(parser.render(post.body)), // (optional) inject custom xml - customData: `<language>en-us</language>`, + customData: `<language>en-ca</language>`, })), }); } diff --git a/src/pages/index.astro b/src/pages/index.astro index b87e151..99a14a1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -42,7 +42,18 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate <div class="information"> <div class="box"> <h1>About me</h1> - <p>I have been into computers since I was a kid, and it has been my passion for a long time. <br>Currently studying “Computing Support” (more preferably IT) at a vocational school.</p> + <a href="/history" class="link">History</a> + <p>Hey, I am Andrew Lee, a 19 year old who has a passion with computers. + I am currently a student at a vocational school in Pearson Electrotechnology Centre. + For years, I have been into programming, tinkering with virtual machines, and messing with Linux.</p> + </div> + <div class="box"> + <h1>Skills</h1> + <ul> + <li>Linux</li> + <li>Graphic Design</li> + <li>Web Development</li> + </ul> </div> <div class="box"> <h1>Computer Specs</h1> diff --git a/src/styles/Page.css b/src/styles/Page.css new file mode 100644 index 0000000..2a8f877 --- /dev/null +++ b/src/styles/Page.css @@ -0,0 +1,27 @@ +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: 1em 10em 1em 10em; +} + +@media (max-width: 992px) { + .container { + margin: 10px 20px 10px 20px; + } +} diff --git a/src/styles/index.css b/src/styles/index.css index ae3e9db..c581da0 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -55,13 +55,17 @@ .latest-posts { grid-column: 2; - grid-row: 1 / span 2; + grid-row: 1 / span 3; } .blog-title { margin-bottom: 2px; } +.link { + font-size: 1.2em; +} + /* Mobile view */ @media (max-width: 992px) { .social { |