feat: add /schedule page

cspell.json

@@ -15,6 +15,7 @@
 		"astropub",
 		"astrojs",
 		"Bluesky",
+		"d'œuvres",
 		"Devries",
 		"dimitri",
 		"Emscripten",

src/components/Header.astro

@@ -24,6 +24,7 @@ function hrefProps(pathname: string) {
 				<a {...hrefProps("/articles")}>Articles</a>
 				<a {...hrefProps("/cfp")}>CFP</a>
 				<a {...hrefProps("/faqs")}>FAQs</a>
+				<a {...hrefProps("/schedule")}>Schedule</a>
 				<a {...hrefProps(links.shop)}>Shop</a>
 				<a {...hrefProps("/travel")}>Travel</a>
 				<Button
@@ -44,6 +45,7 @@ function hrefProps(pathname: string) {
 			<a {...hrefProps("/articles")}>Articles</a>
 			<a {...hrefProps("/cfp")}>CFP</a>
 			<a {...hrefProps("/faqs")}>FAQs</a>
+			<a {...hrefProps("/schedule")}>Schedule</a>
 			<a {...hrefProps(links.shop)}>Shop</a>
 			<a {...hrefProps("/travel")}>Travel</a>
 			<Button
@@ -150,7 +152,7 @@ function hrefProps(pathname: string) {
 		display: flex;
 		align-items: center;
 		font-weight: var(--fontWeightLight);
-		gap: clamp(0.75rem, 1.5vw, 2rem);
+		gap: clamp(0.55rem, 1.25vw, 2rem);
 	}
 
 	.header-link-inactive {
@@ -160,9 +162,10 @@ function hrefProps(pathname: string) {
 	.header-button {
 		justify-content: center;
 		margin-left: 0.35rem;
+		text-wrap: nowrap;
 	}
 
-	@media (width >= 1017px) {
+	@media (width >= 1117px) {
 		.header-content-area-mobile {
 			display: none;
 		}

src/components/ScheduledActivity.astro

@@ -0,0 +1,141 @@
+---
+import { markdown } from "@astropub/md";
+
+import { ActivityLocation } from "~/data/schedule";
+
+import Heading from "./Heading.astro";
+import Arrow from "./Arrow.astro";
+
+interface Props {
+	at?: string;
+	description?: string[];
+	id?: string;
+	location?: ActivityLocation;
+	class?: string;
+	level?: "h3" | "h4";
+	title: string;
+}
+
+const {
+	at,
+	class: className,
+	description = [],
+	id,
+	location,
+	level = "h3",
+	title,
+	...rest
+} = Astro.props;
+
+const descriptionLines = await Promise.all(
+	description.map(async (p) => await markdown(p)),
+);
+---
+
+<div
+	class:list={["scheduled-activity", "scheduled-activity-h3", className]}
+	id={id}
+	{...rest}
+>
+	<Heading level={level} class="activity-title">
+		{title}
+	</Heading>
+	<div class="activity-locators">
+		<div class="activity-time">{at ?? "Time TBA"}</div>
+		{
+			location && (
+				<a class="activity-location" href={location.href}>
+					{location.text}
+				</a>
+			)
+		}
+	</div>
+	{
+		descriptionLines && (
+			<div class="activity-description">{descriptionLines}</div>
+		)
+	}
+</div>
+
+<style>
+	.scheduled-activity {
+		font-weight: var(--fontWeightLight);
+		margin: 0 var(--widthBodyPadding);
+		max-width: var(--widthBodyLean);
+		scroll-margin-top: 2rem;
+	}
+
+	.scheduled-activity-h3 {
+		margin-top: 2rem;
+	}
+
+	.activity-title {
+		font-family: var(--fontFamilyLogo);
+		font-size: var(--fontSizeMedium);
+		font-weight: var(--fontWeightLogo);
+		text-decoration: none;
+	}
+
+	.activity-title-inner {
+		display: inline;
+	}
+
+	.activity-locators {
+		display: flex;
+		font-family: var(--fontFamilyLogo);
+		font-weight: var(--fontWeightSemibold);
+		gap: 0.75rem;
+		justify-content: space-between;
+		margin: 0.5rem 0;
+	}
+
+	.activity-time {
+		font-size: var(--fontSizeMedium);
+	}
+
+	.activity-location {
+		line-height: 1.25;
+		text-align: right;
+	}
+
+	.activity-description {
+		display: flex;
+		gap: 0.5rem;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.activity-within {
+		list-style: none;
+		padding-left: 0;
+	}
+
+	@media (min-width: 490px) {
+		.scheduled-activity {
+			display: grid;
+			grid-template-columns: clamp(5rem, 20vw, 10rem) auto;
+			grid-template-rows: auto auto auto;
+			gap: 0.75rem 1rem;
+		}
+
+		.activity-title {
+			grid-area: 1 / 2 / 2 / 3;
+		}
+
+		.activity-locators {
+			grid-area: 1 / 1 / 3 / 2;
+			flex-direction: column;
+			margin: 0;
+			justify-content: flex-start;
+			text-align: right;
+		}
+
+		.activity-description {
+			grid-area: 2 / 2 / 3 / 3;
+		}
+
+		.activity-within {
+			grid-area: 3 / 1 / 4 / 3;
+		}
+	}
+</style>