diff --git a/content/blog/2024/03/2024-03-17_clt-2024/elektronik.jpg b/content/blog/2024/03/2024-03-17_clt-2024/elektronik.jpg new file mode 100644 index 0000000000000000000000000000000000000000..16a1aa74903ec9aaa75599ced992dbfa733661dc Binary files /dev/null and b/content/blog/2024/03/2024-03-17_clt-2024/elektronik.jpg differ diff --git a/content/blog/2024/03/2024-03-17_clt-2024/index.md b/content/blog/2024/03/2024-03-17_clt-2024/index.md index fcdd111668692e78d6beb5548b10ae37e7a3e36d..5c5825c4f08d16d73c107c95b17670f26d93ca38 100644 --- a/content/blog/2024/03/2024-03-17_clt-2024/index.md +++ b/content/blog/2024/03/2024-03-17_clt-2024/index.md @@ -6,6 +6,16 @@ authors = ["tuxilio", "krfl9500", "pinguin"] image = "stand-clt-2024.jpg" alt = "Florian, Robert, Lukas, Nik, Tuxilio und Pingu hinter einem orange gedeckten Infostand mit Plüsch-Leopard, Plüsch-Pinguin, einem Laptop und einigen Flyern" credits = "Dominik George, CC-BY-NC-ND" + +[[extra.gallery.photos]] +image = "elektronik.jpg" +alt = "Hände eines Kindes, die Drähte und LEDs auf ein Breadboard mit einem ESP stecken" +credits = "Dominik George, CC-BY" + +[[extra.gallery.photos]] +image = "spiele.jpg" +alt = "Blick über die Schulter eines Kindes, das an einem Laptop den Map-Editor Tiled bedient" +credits = "Dominik George, CC-BY" +++ Wir waren am Wochenende bei den [Chemnitzer Linux-Tagen](https://chemnitzer.linux-tage.de/2024/de/) (CLT). @@ -33,6 +43,8 @@ zu programmieren und eine Karte dafür zu gestalten. Am nächsten Tag gab es den Workshop "Minetest-Modding". Dabei konnten Kinder nach einer kleinen Einführung in das Thema ihre eigenen Mods entwickeln und ausprobieren. +{{ gallery(name="photos") }} + Wir selbst fanden es wichtig, dass wir mit unseren Workshops Kindern freie Software näher bringen konnten. Dabei wollten wir vermitteln, dass man Software auch [verändern und verstehen](@/infos/verstehen/index.md), statt nur passiv nutzen, kann. diff --git a/content/blog/2024/03/2024-03-17_clt-2024/spiele.jpg b/content/blog/2024/03/2024-03-17_clt-2024/spiele.jpg new file mode 100644 index 0000000000000000000000000000000000000000..42ba925f380b5997ecb282d6d3474c8d2f7a84d1 Binary files /dev/null and b/content/blog/2024/03/2024-03-17_clt-2024/spiele.jpg differ diff --git a/sass/_utils.scss b/sass/_utils.scss index d7d28d8b94120bdc472c1b85d271ef98cbdd4f2b..fb8e41c8628407d5490ed5b99ffaac3c3ebfc2f1 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -3,7 +3,7 @@ height: 70%; } -.card > .card-image figure.image > figcaption { +figure.image > figcaption { position: absolute; bottom: 0; width: 100%; diff --git a/templates/shortcodes/gallery.html b/templates/shortcodes/gallery.html new file mode 100644 index 0000000000000000000000000000000000000000..2786f98bad8d252a56cbb83c55eb566d51f1ec49 --- /dev/null +++ b/templates/shortcodes/gallery.html @@ -0,0 +1,17 @@ +<section class="section"> + <div class="columns is-multiline is-same-height is-centered is-mobile"> + {% for picture in page.extra.gallery[name] %} + <div class="column is-one-third is-half-mobile"> + <a href="#"> + <figure class="image is-4by3"> + {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ picture.image, width=800, height=600) -%} + <img src="{{image.url}}" alt="{{picture.alt}}" /> + {% if picture.image.credits %} + <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ picture.image.credits }}</figcaption> + {% endif %} + </figure> + </a> + </div> + {% endfor %} + </div> +</section>