Center description text

src/components/DescText.astro

@@ -0,0 +1,17 @@
+---
+// This is text used as a description at the top of some pages
+// It's centered and not as wide as the wall of text on the Methods page
+---
+
+<p>
+  <slot />
+</p>
+
+<style>
+  p {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    max-width: 55ch;
+  }
+</style>

src/layouts/BlogPost.astro

@@ -9,7 +9,7 @@ const { title, description, author, pubDate, updatedDate, heroImage } =
   Astro.props;
 ---
 
-<BaseLayout title={title} isBlogPost={true} description={description}>
+<BaseLayout title={title} isBlogPost={true} description={description ?? "Team CYB3RL4NG's blog"}>
   <article>
     <div class="hero-image">
       {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}

src/pages/blog/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import FormattedDate from "../../components/FormattedDate.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { RSS_LINK } from "../../consts";
+import DescText from "../../components/DescText.astro";
 
 const posts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
@@ -11,10 +12,10 @@ const posts = (await getCollection("blog")).sort(
 
 <BaseLayout title="Blog">
   <h1>Blog</h1>
-  <p>
+  <DescText>
     This is where we post about our progress and findings. If you want updates,
     you can track our <a href={RSS_LINK}>RSS feed</a>.
-  </p>
+  </DescText>
   <div class="center-posts-container">
     <div class="posts">
       {

src/pages/team.mdx

@@ -2,15 +2,17 @@
 layout: ../layouts/BaseLayout.astro
 title: About
 ---
+import DescText from "../components/DescText.astro"
 import Member from "../components/about/Member.astro"
 import Members from "../components/about/Members.astro"
-import TeamPhoto from "../components/about/TeamPhoto.astro"
 
 # Team
 
-Team CYB3RL4NG is a class of 2026 Gemstone team at the University of Maryland.
-We are 5 undergraduate students, plus our mentor, Dr. Erik Nesse, and our librarian,
-Nevenka Zdravkovska.
+<DescText>
+  {`Team CYB3RL4NG is a class of 2026 Gemstone team at the University of Maryland.
+  We are 5 undergraduate students, plus our mentor, Dr. Erik Nesse, and our librarian,
+  Nevenka Zdravkovska.`}
+</DescText>
 
 <img
   loading="lazy"

src/pages/timeline.mdx

@@ -2,14 +2,17 @@
 title: Timeline
 layout: ../layouts/BaseLayout.astro
 ---
+import DescText from "../components/DescText.astro"
 import Timeline from "../components/timeline/Timeline.astro"
 import TimelineItem from "../components/timeline/TimelineItem.astro"
 import { Files } from "../consts"
 
 # Timeline
 
-Gemstone is a 4-year program, so we plan to finish our research by spring of 2026.
-Below is a rough expected timeline of our research.
+<DescText>
+{`Gemstone is a 4-year program, so we plan to finish our research by spring of 2026.
+Below is a rough expected timeline of our research.`}
+</DescText>
 
 {/* todo make cards with multiple bullet points per semester instead? */}