Move to Astro

2023-02-01 14:12:30 +00:00
commit bf36c8c9b3
463 changed files with 10340 additions and 0 deletions
@@ -0,0 +1,61 @@
+---
+export interface Props {
+  title: string;
+  date?: Date;
+  image: string;
+  bold?: boolean;
+}
+
+const { title, date, image, bold = false } = Astro.props;
+const actualDate = date ? new Date(date) : undefined;
+const dateString = actualDate?.toISOString()?.slice(0, 10);
+---
+
+<div class:list={[{ "page-hero": !bold, "index-hero": bold }]}>
+  <div class="title-text text-center">
+    <h1 class:list={[{ "fw-bold": bold, "display-5": bold }]}>{title}</h1>
+    {date && <div class="col-auto date align-self-end">{dateString}</div>}
+  </div>
+
+  <img src={`/images/${image}`} />
+</div>
+
+<style lang="scss">
+  @media (min-width: 600px) {
+    .index-hero img {
+      aspect-ratio: 3 / 1;
+    }
+    .page-hero img {
+      aspect-ratio: 4 / 1;
+    }
+  }
+  @media (max-width: 600px) {
+    .index-hero img {
+      aspect-ratio: 1 / 2;
+    }
+    .page-hero img {
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  .index-hero,
+  .page-hero {
+    margin-bottom: 50px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+    .title-text {
+      color: white;
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      h1 {
+        border: 0;
+      }
+    }
+  }
+</style>