From d88e47c177dee87408b960bfa45ba011014f2b6b Mon Sep 17 00:00:00 2001
From: "Philipp.Stahl" <philipp.stahl@teckids.org>
Date: Wed, 28 Apr 2021 20:15:35 +0200
Subject: [PATCH] Make page hacknfun look good
---
content/pages/de/informationen/hacknsun.md | 31 ++++++++++++----------
content/static/css/custom.css | 4 +++
2 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/content/pages/de/informationen/hacknsun.md b/content/pages/de/informationen/hacknsun.md
index 6faab08..95311ce 100644
--- a/content/pages/de/informationen/hacknsun.md
+++ b/content/pages/de/informationen/hacknsun.md
@@ -53,23 +53,26 @@ template: page_text
<div class="container" id="project-columns">
<div class="row">
<div class="col">
-## Hack'n'Sun
-Hack‘n‘Sun ist eine Kinder- und Jugendveranstaltung, die vom 9. bis 12.Juni auf dem Jugendzeltplatz in Sankt Augustin stattfindet. 2½ Tage lang finden Workshops zu "Umweltdaten und Heimautomatisierung" und "Spieleprogrammieren mit pygame" statt, und es gibt ein umfangreiches Rahmenprogramm mit Übernachtungen und Aktivitäten. Da die Teilnehmeranzahl aufgrund der Pandemie noch nicht absehbar ist, müssen Teilnehmer die über die Maximale Teilnehmeranzahl hinausgehen, vorerst auf eine Warteliste gesetzt werden.
- </div>
+<div class="jumbotron">
+ <h1 class="display-4">Hack'n'Sun</h1>
+ <p class="lead">Hack‘n‘Sun ist eine Kinder- und Jugendveranstaltung, die vom 9. bis 12.Juni auf dem Jugendzeltplatz in Sankt Augustin stattfindet. 2½ Tage lang finden Workshops zu "Umweltdaten und Heimautomatisierung" und "Spieleprogrammieren mit pygame" statt, und es gibt ein umfangreiches Rahmenprogramm mit Übernachtungen und Aktivitäten. Da die Teilnehmeranzahl aufgrund der Pandemie noch nicht absehbar ist, müssen Teilnehmer die über die Maximale Teilnehmeranzahl hinausgehen, vorerst auf eine Warteliste gesetzt werden.</p>
+ <hr class="my-4">
+ <p>Hier geht's zur Anmeldung.</p>
+ <p class="lead">
+ <a class="btn btn-primary btn-lg" href="#" role="button">Anmeldung</a>
+ </p>
+ </div>
<div class="row">
-## Projekte
-<ul>
-<h2> Umweltdaten und Heimautomatisierung </h2>
+ <div class="col">
+<h3> Umweltdaten und Heimautomatisierung </h3>
Der Workshop Umweltdaten und Heimautomatisierung befasst sich mit dem Thema Messung von Umweltdaten und deren elektronischen Verarbeitung. Ihr lernt das Programmieren eines Mikrocontrollers. Mit diesem könnt ihr dann verschiedene Sensoren ansprechen. Die gemessenen Daten können dann über das Matrix-Protokoll an euer Handy geschickt werden. Damit könnt ihr dann z.B. die Temperatur und Luftfeuchtigkeit in einem Raum messen und auf eurem Handy anzeigen lassen oder ihr baut einen Seonsor in euren Briefkasten, der euch informiert, wenn Briefe eingeworfen werden.
-
-<h2>Spieleprogrammieren mit pygame</h2>
-<img class="mr-3" src="/images/Beispiel-pygame.png" alt="Beispiel-Ergebnis pygame-Workshop">
-In diesem Workhsop lernen die Teilnehmer die Programmiersprache Python. Mithilfe von pygame können die Teilnehmer dann eigene 2D-Spiele programmieren und in diesem dann eine mit Tiled erstellte Karte als Spielumgebung einbinden. Die erstellten Spiele können die Teilnehmer dann auch Zuhause selber spielen und auch daran weiterarbeiten.
-</ul>
</div>
-<div class="row">
-<h2>Hier geht's zur Anmeldung</h2>
-<a class="btn btn-primary" href="#" role="button">Anmeldung</a>
+<div class="col">
+<h3>Spieleprogrammieren mit pygame</h3>
+<img class="mr-3" src="/images/Beispiel-pygame.png" alt="Beispiel-Ergebnis pygame-Workshop" id="bsp-pygame">
+<p>In diesem Workhsop lernen die Teilnehmer die Programmiersprache Python. Mithilfe von pygame können die Teilnehmer dann eigene 2D-Spiele programmieren und in diesem dann eine mit Tiled erstellte Karte als Spielumgebung einbinden. Die erstellten Spiele können die Teilnehmer dann auch Zuhause selber spielen und auch daran weiterarbeiten.
+</p>
+</div>
</div>
</div>
</div>
diff --git a/content/static/css/custom.css b/content/static/css/custom.css
index 242dfa9..df2737c 100644
--- a/content/static/css/custom.css
+++ b/content/static/css/custom.css
@@ -26,3 +26,7 @@
a.btn-fullwidth {
width: 100%;
}
+
+#bsp-pygame {
+ max-width: 300px;
+}
--
GitLab