feat: add Timeline components

src/components/TimelineItem.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  datetime: string;
+}
+
+const props = defineProps<Props>();
+
+const dateLabels = computed<Record<string, string>>(() => {
+  const date = new Date(props.datetime);
+  const locale = "de-DE";
+
+  const dates = {
+    year: date.toLocaleDateString(locale, { year: "numeric" }),
+    month: date.toLocaleDateString(locale, { month: "short" }),
+    day: date.toLocaleDateString(locale, { day: "numeric" }),
+  };
+
+  return dates;
+});
+</script>
+
+<template>
+  <li class="timeline-item">
+    <time class="timeline-item__datetime" :datetime="datetime">
+      <div class="timeline-item__label">{{ dateLabels.day }}</div>
+      <div class="timeline-item__label">{{ dateLabels.month }}</div>
+      <div class="timeline-item__label">{{ dateLabels.year }}</div>
+    </time>
+    <section class="timeline-item__content">
+      <h1 class="timeline-item__headline">
+        <slot name="headline"></slot>
+      </h1>
+
+      <div class="timeline-item__text">
+        <slot name="content"></slot>
+      </div>
+    </section>
+  </li>
+</template>
+
+<style lang="scss">
+.timeline {
+  &-item {
+    display: flex;
+    flex-flow: row nowrap;
+
+    margin: var(--timeline-item-margin);
+
+    position: relative;
+
+    &:not(:last-child):before {
+      content: "";
+      position: absolute;
+      top: var(--timeline-position-top);
+      left: var(--timeline-stroke-position);
+      height: var(--timeline-stroke-length);
+      border-left: var(--timeline-stroke-border);
+    }
+
+    @media (min-width: 64em) {
+      &:nth-child(odd) {
+        margin: var(--timeline-item-margin-odd);
+      }
+
+      &:nth-child(even) {
+        margin: var(--timeline-item-margin-even);
+
+        &:before {
+          left: auto;
+          right: var(--timeline-stroke-position);
+        }
+
+        .timeline-item__datetime {
+          order: 1;
+        }
+
+        .timeline-item__content {
+          text-align: right;
+          margin: 0 1rem 0 0;
+        }
+      }
+    }
+
+    &__datetime {
+      font-size: var(--timeline-circle-font-size);
+      text-align: center;
+      line-height: 1.1;
+
+      background-color: var(--timeline-circle-background-color);
+
+      flex: 0 0 var(--timeline-circle-size);
+      width: var(--timeline-circle-size);
+      height: var(--timeline-circle-size);
+
+      margin: 0;
+      border: var(--timeline-stroke-border);
+      border-radius: 100%;
+      padding: var(--timeline-circle-padding);
+    }
+
+    &__label {
+    }
+
+    &__content {
+      flex: 1 0 0;
+      margin: 0 0 0 1rem;
+    }
+
+    &__headline {
+      font-size: calc(var(--timeline-circle-size) / 2);
+      line-height: calc(var(--timeline-circle-size) / 2);
+      margin: calc(var(--timeline-circle-size) / 4) 0;
+    }
+
+    &__text {
+      line-height: 1.5;
+    }
+  }
+}
+</style>

src/components/TimelineList.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul class="timeline">
+    <slot></slot>
+  </ul>
+</template>
+
+<style lang="scss">
+.timeline {
+  max-width: calc(var(--timeline-circle-size) * 15);
+  position: relative;
+
+  margin: 0 auto;
+  padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
+
+  list-style: none;
+
+  text-align: left;
+}
+</style>