mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Merge branch 'coderdojo'
This commit is contained in:
commit
6670961b84
7 changed files with 309 additions and 92 deletions
1
sites/coderdojo/_static/assets/logos
Symbolic link
1
sites/coderdojo/_static/assets/logos
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../../../angestoepselt/_static/assets/logos
|
||||
|
|
@ -22,10 +22,11 @@ eleventyNavigation:
|
|||
Schön, dass du an einem CoderDojo teilnehmen möchtest!
|
||||
Hier findest du schon mal die Details zur kommenden Veranstaltung:
|
||||
|
||||
> **Ort** – Online (Teilnahmelink kommt per Mail)
|
||||
> **Datum** – 16.01.2021
|
||||
> **Start** – 9:00 Uhr (gerne ab 8:30 eintreffen)
|
||||
> **Ende** – gegen 15:00 Uhr
|
||||
> **Datum**: Samstag, 11. März 2023
|
||||
> **Gastgeberin**: [iWelt GmbH + Co. KG.](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"}
|
||||
> **Ort**: [Mainparkring 4](https://www.openstreetmap.org/way/208973341){target="_blank" rel="noopener noreferrer"}, 97246 Eibelstadt
|
||||
> **Start**: 9:00 Uhr (gerne ab 8:30 eintreffen)
|
||||
> **Ende**: gegen 15:00 Uhr
|
||||
|
||||
<form method="post" action="/anmelden">
|
||||
|
||||
|
|
@ -66,20 +67,20 @@ Bitte gebe außerdem eine E-Mail-Adresse an, an die wir Informationen zur Verans
|
|||
<input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
|
||||
</label>
|
||||
|
||||
Während der Veranstaltungen werden möglicherweise Fotos gemacht und von uns online auf unserer Homepage (aber nicht in sozialen Netzwerken) zur Verfügung gestellt.
|
||||
Während der Veranstaltungen werden möglicherweise Fotos gemacht und von uns online auf unserer [Homepage](/rueckblick){target="_blank"} (aber nicht in sozialen Netzwerken) zur Verfügung gestellt.
|
||||
Bist du damit einverstanden?
|
||||
|
||||
<input type="radio" id="photos-yes" class="radio-input" name="photos" required value="yes" />
|
||||
<div class="form-input">
|
||||
<label for="photos-yes">
|
||||
Ja, <span data-mode="self">es dürfen Fotos von mir gemacht werden</span><span data-mode="child">mein Kind darf fotografiert werden</span>.
|
||||
Die Fotos werden möglicherweise Online in einer Galerie gezeigt.
|
||||
Ja<span data-mode="self">, es dürfen Fotos von mir gemacht werden</span><span data-mode="child">, mein Kind darf fotografiert werden</span>.
|
||||
Die Fotos werden möglicherweise online in einer Galerie gezeigt.
|
||||
</label>
|
||||
</div>
|
||||
<input type="radio" id="photos-no" class="radio-input" name="photos" required value="no" />
|
||||
<div class="form-input">
|
||||
<label for="photos-no">
|
||||
Nein, <span data-mode="self">ich möchte nicht fotografiert werden</span><span data-mode="child">mein Kind soll bei den Fotos ausgelassen werden</span>.
|
||||
Nein<span data-mode="self">, ich möchte nicht fotografiert werden</span><span data-mode="child">, mein Kind soll bei den Fotos ausgelassen werden</span>.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -93,7 +94,7 @@ Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kanns
|
|||
<!-- FORM -->
|
||||
|
||||
<div class="form-submit">
|
||||
<input type="submit" value="Abschicken" />
|
||||
<input type="submit" value="Anmeldung abschicken" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ Kostenlose Programmier- und Techniktreffen für Kinder und Jugendliche im Raum W
|
|||
|
||||
<a href="/anmelden">
|
||||
<h3>Jetzt anmelden</h3>
|
||||
<em class="inline-callout">Sa. 11.03.23 @ iWelt, Eibelstadt</em>
|
||||
</a>
|
||||
|
||||
<a href="https://forum.coderdojo-wue.de/" target="_blank">
|
||||
|
|
@ -64,7 +65,7 @@ Falls Du einen eigenen Laptop hast, bringe ihn bitte mit.
|
|||
## Unsere Geschichte
|
||||
|
||||
Unser Ziel ist es, Begeisterung für Technik und Programmieren in Kindern und Jugendlichen zu wecken und damit Digitalkompetenz zu vermitteln.
|
||||
Das 2011 in Irland gegründete [CoderDojo](https://coderdojo.com/) Projekt, welches inzwischen zur [Raspberry Pi foundation](https://www.raspberrypi.org/) gehört, war der Startschuss für Veranstaltungen auf der ganzen Welt, die genau dieses Ziel verfolgen.
|
||||
Das 2011 in Irland gegründete [CoderDojo](https://coderdojo.com/) Projekt, welches inzwischen zur [Raspberry Pi Foundation](https://www.raspberrypi.org/) gehört, war der Startschuss für Veranstaltungen auf der ganzen Welt, die genau dieses Ziel verfolgen.
|
||||
Seitdem sind CoderDojos auch überall in Deutschland entstanden - in Kooperationen mit diversen Unternehmen, die ihre Zeit, Räumlichkeiten und Mittel für die Verpflegung zur Verfügung stellen.
|
||||
|
||||
[Zu den bisherigen Veranstaltungen](/rueckblick){.cta-link}
|
||||
|
|
|
|||
|
|
@ -9,75 +9,179 @@ contentClass: expand
|
|||
|
||||
# Unsere bisherigen Veranstaltungen
|
||||
|
||||
Seit dem ersten sehr erfolgreichen CoderDojo in Würzburg am 25.03.2017 an der FHWS (siehe [hier](https://www.mainpost.de/regional/wuerzburg/FH-Workshop-Programmieren-fuer-junge-Menschen;art735,9556077)), gibt es sie auch in Würzburg in regelmäßigen Abständen.
|
||||
Seit dem ersten sehr erfolgreichen CoderDojo in Würzburg am 25.03.2017 an der FHWS, gibt es sie auch in Würzburg in regelmäßigen Abständen.
|
||||
Das Projekt steht unter der Schirmherrschaft von [Angestöpselt](https://www.angestoepselt.de/), einem gemeinnützigen Verein, der es sich zum Ziel gemacht hat, den Zugang zur digitalen Welt für alle zu ermöglichen, oder zumindest zu erleichtern.
|
||||
Über das Schwesterprojekt Computerspende können Bedürftige Rechner und Peripherie, die wir von Spendern erhalten, gratis beantragen.
|
||||
|
||||
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,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,85 @@
|
|||
margin-top: #{-1 * layout.$normal-gap};
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-preview {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
|
||||
grid-template-rows: var(--y1, 50%) minmax(0, 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%)) minmax(0, 1fr);
|
||||
grid-template-rows: var(--y2, var(--x2, 50%)) minmax(0, 1fr);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
|
||||
> img:nth-of-type(1),
|
||||
> div:nth-of-type(1) > img,
|
||||
> img:nth-of-type(3),
|
||||
> div:nth-of-type(3) > img {
|
||||
grid-column: unset;
|
||||
grid-row: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
&.two {
|
||||
grid-template-columns: var(--a1, 50%) minmax(0, 1fr);
|
||||
|
||||
&:hover {
|
||||
grid-template-columns: var(--a2, 50%) minmax(0, 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