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.
|
||||
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 <time datetime="2023-03-11">11. März 2023</time>
|
||||
|
||||
### 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 <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 %}
|
||||
|
|
|
|||
|
|
@ -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,33 +91,13 @@
|
|||
transform: translateY(-100%);
|
||||
transition: background-color motion.$subtle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .stamp {
|
||||
> time {
|
||||
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;
|
||||
float: right;
|
||||
transition: background-color motion.$subtle;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
> p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
$tiny-gap: 0.3rem;
|
||||
$small-gap: 0.5rem;
|
||||
$normal-gap: 1.5rem;
|
||||
$large-gap: 2.5rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue