Add timeline styles and content

.eleventy.js

@@ -94,6 +94,19 @@ ${content}
     `;
   });
 
+  eleventyConfig.addPairedShortcode('timeline', (content, stamp) => {
+    return `
+<section class="timeline">
+<span class="stamp${stamp === undefined ? ' small' : ''}">
+${stamp ?? ''}
+</span>
+<div class="content">
+${content}
+</div>
+</section>
+    `;
+  });
+
   eleventyConfig.addPairedAsyncShortcode(
     'banner',
     async (content, title, backgroundSource, backgroundAlt) => {
@@ -120,7 +133,7 @@ ${content}
 <div class="content">
 ${title ? '<div class="title">' + title + '</div>' : ''}
 ${
-  // The '\n's here are required so that markdwon still gets rendered in the
+  // The '\n's here are required so that markdown still gets rendered in the
   // content block:
   content.trim() ? '<div>\n' + content + '\n</div>' : ''
 }

src/content/ueber-uns.md

@@ -3,21 +3,62 @@ layout: layouts/page.njk
 eleventyNavigation:
   key: Über uns
   order: 100
+extraStylesheets: ['timeline']
 ---
-# Infos zum Verein
+# Eine kurze Vereinsgeschichte
 
-## Vereinsgeschichte
+{% timeline "2011" %}
 
-Angestöpselt e. V. wurde 2011 von Steffen Hock und Christoph Fischer – damals
+## Vereinsgründung
-noch mit dem nicht mehr aktuellen Schriftzug *@ngestöspselt* – nach dem
-Vorbild der Computerspende Hamburg gegründet. Was klein in Steffens keller mit
-Computerausgaben aus dem Kofferraum begann, fiel schnell auf fruchtbaren Boden.
-Bald wurde also auch ein Umzug in eigene Räumlichkeiten notwendig. Als 2015
-viele Menschen auch in Würzburg Zuflucht suchten, stieg die Nachfrage enorm an
-und wir hatten alle Hände voll zu tun, möglichst vielen Menschen einen eigenen
-Computer für die unterschiedlichsten Bedürfnisse (Kommunikation mit der Familie
-im Ausland, Sprachkurse, Schulbesuch, …) zur Verfügung zu stellen. Die Idee fand
-ein reges Medienecho und erlangte schon bald über Würzburg hinaus an
-Bekanntheit.
 
-## Was wir heute machen
+Steffen Hock und Christoph Fischer gründen den Verein – damals noch mit dem
+nicht mehr aktuellen Schriftzug *@ngestöspselt* – nach dem Vorbild der
+Computerspende Hamburg. Was klein in Steffens keller mit Computerausgaben aus
+dem Kofferraum begann, fiel schnell auf fruchtbaren Boden.
+
+{% endtimeline %}
+{% timeline "????" %}
+
+## Umzug
+
+...
+
+{% endtimeline %}
+{% timeline "2015" %}
+
+## Hochsaison
+
+Als 2015 viele Menschen auch in Würzburg Zuflucht fanden, stieg die Nachfrage
+nach unserem Projekt enorm an und wir hatten alle Hände voll zu tun, möglichst
+vielen Menschen einen eigenen Computer für die unterschiedlichsten Bedürfnisse
+zur Verfügung zu stellen. Kommunikation mit der Familie im Ausland, Sprachkurse
+und Schulbesuche waren einige der Gründe, warum von dem Projekt gebrauch gemacht
+wurde. Die Idee fand ein reges Medienecho und erlangte schon bald über Würzburg
+hinaus an Bekanntheit.
+
+{% endtimeline %}
+{% timeline "2017" %}
+
+## CoderDojo
+
+Mit dem [CoderDojo](/coderdojo) haben wir unser zweites großes Projekt im Verein
+aufgenommen. Seitdem haben wir etliche kostenlose Veranstaltungen zusammen mit
+Ehrenamtlichen angeboten. Dabei können Kinder und Jugendliche sichen vielen
+Themen bequem und spielerisch nähern, wie zum Beispiel Programmieren,
+Kryptographie oder Videoproduktion.
+
+{% endtimeline %}
+{% timeline "2019" %}
+
+## Tinkerfestival
+
+Das [Tinkerfestival](/tinkerfestival) wurde von Angestöpselt ausgerichtet, um
+…
+
+{% endtimeline %}
+{% timeline "…" %}
+
+## Und heute
+
+
+{% endtimeline %}

src/styles/components/_page.scss

@@ -6,7 +6,7 @@
   padding: layout.$large-gap;
 
   &.inverse {
-    color: colors.$gray-50;
+    color: colors.$inverse-text;
     background-color: colors.$blue-800;
 
     h2:after {

src/styles/components/_timeline.scss

@@ -0,0 +1,95 @@
+@use 'sass:math';
+@use '../lib/colors';
+@use '../lib/layout';
+@use '../lib/motion';
+
+.timeline {
+  $stampSize: 4rem;
+  $lineWeight: 0.2rem;
+  $itemSpacing: layout.$normal-gap;
+
+  @extend %content-gutter;
+  display: flex;
+
+  > .stamp {
+    display: inline-block;
+    flex-shrink: 0;
+    width: $stampSize;
+    height: $stampSize;
+    z-index: 10; // To lift it above the line.
+    border: $lineWeight solid colors.$gray-300;
+    border-radius: 100%;
+    line-height: #{$stampSize - 2 * $lineWeight};
+    text-align: center;
+    background-color: colors.$gray-50;
+    transition: border-color motion.$subtle, background-color motion.$subtle, color motion.$subtle;
+
+    &.small {
+      background-color: colors.$gray-300;
+    }
+  }
+
+  > .content {
+    position: relative;
+    flex-grow: 1;
+    margin-left: layout.$normal-gap;
+    margin-bottom: $itemSpacing;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
+      bottom: #{-1 * $itemSpacing};
+      width: $lineWeight;
+      background-color: colors.$gray-300;
+      transform: translateX(50%);
+      transition: background-color motion.$subtle;
+    }
+
+    > h2:first-child {
+      position: relative;
+      margin-top: 0;
+      margin-left: layout.$large-gap;
+      line-height: $stampSize;
+
+      &::after {
+        position: absolute;
+        right: calc(100% + #{layout.$small-gap});
+        top: 50%;
+        width: 4rem;
+        height: $lineWeight;
+        background-color: colors.$gray-300;
+        transform: translateY(-100%);
+        transition: background-color motion.$subtle;
+      }
+    }
+  }
+
+  &:hover {
+    > .stamp {
+      border-color: colors.$blue-800;
+      background-color: colors.$blue-800;
+      color: colors.$inverse-text;
+    }
+
+    > .content {
+      &::before,
+      > h2:first-child::after {
+        background-color: colors.$blue-800;
+      }
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+
+    > .content {
+      padding-bottom: layout.$normal-gap;
+    }
+  }
+
+  + .timeline {
+    margin-top: #{-1 * layout.$normal-gap};
+  }
+}

src/styles/lib/_colors.scss

@@ -17,6 +17,7 @@ $yellow-500: #ffff00;
 
 $main-text: $gray-800;
 $main-background: $gray-50;
+$inverse-text: $gray-50;
 
 @mixin block-shadow {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

src/styles/timeline.scss

@@ -0,0 +1 @@
+@use 'components/timeline';