${title ? '
' + title + '
' : ''}
${
- // 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() ? '
\n' + content + '\n
' : ''
}
diff --git a/src/content/ueber-uns.md b/src/content/ueber-uns.md
index 2e7b55c..b3c2d0c 100644
--- a/src/content/ueber-uns.md
+++ b/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
-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.
+## Vereinsgründung
-## 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 %}
diff --git a/src/styles/components/_page.scss b/src/styles/components/_page.scss
index 3e741ee..8bdb2b7 100644
--- a/src/styles/components/_page.scss
+++ b/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 {
diff --git a/src/styles/components/_timeline.scss b/src/styles/components/_timeline.scss
new file mode 100644
index 0000000..f86e31c
--- /dev/null
+++ b/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};
+ }
+}
diff --git a/src/styles/lib/_colors.scss b/src/styles/lib/_colors.scss
index 0db4979..afb9ec8 100644
--- a/src/styles/lib/_colors.scss
+++ b/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);
diff --git a/src/styles/timeline.scss b/src/styles/timeline.scss
new file mode 100644
index 0000000..0a0ca8f
--- /dev/null
+++ b/src/styles/timeline.scss
@@ -0,0 +1 @@
+@use 'components/timeline';