mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Complete the CoderDojo timeline
This commit is contained in:
parent
7141098800
commit
39cb684fba
4 changed files with 293 additions and 81 deletions
|
|
@ -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.
|
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.
|
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 %}
|
### März 2023 <time datetime="2023-03-11">11. März 2023</time>
|
||||||
{% timeline "02" %}
|
|
||||||
|
|
||||||
### 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 %}
|
> [Jetzt anmelden!](/anmelden)
|
||||||
{% 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
|
|
||||||
|
|
||||||
{% endtimeline %}
|
{% endtimeline %}
|
||||||
{% timeline "13" %}
|
{% timeline "13" %}
|
||||||
|
|
||||||
### Januar 2021
|
### Januar 2021 <time datetime="2021-01-16">16. Januar 2021</time>
|
||||||
|
|
||||||
|
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 <time datetime="2020-10-18">18. Oktober 2020</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-11-30">30. November 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-10-18">18. Oktober 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-07-27">27. Juli 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-06-01">1. Juni 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-04-06">6. April 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2019-01-26">26. Januar 2019</time>
|
||||||
|
|
||||||
|
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 <time datetime="2018-12-01">1. Dezember 2018</time>
|
||||||
|
|
||||||
|
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 <time datetime="2018-10-27">27. Oktober 2018</time>
|
||||||
|
|
||||||
|
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 <time datetime="2018-08-04">4. August 2018</time>
|
||||||
|
|
||||||
|
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 <time datetime="2017-12-02">2. Dezember 2017</time>
|
||||||
|
|
||||||
|
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 <time datetime="2017-03-25">25. März 2017</time>
|
||||||
|
|
||||||
|
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 %}
|
{% endtimeline %}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
@use '../lib/colors';
|
@use '../lib/colors';
|
||||||
@use '../lib/layout';
|
@use '../lib/layout';
|
||||||
@use '../lib/motion';
|
@use '../lib/motion';
|
||||||
|
@use '../lib/typography';
|
||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
$stampSize: 4rem;
|
$stampSize: 4rem;
|
||||||
|
|
@ -13,6 +14,43 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
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) {
|
@media screen and (min-width: layout.$breakpoint) {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -40,6 +78,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-left: layout.$large-gap;
|
margin-left: layout.$large-gap;
|
||||||
line-height: $stampSize;
|
line-height: $stampSize;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
@ -52,33 +91,13 @@
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
transition: background-color motion.$subtle;
|
transition: background-color motion.$subtle;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .stamp {
|
> time {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-shrink: 0;
|
float: right;
|
||||||
width: $stampSize;
|
transition: background-color motion.$subtle;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,8 +118,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include stamp-hover(colors.$blue-800);
|
@include stamp-hover(colors.$blue-800);
|
||||||
|
> .content > h3:first-child > time {
|
||||||
|
background-color: colors.$yellow-300;
|
||||||
|
}
|
||||||
|
|
||||||
@include colors.coderdojo-theme {
|
@include colors.coderdojo-theme {
|
||||||
@include stamp-hover(colors.$orange-500);
|
@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};
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ $green-300: #dbffa4;
|
||||||
$orange-500: #f45520;
|
$orange-500: #f45520;
|
||||||
$orange-400: #f59273;
|
$orange-400: #f59273;
|
||||||
$orange-300: #fef0ec;
|
$orange-300: #fef0ec;
|
||||||
|
$orange-100: #fffaf7;
|
||||||
|
|
||||||
$main-text: $gray-800;
|
$main-text: $gray-800;
|
||||||
$main-background: $gray-50;
|
$main-background: $gray-50;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
$tiny-gap: 0.3rem;
|
||||||
$small-gap: 0.5rem;
|
$small-gap: 0.5rem;
|
||||||
$normal-gap: 1.5rem;
|
$normal-gap: 1.5rem;
|
||||||
$large-gap: 2.5rem;
|
$large-gap: 2.5rem;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue