From 9b3d6ea9aeca866231c20f0c09321c3b27d80bf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Thu, 7 Oct 2021 19:55:50 +0200 Subject: [PATCH] Add timeline styles and content --- .eleventy.js | 15 ++++- src/content/ueber-uns.md | 69 ++++++++++++++++---- src/styles/components/_page.scss | 2 +- src/styles/components/_timeline.scss | 95 ++++++++++++++++++++++++++++ src/styles/lib/_colors.scss | 1 + src/styles/timeline.scss | 1 + 6 files changed, 167 insertions(+), 16 deletions(-) create mode 100644 src/styles/components/_timeline.scss create mode 100644 src/styles/timeline.scss diff --git a/.eleventy.js b/.eleventy.js index 59fdca7..51cfc6f 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -94,6 +94,19 @@ ${content} `; }); + eleventyConfig.addPairedShortcode('timeline', (content, stamp) => { + return ` +
+ +${stamp ?? ''} + +
+${content} +
+
+ `; + }); + eleventyConfig.addPairedAsyncShortcode( 'banner', async (content, title, backgroundSource, backgroundAlt) => { @@ -120,7 +133,7 @@ ${content}
${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';