Merge branch 'blog'

.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/neuigkeiten/2021-10-20-neue-homepage.md

@@ -0,0 +1,24 @@
+---
+title: Ein neuer Anstrich
+date: 2021-01-01
+blurb: Angestöpselt bekommt ein neues Auftreten: frisches Logo, erneuerte Homepage und einfachere Kontaktmöglichkeiten!
+layout: post
+---
+# Ein neuer Anstrich
+
+Lange hat's gedauert – jetzt endlich freuen wir uns, unser neues
+Vereins-"Branding" präsentieren zu können. Das zu gehört:
+
+- Ein eigens entworfenes Logo samt Schriftzug
+- Diese neue Homepage
+- Diverse Flyer
+- Marketing-Kram wie Tassen
+
+Zum einen möchten mir damit unserem Verein ein neues, modernes Auftreten
+verpassen. Im Hintergrund sind auch ein paar technische Veränderungen passiert,
+die letztendlich darauf hinauslaufen, dass wir in Zukunft Anfragen besser
+sammeln, strukturieren und abarbeiten können. Gleichzeitig wollen wir es allen
+BesucherInnen möglichst einfach machen, mit uns in Kontakt zu treten. Das baut
+Hürden ab und dient letztendlich auch dazu, mehr Menschen mit unseren Projekten
+zu versorgen. Wir sind überzeugt davon, dass das eine gute Sache ist und freuen
+uns auf Rückmeldungen!

src/content/neuigkeiten/firstpost.md

@@ -1,6 +0,0 @@
----
-title: Erster Post
-date: 2021-01-01
-layout: post
----
-Das ist ein erster Post. Es kommen noch viele mehr.

src/content/neuigkeiten/index.njk

@@ -0,0 +1,13 @@
+---
+layout: layouts/page.njk
+---
+
+<ol reversed class="post-list">
+  {% for post in collections.post | reverse %}
+    <li>
+      <a class="post-card" href="{{ post.url }}">
+
+      </a>
+    </li>
+  {% endfor %}
+</ol>

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 %}

src/styles/components/_markup.scss

@@ -1,5 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
+@use '../lib/motion';
 @use '../lib/typography';
 
 body {
@@ -77,6 +78,7 @@ dd {
 :any-link,
 a[href] {
   color: colors.$main-text;
+  transition: color motion.$subtle;
 
   &:hover {
     color: colors.$blue-800;
@@ -92,8 +94,11 @@ a[href] {
   text-decoration: none;
   line-height: 3rem;
   border: 1px solid colors.$main-text;
+  transition: font motion.$subtle, border-color motion.$subtle, color motion.$subtle;
 
   &:hover {
     border-color: colors.$blue-800;
+    font-weight: typography.$emphasized-weight;
+    font-size: 110%;
   }
 }

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';