Add Hack'n'Sun page content

content/blog/2024/03/2024-03-30_geburtstagsklettern/index.md

@@ -22,7 +22,7 @@ regelmäßig zusammen klettern gehen, drei der aktiven Jugendlichen dabei.
 In der Teckids-Gemeinschaft gehört es dazu, auch nicht technische Aktivitäten
 zusammen zu machen. Bei unseren [Campdays](@/gemeinschaft/campdays.md) finden
 regelmäßig Ausflüge statt, bei denen wir zum Beispiel Escape Rooms spielen,
-beim Team-Pausentag während [Hack'n'Sun](@/projekte/hack-n-fun/freizeiten/hacknsun.md)
+beim Team-Pausentag während [Hack'n'Sun](@/projekte/hack-n-fun/freizeiten/hacknsun/index.md)
 waren wir im Freibad, und unsere Kletter-Gruppe trifft sich eher spontan.
 
 Ob es dabei bleibt, dass unsere kletterfreudigen Kinder und Erwachsenen

content/projekte/hack-n-fun/freizeiten/hacknsun.md

-+++
-titel = "Hack'n'Sun"
-+++

content/projekte/hack-n-fun/freizeiten/hacknsun/index.md

++++
+title = "Hack'n'Sun"
+
+template = "pages/raw.html"
++++
+
+{% hero_section(title="Hack'n'Sun", background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=true) %}
+Technik, Hacking, Spaß und Freizeit bei Sonne und Lagerfeuer
+{% end %}
+
+{% photo_section(title="Computer und Draußen, so viel du magst", img="hacken_am_lagerfeuer.jpg", alt="Kinder mit Laptops an einer Lagerfeuerstelle", credit="Dominik George, CC-BY-SA") %}
+Bei Hack'n'Sun geht es um genau das, was der Name sagt – Hacken, also das Basteln mit Technik,
+und Sonne, denn wir sind die ganze Zeit draußen an der frischen Luft.
+
+Mehrere Tage lang treffen wir uns in einer großen Gruppe auf einem Jugendzeltplatz.
+Dort werden Pavillons aufgebaut, in denen [Workshops](@/projekte/hack-n-fun/workshops/index.md)
+stattfinden, und daneben ein großes Zeltlager.
+
+Tagsüber kann man zusammen alle möglichen versciedenen Dinge mit Elektronik, Programmieren
+und vielem mehr machen, und abends am Lagerfeuer sitzen, Toben, Beach-Volleyball spielen oder
+eine Nachtwanderung machen. Und wer nicht aufhören kann, an seinem Spiel zu programmieren, kann
+auch mit dem Laptop am Lagerfeuer sitzen.
+{% end %}
+
+{% photo_section(title="Lernen und Technikbasteln", img="workshopraum.jpg", alt="Programmierworkshop in einem Raum", credit="Dominik George, CC-BY-SA", align="right") %}
+In den [Workshops](@/projekte/hack-n-fun/workshops/index.md) bieten die Kinder und
+Jugendlichen aus der [Teckids-Gemeinschaft](@/gemeinschaft/wer.md) allen
+Teilnehmenden an, selber Spiele, Apps oder elektronische Geräte zu
+entwerfen und zu bauen. Denn Technik kann man
+[hinterfragen, verstehen und selber bauen](@/infos/verstehen/index.md)!
+
+Die Workshops sind so gestaltet, dass am Vormittag und am Nachmittag mehrere
+Workshops von etwa drei Stunden Dauer angeboten werden. Die Tutor\*innen aus
+dem Team haben verschiedene Themen vorbereitet, so dass alle erstmal ausprobieren
+können, was möglich ist.
+
+Wer nach drei Stunden genug von einem Thema hat, kann am Nachmittag ein anderes
+Thema ausprobieren. Wer sich in sein Thema aber noch mehr vertiefen möchte, kann
+auch noch länger bei seinem Thema bleiben. Eigene Ideen sind auch jederzeit
+willkommen!
+{% end %}
+
+{% photo_section(title="Essen, Trinken, Schlafen", img="essen.jpg", alt="Niklas mit Kochmütze verteilt Crêpes", credit="Dominik George, CC-BY-NC-ND") %}
+Natürlich ist auch für das leibliche Wohl gesorgt, denn während der Freizeit
+leben alle zusammen als Gemeinschaft. Beim Essen versuchen wir, uns den Wünschen
+der Teilnehmenden anzupassen. Bei der Anmeldung darf man schon sein Lieblingsessen
+angeben, und auch vor Ort haben wir immer ein offenes Ohr für Wünsche.
+
+Üblicherweise gibt es:
+
+* Frühstück ab etwa 9 Uhr, mit Brötchen, Aufschnitt, Rührei, Müsli
+* Snacks während des ganzen Tages (Obst, Rohkost, Kekse, Studentenfutter)
+* Nachmittagsüberraschung
+* Warmes Abendessen (z.B. Nudeln, selbstgemachte Pizza oder Grillen)
+
+Übernachten kann man entweder mit einer Kleingruppe oder alleine im selbt mitgebrachten
+Zelt oder in einer größeren Gruppe in unseren Gruppenzelten.
+{% end %}
+
+{{ event_section(title="Die nächsten Hack'n'Sun", slug="hacknsun-2024-bn") }}

content/projekte/hack-n-fun/freizeiten/index.md

@@ -9,7 +9,7 @@ zielgruppe = ["Kinder und Jugendliche", "Eltern"]
 image = "hacken_am_lagerfeuer.jpg"
 alt = "Mehrere Jugendliche sitzen an einen Lagerfeuer und entwickeln an ihrem eigenem Spiel"
 title = "Hack'n'Sun"
-link = "@/projekte/hack-n-fun/freizeiten/hacknsun.md"
+link = "@/projekte/hack-n-fun/freizeiten/hacknsun/index.md"
 description = "Unsere Jährliche Sommerfreizeit mit vielen Workshops, Spielen und viel spaß!"
 
 [[extra.further.freizeit]]

events.json

@@ -5,5 +5,12 @@
     "location": "Graz",
     "date": "2024-04-06",
     "cost": 40
+  },
+  "hacknsun-2024-bn": {
+    "display_name": "Hack'n'Sun 2024 (Jugendzeltplatz Bonn)",
+    "description": "Große Sommerfreizeit in Bonn-Bad Godesberg mit Ausflügen zu FrOScon und Museen",
+    "location": "Bonn",
+    "date": "2024-08-19",
+    "cost": 150
   }
 }

sass/_utils.scss

@@ -3,7 +3,7 @@
   height: 70%;
 }
 
-figure.image > figcaption {
+figure.image>figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -31,3 +31,20 @@ figure.image > figcaption {
 .author-images>figure:last-child {
   margin-right: 0;
 }
+
+.hero.has-background {
+  position: relative;
+  overflow: hidden;
+
+  img.hero-background {
+    position: absolute;
+    object-fit: cover;
+    object-position: center center;
+    width: 100%;
+    height: 100%;
+  }
+
+  img.hero-background.is-transparent {
+    opacity: 0.3;
+  }
+}

templates/pages/raw.html

+{% extends "base.html" %}
+
+{% block main %}
+  {{ page.content | safe }}
+{% endblock %}

templates/shortcodes/event_section.html

+<section class="section">
+  <div class="container">
+    {% if title %}<h2 class="title is-2">{{ title }}</h2>{% endif %}
+    {% set no_title = true -%}
+    {% include "shortcodes/teckids_event.html" %}
+  </div>
+</section>

templates/shortcodes/hero_section.html

+<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
+  {% if background_img %}
+    {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
+  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" />
+  {% endif -%}
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">{{ title }}</h1>
+      {% if body %}<p class="subtitle">{{ body }}</p>{% endif -%}
+    </div>
+  </div>
+</section>

templates/shortcodes/photo_section.html

 <section class="section">
-  <h2 class="title is-2">{{ title }}</h2>
-  <div class="columns is-vcentered">
-    <div class="column">
-      <figure class="image is-4by3">
-        {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ img, width=800, height=600) -%}
-        <img src="{{image.url}}" alt="{{ alt }}"/>
-        {% if credit %}
-        <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ credit }}</figcaption>
-        {% endif %}
-      </figure>
-    </div>
-    <div class="column content">
-      {{ body|markdown|safe }}
+  <div class="container">
+    {% if title %}<h2 class="title is-2">{{ title }}</h2>{% endif %}
+    <div class="columns is-vcentered mt-4">
+      <div class="column is-one-third {% if align|default(value="left") == "right" %}is-pulled-right{% endif %}">
+        <figure class="image is-4by3">
+          {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ img, width=800, height=600) -%}
+          <img src="{{image.url}}" alt="{{ alt }}"/>
+          {% if credit %}
+          <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ credit }}</figcaption>
+          {% endif %}
+        </figure>
+      </div>
+      <div class="column is-two-thirds content">
+        {{ body|markdown|safe }}
+      </div>
     </div>
   </div>
 </section>

templates/shortcodes/teckids_event.html

 {% set events_data = load_data(path="events.json") -%}
 {% set event = events_data[slug] -%}
-<h2>{{ title | default(value="Informationen und Anmeldung") }}</h2>
+{% if not no_title %}<h2 class="title is-2">{{ title | default(value="Informationen und Anmeldung") }}</h2>{% endif %}
 <section class="section event-section">
   <div class="card event-card">
     <div class="card-content">