diff --git a/sites/coderdojo/rueckblick.md b/sites/coderdojo/rueckblick.md
index 535e0a2..c4d603e 100644
--- a/sites/coderdojo/rueckblick.md
+++ b/sites/coderdojo/rueckblick.md
@@ -16,68 +16,172 @@ Das Projekt steht unter der Schirmherrschaft von [Angestöpselt](https://www.ang
Nach und nach knüpfen wir immer mehr Kontakte zu Unternehmen in Würzburg, die mitmachen wollen und ein CoderDojo anbieten möchten.
Inzwischen sind wir in fast jeder Ecke in und um Würzburg vertreten und können CoderDojos in einem Intervall von etwa 2 Monaten anbieten.
-{% timeline "01" %}
-### Frühjahr 2017
+{% timeline "14" %}
-{% endtimeline %}
-{% timeline "02" %}
+### März 2023
-### Winter 2017
+Wir sind zurück aus der Corona-Pause!
+Die [iWelt](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"} heißt uns wieder in Eibelstadt willkommen.
-{% endtimeline %}
-{% timeline "03" %}
-
-### Sommer 2018
-
-{% endtimeline %}
-{% timeline "04" %}
-
-### Herbst 2018
-
-{% endtimeline %}
-{% timeline "05" %}
-
-### Winter 2018
-
-{% endtimeline %}
-{% timeline "06" %}
-
-### Januar 2019
-
-{% endtimeline %}
-{% timeline "07" %}
-
-### WueWW 2019
-
-{% endtimeline %}
-{% timeline "08" %}
-
-### Juni 2019
-
-{% endtimeline %}
-{% timeline "09" %}
-
-### Juli 2019
-
-{% endtimeline %}
-{% timeline "10" %}
-
-### EU Code Week 2019
-
-{% endtimeline %}
-{% timeline "11" %}
-
-### November 2019
-
-{% endtimeline %}
-{% timeline "12" %}
-
-### Meet and Code + WueWW 2020
+> [Jetzt anmelden!](/anmelden)
{% endtimeline %}
{% timeline "13" %}
-### Januar 2021
+### Januar 2021
+
+Zum zweiten Mal veranstalten wir ein kleines Online-Event.
+Abgesehen vom Veranstaltungsort ändert sich also nicht viel. Wie üblich könnt ihr jederzeit die Gruppen wechseln und euch alles ansehen.
+
+Weitere Details gibt es [im Forum](https://forum.coderdojo-wue.de/topic/53/online-coderdojo-januar-2021).
+
+{% endtimeline %}
+{% timeline "12" %}
+
+### Meet and Code + WueWW 2020
+
+Anlässlich des diesjährigen [Meet and Code](https://meet-and-code.org/gb/en/award2020){target="_blank" rel="noopener noreferrer"} und der [Würzburg Web Week](https://wueww.de/rueckblick-2020/){target="_blank" rel="noopener noreferrer"} veranstalten wir zum ersten Mal ein Online-Event.
+Wir bieten wie gewohnt verschiedene Themen in Gruppen anbieten, diesmal aber in virtuellen Online-Räumen.
+
+Gleichzeitig weihen wir unser [neues Forum](https://forum.coderdojo-wue.de/){target="_blank"} mit euch ein, indem wir spezielle Event-Challenges hochladen, die es dann zu lösen gilt.
+Der/die Sieger/-in wird natürlich auch mit einem Preis belohnt!
+Im Forum geben wir dann auch die Details zu den Online-Räumen bekannt, registriert euch also auf jeden Fall!
+
+{% endtimeline %}
+{% timeline "11" %}
+
+### November 2019
+
+Zum zweiten Mal sind wir in der Stadtbücherei Würzburg mit freundlicher Unterstützung vom Stadtjugendring.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#6aQWCEzvZtj9h62EXPYHFN_H){target="_blank" .gallery-preview .flip style="--x1: 50%; --y1: 45%; --x2: 60%; --y2: 70%;" aria-label="Fotogalerie zur Veranstaltung am 27. Juli 2019"}
+
+{% endtimeline %}
+{% timeline "10" %}
+
+### EU Code Week 2019
+
+Im Rahmen der [EU Code Week](https://codeweek.eu/){target="_blank" rel="noopener noreferrer"} veranstalten wir ein Nachmittags-Dojo im kleinen Rahmen beim [ZDI Mainfranken](https://www.zdi-mainfranken.de/index.html){target="_blank" rel="noopener noreferrer"}.
+
+{% endtimeline %}
+{% timeline "09" %}
+
+### Juli 2019
+
+Zum zweiten Mal sind wir bei der [iWelt](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"}!
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#5FIQxfdnqx4Ft1PLcDStmhUU){target="_blank" .gallery-preview style="--x1: 45%; --y1: 50%; --x2: 25%; --y2: 35%;" aria-label="Fotogalerie zur Veranstaltung am 27. Juli 2019"}
+
+{% endtimeline %}
+{% timeline "08" %}
+
+### Juni 2019
+
+Zweites CoderDojo beim [ZDI Mainfranken](https://www.zdi-mainfranken.de/index.html){target="_blank" rel="noopener noreferrer"}.
+
+[
+ 
+ 
+](https://photos.gutwe.in/#EX6IbU3-y7Z5seIK-1VRe8b4){target="_blank" .gallery-preview .horizontal .two style="--a1: 45%; --a2: 30%;" aria-label="Fotogalerie zur Veranstaltung am 1. Juni 2019"}
+
+{% endtimeline %}
+{% timeline "07" %}
+
+### WueWW 2019
+
+Zum ersten Mal sind wir bei der [Würzburg Web Week](https://wueww.de/rueckblick-2019/){target="_blank" rel="noopener noreferrer"} dabei, mit tatkräftiger Unterstützung von [Mayflower](https://mayflower.de/){target="_blank" rel="noopener noreferrer"}!
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#L2wzlFqG0aJ8lLUQjNU4Ir_M){target="_blank" .gallery-preview .flip style="--x1: 50%; --y1: 55%; --x2: 25%; --y2: 60%;" aria-label="Fotogalerie zur Veranstaltung am 6. April 2019"}
+
+{% endtimeline %}
+{% timeline "06" %}
+
+### Januar 2019
+
+Das erste Mal sind wir beim [ZDI Mainfranken](https://www.zdi-mainfranken.de/index.html){target="_blank" rel="noopener noreferrer"} zu Gast.
+
+
+[
+ 
+ 
+](https://photos.gutwe.in/#nWP5b-r7kHGwSel7NUj0sbee){target="_blank" .gallery-preview .horizontal .two style="--a1: 55%; --a2: 75%;" aria-label="Fotogalerie zur Veranstaltung am 26. Januar 2019"}
+
+{% endtimeline %}
+{% timeline "05" %}
+
+### Winter 2018
+
+Zum dritten Mal sind wir mit Unterstützung der Studierenden im Masterstudiengang Informationssysteme an der FHWS in Würzburg.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#GqsUyLjz0xt_E3Wgqtwvsc4C){target="_blank" .gallery-preview .flip style="--x1: 55%; --y1: 50%; --x2: 70%; --y2: 65%;" aria-label="Fotogalerie zur Veranstaltung am 1. Dezember 2018"}
+
+{% endtimeline %}
+{% timeline "04" %}
+
+### Herbst 2018
+
+Das erste CoderDojo in der [Stadtbücherei Würzburg](https://blog-stadtbuecherei-wuerzburg.de/category/makerspace/){target="_blank" rel="noopener noreferrer"}.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#vGUfdmGfjIE2M5ZHy946ZRXt){target="_blank" .gallery-preview .horizontal style="--a2: 20%; --b2: 60%;" aria-label="Fotogalerie zur Veranstaltung am 27. Oktober 2018"}
+
+{% endtimeline %}
+{% timeline "03" %}
+
+### Sommer 2018
+
+Das erste CoderDojo bei der [iWelt](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"}.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#zVbGX0LKmcvquJY2pnITspHF){target="_blank" .gallery-preview style="--x1: 40%; --y1: 45%; --x2: 30%; --y2: 30%;" aria-label="Fotogalerie zur Veranstaltung am 4. August 2018"}
+
+{% endtimeline %}
+{% timeline "02" %}
+
+### Winter 2017
+
+Das zweite CoderDojo in Würzburg, wieder bei der FHWS.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#tdLCbgFptu_dQT9vyKS5Nm4P){target="_blank" .gallery-preview style="--x1: 45%; --y1: 55%; --x2: 35%; --y2: 70%;" aria-label="Fotogalerie zur Veranstaltung am 2. Dezember 2017"}
+
+{% endtimeline %}
+{% timeline "01" %}
+
+### Frühjahr 2017
+
+Erstes CoderDojo in Würzburg – wir sind zu Gast in den Räumlichkeiten der FHWS.
+
+[
+ 
+ 
+ 
+](https://photos.gutwe.in/#a50fFm28Vy-oPhacpSAJHaVY){target="_blank" .gallery-preview style="--x2: 70%;" aria-label="Fotogalerie zur Veranstaltung am 25. März 2017"}
{% endtimeline %}
diff --git a/styles/components/_timeline.scss b/styles/components/_timeline.scss
index 762ba01..e81d76b 100644
--- a/styles/components/_timeline.scss
+++ b/styles/components/_timeline.scss
@@ -2,6 +2,7 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
+@use '../lib/typography';
.timeline {
$stampSize: 4rem;
@@ -13,6 +14,43 @@
flex-direction: column;
align-items: center;
+ > .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 {
+ > p {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ > h3:first-child {
+ text-align: center;
+
+ > time {
+ display: block;
+ padding-inline: layout.$small-gap;
+ font-size: typography.$base-size;
+ font-weight: typography.$normal-weight;
+ }
+ }
+ }
+
@media screen and (min-width: layout.$breakpoint) {
flex-direction: row;
align-items: flex-start;
@@ -40,6 +78,7 @@
margin-top: 0;
margin-left: layout.$large-gap;
line-height: $stampSize;
+ text-align: left;
&::after {
content: '';
@@ -52,36 +91,16 @@
transform: translateY(-100%);
transition: background-color motion.$subtle;
}
+
+ > time {
+ display: inline-block;
+ float: right;
+ transition: background-color motion.$subtle;
+ }
}
}
}
- > .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 {
- > p {
- margin-left: 0;
- margin-right: 0;
- }
- }
-
&:hover {
@mixin stamp-hover($color) {
> .stamp {
@@ -99,8 +118,15 @@
}
@include stamp-hover(colors.$blue-800);
+ > .content > h3:first-child > time {
+ background-color: colors.$yellow-300;
+ }
+
@include colors.coderdojo-theme {
@include stamp-hover(colors.$orange-500);
+ > .content > h3:first-child > time {
+ background-color: colors.$orange-100;
+ }
}
}
@@ -116,3 +142,83 @@
margin-top: #{-1 * layout.$normal-gap};
}
}
+
+.gallery-preview {
+ position: relative;
+ display: grid;
+ grid-template-columns: var(--x1, 50%) 1fr;
+ grid-template-rows: var(--y1, 50%) 1fr;
+ gap: layout.$tiny-gap;
+ padding: layout.$tiny-gap;
+ height: 27rem;
+ background-color: colors.$blue-800;
+ @include colors.card-shadow;
+
+ &,
+ &:any-link {
+ transition: grid-template motion.$subtle;
+ }
+
+ > img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+
+ &:not(.flip) > img:nth-of-type(1) {
+ grid-row: 1 / span 2;
+ }
+ &.flip > img:nth-of-type(3) {
+ grid-column: 2;
+ grid-row: 1 / span 2;
+ }
+
+ &::after {
+ content: '\279C';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: typography.$heading-size;
+ background-color: #00000077;
+ color: colors.$gray-50;
+ opacity: 0;
+ transition: opacity motion.$subtle;
+ }
+
+ &:hover {
+ grid-template-columns: var(--x2, var(--x1, 50%)) 1fr;
+ grid-template-rows: var(--y2, var(--x2, 50%)) 1fr;
+
+ &::after {
+ opacity: 1;
+ }
+ }
+
+ &.horizontal {
+ grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) 1fr;
+ grid-template-rows: auto;
+
+ > img:nth-of-type(1),
+ > img:nth-of-type(3) {
+ grid-column: unset;
+ grid-row: unset;
+ }
+
+ &:hover {
+ grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) 1fr;
+ }
+
+ &.two {
+ grid-template-columns: var(--a1, 50%) 1fr;
+
+ &:hover {
+ grid-template-columns: var(--a2, 50%) 1fr;
+ }
+ }
+ }
+}
diff --git a/styles/lib/_colors.scss b/styles/lib/_colors.scss
index 9a4bdef..e70cb1b 100644
--- a/styles/lib/_colors.scss
+++ b/styles/lib/_colors.scss
@@ -27,6 +27,7 @@ $green-300: #dbffa4;
$orange-500: #f45520;
$orange-400: #f59273;
$orange-300: #fef0ec;
+$orange-100: #fffaf7;
$main-text: $gray-800;
$main-background: $gray-50;
diff --git a/styles/lib/_layout.scss b/styles/lib/_layout.scss
index 58b4cac..1d5e1f6 100644
--- a/styles/lib/_layout.scss
+++ b/styles/lib/_layout.scss
@@ -1,3 +1,4 @@
+$tiny-gap: 0.3rem;
$small-gap: 0.5rem;
$normal-gap: 1.5rem;
$large-gap: 2.5rem;