summaryrefslogtreecommitdiff
path: root/website/src
diff options
context:
space:
mode:
authorJoe Carstairs <65492573+Sycamost@users.noreply.github.com>2024-05-12 08:33:19 +0100
committerJoe Carstairs <65492573+Sycamost@users.noreply.github.com>2024-05-12 08:33:19 +0100
commit0f75bf3443996f287b9a8a70abb0b3ac8031def8 (patch)
treec8136ceb877e6f7b0c1dc918fe5e2e3626cd5287 /website/src
parent88c6e8a6585c00f0a94e27f1351e77ef18518196 (diff)
Styling overhaul
Diffstat (limited to 'website/src')
-rw-r--r--website/src/components/BlogFeed.astro28
-rw-r--r--website/src/components/Me.astro26
-rw-r--r--website/src/components/Navbar.astro13
-rw-r--r--website/src/layouts/BlogPost.astro18
-rw-r--r--website/src/layouts/Page.astro6
-rw-r--r--website/src/pages/blog/index.astro2
-rw-r--r--website/src/pages/index.astro2
7 files changed, 60 insertions, 35 deletions
diff --git a/website/src/components/BlogFeed.astro b/website/src/components/BlogFeed.astro
index b6f9d55..c507d69 100644
--- a/website/src/components/BlogFeed.astro
+++ b/website/src/components/BlogFeed.astro
@@ -54,23 +54,19 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
</p>
- <p>
+ <p hidden>
<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
</p>
</aside>
- <ul>
- { distinctYears.map(year => (
- <li>
- {year}
- <ul>
- { posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
- <li class="h-entry">
- <a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
- </li>
- )) }
- </ul>
- </li>
- )) }
- </ul>
-</section> \ No newline at end of file
+ { distinctYears.map(year => (
+ <h3>{year}</h3>
+ <ul>
+ { posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
+ <li class="h-entry">
+ <a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
+ </li>
+ )) }
+ </ul>
+ )) }
+</section>
diff --git a/website/src/components/Me.astro b/website/src/components/Me.astro
index c9af587..1a2140b 100644
--- a/website/src/components/Me.astro
+++ b/website/src/components/Me.astro
@@ -4,13 +4,19 @@
<section class="h-card">
<img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
- <div>
+ <header>
<h1>
+ Joe Carstairs
+ </h1>
+
+ <div hidden>
<a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
- Joe Carstairs
+ Permalink
</a>
- </h1>
+ </div>
+ </header>
+ <div class="h-card__text">
<p>
Hi! šŸ‘‹ My name is <span class="p-given-name">Joe</span>
<span class="p-family-name">Carstairs</span>. Iā€™m a
@@ -33,11 +39,13 @@
</p>
<p>
- Or get me on
- <a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
- <a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
- <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
- or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
+ <small>
+ Or get me on
+ <a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
+ <a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
+ <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
+ or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
+ </small>
</p>
</div>
-</section> \ No newline at end of file
+</section>
diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro
new file mode 100644
index 0000000..bae661b
--- /dev/null
+++ b/website/src/components/Navbar.astro
@@ -0,0 +1,13 @@
+---
+---
+
+<nav>
+ <li>
+ <ul>
+ <a href="/">Home</a>
+ </ul>
+ <ul>
+ <a href="/blog">Blog</a>
+ </ul>
+ </li>
+</nav>
diff --git a/website/src/layouts/BlogPost.astro b/website/src/layouts/BlogPost.astro
index b709356..8639caa 100644
--- a/website/src/layouts/BlogPost.astro
+++ b/website/src/layouts/BlogPost.astro
@@ -2,6 +2,7 @@
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import FormattedDate from '../components/FormattedDate.astro';
+import Navbar from '../components/Navbar.astro';
type Props = CollectionEntry<'blog'>['data'];
@@ -22,11 +23,12 @@ const updatedDateStr = updatedDate ?
</head>
<body>
+ <Navbar />
<article class="h-entry">
<aside>
<span>
This is a blog post by
- <a class="p-author h-card h-card--minimal" href="/">Joe Carstairs</a>.
+ <a class="p-author h-card" href="/">Joe Carstairs</a>.
</span>
{ updatedDate
? (
@@ -34,17 +36,17 @@ const updatedDateStr = updatedDate ?
<span>Originally published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
) : <span>Published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
}
- <span>Go back to his <a href="/blog">blog</a> if you like.</span>
- <span><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
+ <span hidden><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
</aside>
- <h1 class="h-name">{title}</h1>
+ <header>
+ <h1 class="h-name">{title}</h1>
+ <p class="p-summary" set:html={description} />
+ </header>
- <p class="p-summary" set:html={description} />
-
- <div class="e-content">
+ <section class="e-content">
<slot />
- </div>
+ </section>
</article>
</body>
</html>
diff --git a/website/src/layouts/Page.astro b/website/src/layouts/Page.astro
index 4e5f3bb..d41e58c 100644
--- a/website/src/layouts/Page.astro
+++ b/website/src/layouts/Page.astro
@@ -1,5 +1,6 @@
---
import BaseHead from "../components/BaseHead.astro";
+import Navbar from "../components/Navbar.astro";
const { title, description } = Astro.props;
---
@@ -11,7 +12,10 @@ const { title, description } = Astro.props;
</head>
<body>
- <slot />
+ <Navbar />
+ <main>
+ <slot />
+ </main>
</body>
</html>
diff --git a/website/src/pages/blog/index.astro b/website/src/pages/blog/index.astro
index 0c617bd..61a1a46 100644
--- a/website/src/pages/blog/index.astro
+++ b/website/src/pages/blog/index.astro
@@ -2,6 +2,7 @@
import BaseHead from '../../components/BaseHead.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import BlogFeed from '../../components/BlogFeed.astro';
+import Navbar from '../../components/Navbar.astro';
---
<!doctype html>
@@ -10,6 +11,7 @@ import BlogFeed from '../../components/BlogFeed.astro';
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
+ <Navbar />
<main>
<BlogFeed headingLevel={1} />
</main>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 74cf934..4e9d87b 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -8,4 +8,4 @@ import Page from '../layouts/Page.astro';
<Page title={SITE_TITLE} description={SITE_DESCRIPTION}>
<Me />
<BlogFeed hideAuthor />
-</Page> \ No newline at end of file
+</Page>
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-08 14:27:57 +0000