add grid for raeume and verein

2 files changed, 156 insertions, 111 deletions

diff --git a/source/entdecken/raeume.html.haml b/source/entdecken/raeume.html.haml
index 68b8cda..a874364 100644
--- a/source/entdecken/raeume.html.haml
+++ b/source/entdecken/raeume.html.haml
@@ -1,55 +1,91 @@
 ---
 section: "entdecken"
 ---
-%h2
-  Die Räume
-%p
-  Das sublab besteht aus mehreren Räumen mit insgesamt ca. 200qm Grundfläche.
-  %br/
-  Hier findest du eine kurze Auflistung der Räume mit ihrem Zweck, ihrem Zweck und Zustand
-  %br/
-%h3 Lounge
-= image_with_thumb("lounge.jpg", caption: "Die Bar")
-%p
-  Der mit Abstand größte Raum des sublabs ist die Lounge. neben einer Bühne (ca. 5m x 3m) ist hier auch die Bar sowie
-  mehrere Sitzecken und der Kickertisch zu finden.
-%h3 Werkstatt
-= image_with_thumb("werkstatttisch.jpg", caption: "Die Werkstatt")
-%p
-  Wenn es etwas zu basteln, schrauben, messen oder löten gibt, dann ist die Werkstatt genau der richtige Ort zur Lösung
-  des Problems.
-  %br/
-  Hier finden sich nicht nur Werkzeuge sondern auch Verbrauchsmaterialien wie Schrumpfschläuche,
-  Widerstände, Platinen, ...
-  %br/
-  Aber Achtung: nicht alles was rumliegt ist Public Domain! Im Zweifelsfall bitte nachfragen.
-%h3 Hacklab
-= image_with_thumb("hacklab.jpg", caption: "Das Hacklab")
-%p
-  Der Seminarraum im sublab aka. Hacklab ist nüchtern eingerichtet. Hierhin zieht man sich zurück, wenn man in Ruhe an
-  einem Projekt arbeiten will.
-  %br/
-  Hier hängt ein riesiges Whiteboard (ca. 1,5m x 3m) an der Wand.
-%h3 Uhrenraum
-= image_with_thumb("uhrenraum.jpg", caption: "Der Uhrenraum")
-%p
-  Der Uhrenraum beherbergt neben der Ansteuerung für die Außenuhr auch eine gemütliche Sitzecke.
-  %br/
-  Es ist der einzige Raum im sublab, in dem das Rauchen gestattet ist.
-%h3 Büro
-= image_with_thumb("buero.jpg", caption: "Das Büro")
-%p
-  Hier werden die wegweisenden Entscheidungen des Vorstandes des Trägervereins sublab e.V. gefällt. Wer diesen Raum
-  betritt, spürt die ganz besondere Atmosphäre sofort im gesamten Körper. (Spoiler: Es ist Jucken am ganzen Körper, weil
-  hier mal Steinwolle gelagert wurde)
-%h3 Lager
-= image_with_thumb("werkstattregal.jpg", caption: "Eines der Lagerregale (Werkstatt)")
-%p
-  Es gibt im sublab eine Menge an Lagerflächen und -regalen.
-  Im Lagerraum liegt nur ein Bruchteil der Teile, die man hier so haben will.
-%h3 Getränkelager
-%p
-  Ist eigentlich kein richtiger Raum, dennoch aufgrund der enormen Wichtigkeit (Versorung der sublab-Mitglieder und
-  Besucher mit Getränken) durchaus erwähnenswert.
-  %br/
-  Das Getränkelager befindet sich an einem geheimen Ort, der nur einem erlesenen Personenkreis bekannt ist.
+.row
+  .medium-12.columns
+    %h2
+      Die Räume
+  .medium-12.columns
+    %p
+      Das sublab besteht aus mehreren Räumen mit insgesamt ca. 200qm Grundfläche.
+      %br/
+      Hier findest du eine kurze Auflistung der Räume mit ihrem Zweck, ihrem Zweck und Zustand
+      %br/
+
+.row
+  .medium-12.columns
+    %h3 Lounge
+  .medium-6.columns
+    = image_with_thumb("lounge.jpg", caption: "Die Bar")
+  .medium-6.columns
+    %p
+      Der mit Abstand größte Raum des sublabs ist die Lounge. neben einer Bühne (ca. 5m x 3m) ist hier auch die Bar sowie
+      mehrere Sitzecken und der Kickertisch zu finden.
+
+.row
+  .medium-12.columns
+    %h3 Werkstatt
+  .medium-6.columns
+    = image_with_thumb("werkstatttisch.jpg", caption: "Die Werkstatt")
+  .medium-6.columns
+    %p
+      Wenn es etwas zu basteln, schrauben, messen oder löten gibt, dann ist die Werkstatt genau der richtige Ort zur Lösung
+      des Problems.
+      %br/
+      Hier finden sich nicht nur Werkzeuge sondern auch Verbrauchsmaterialien wie Schrumpfschläuche,
+      Widerstände, Platinen, ...
+      %br/
+      Aber Achtung: nicht alles was rumliegt ist Public Domain! Im Zweifelsfall bitte nachfragen.
+
+.row
+  .medium-12.columns
+    %h3 Hacklab
+  .medium-6.columns
+    = image_with_thumb("hacklab.jpg", caption: "Das Hacklab")
+  .medium-6.columns
+    %p
+      Der Seminarraum im sublab aka. Hacklab ist nüchtern eingerichtet. Hierhin zieht man sich zurück, wenn man in Ruhe an
+      einem Projekt arbeiten will.
+      %br/
+      Hier hängt ein riesiges Whiteboard (ca. 1,5m x 3m) an der Wand.
+
+.row
+  .medium-12.columns
+    %h3 Uhrenraum
+  .medium-6.columns
+    = image_with_thumb("uhrenraum.jpg", caption: "Der Uhrenraum")
+  .medium-6.columns
+    %p
+      Der Uhrenraum beherbergt neben der Ansteuerung für die Außenuhr auch eine gemütliche Sitzecke.
+      %br/
+      Es ist der einzige Raum im sublab, in dem das Rauchen gestattet ist.
+
+.row
+  .medium-12.columns
+    %h3 Büro
+  .medium-6.columns
+    = image_with_thumb("buero.jpg", caption: "Das Büro")
+  .medium-6.columns
+    %p
+      Hier werden die wegweisenden Entscheidungen des Vorstandes des Trägervereins sublab e.V. gefällt. Wer diesen Raum
+      betritt, spürt die ganz besondere Atmosphäre sofort im gesamten Körper. (Spoiler: Es ist Jucken am ganzen Körper, weil
+      hier mal Steinwolle gelagert wurde)
+
+.row
+  .medium-12.columns
+    %h3 Lager
+  .medium-6.columns
+    = image_with_thumb("werkstattregal.jpg", caption: "Eines der Lagerregale (Werkstatt)")
+  .medium-6.columns
+    %p
+      Es gibt im sublab eine Menge an Lagerflächen und -regalen.
+      Im Lagerraum liegt nur ein Bruchteil der Teile, die man hier so haben will.
+
+.row
+  .medium-12.columns
+  %h3 Getränkelager
+  .medium-12.columns
+    %p
+      Ist eigentlich kein richtiger Raum, dennoch aufgrund der enormen Wichtigkeit (Versorung der sublab-Mitglieder und
+      Besucher mit Getränken) durchaus erwähnenswert. Das Getränkelager befindet sich an einem geheimen Ort, der nur einem
+      erlesenen Personenkreis bekannt ist.
diff --git a/source/entdecken/verein.html.haml b/source/entdecken/verein.html.haml
index 3ccdb22..a822d60 100644
--- a/source/entdecken/verein.html.haml
+++ b/source/entdecken/verein.html.haml
@@ -1,62 +1,71 @@
 ---
 section: "entdecken"
 ---
-%div
-  %h2
-    Der Verein
-  %p
-    Der sublab e.V. wurde 2008 gegründet und hat seitdem die angemieteten Räumlichkeiten im Westwerk renoviert,
-    elektrifiziert und in einen nutzbaren Zustand versetzt.
-    %br/
-    %a{:href => "inc/sublab_ev_mitgliedsantrag.pdf"} Hier
-    geht's zum Mitgliedsantrag.
-  %h3
-    sublab e.V.
-  %p
-    Das sublab wird durch den gemeinnützigen Verein sublab e.V., dessen Mitgliedern sowie von Spendern getragen. Die
-    Kombination eines öffentlichen Raumes mit dem Angebot in sich geschlossener Arbeitsstätten wird dadurch erst
-    ermöglicht. Der Verein ermöglicht es die Wartung, Anmietung und den Ausbau des Spaces zu finanzieren.
-    %br/
-    Die breite Unterstützung verschiedener Zugänge zu Technik das erklärte Ziel des sublabs, sei dies nun Hardware, Hacking,
-    Medienkunst oder Hacktivism.
-  %h3
-    Vereinsarbeit
-  %p
-    Durch die Arbeit des Vereins werden vielen Leipziger Gruppen, die sich mit Technik und verwandten Themen beschäftigen,
-    die Möglichkeiten gegeben sich zu treffen und zu arbeiten. Die notwendige Infrastruktur wird den Nutzern vom sublab
-    kostenlos zur Verfügung gestellt, da viele Gruppen keine finanziellen Mittel haben, eigene Räumlichkeiten zu
-    unterhalten. So trifft sich im sublab u.a. regelmäßig der Leipziger Chaostreff, um Workshops und Vorträge rund um
-    aktuelle Technikthemen, z.B. Mikrokontrollerprogrammierung, zu halten.  Sobald die Räume fertig renoviert sind, werden
-    im sublab auch Workshops stattfinden um Kinder und Jugendliche mit Technik in Berührung zu bringen, und ihre
-    Kenntnisse über Funktionsweise aber auch Nutzen und Gefahren zu verbessern.
-  %h3
-    Gemeinnützigkeit
-  %p
-    Der sublab e.V. ist ein gemeinnütziger Verein, der sich ausschließlich durch die Beiträge der Mitglieder und durch
-    Spenden finanziert und finanzieren kann. Durch die anerkannte Gemeinnützigkeit sind wir in der Lage steuerlich
-    absetzbare Spendenquittungen auszustellen.
-    %br/
-    Wenngleich wir bemüht sind die Strukturen flach zu halten bringt so ein juristischer Körper neben Vorteilen auch
-    einige Anforderungen an den Papierkram mit sich.
-  %h3
-    Über den Verein
-  %p
-    Eine kurze prägnante Beschreibung des sublab ist hier zu finden:
-    %a{:href => "inc/was_ist_das_sublab.pdf"} Was ist das sublab? (pdf)
-  #moods
-    = asset_with_thumb("/inc/was_ist_das_sublab.pdf", thumbnail: "wasistdassublab.png", caption: "Was ist das sublab? (pdf)")
-    = asset_with_thumb("/inc/sublab-presentation.pdf", thumbnail: "presi.png", caption: "Ubucon Präsentation (pdf)")
-  %h3
-    Dokumente
-  %p
-    %a{:href => "inc/sublab_ev_mitgliedsantrag.pdf"} Mitgliedsantrag
-    %br/
-    %a{:href => "inc/sublab_ev_satzung.pdf"} Vereinssatzung
-    %br/
-    %a{:href => "inc/sublab_ev_geschaeftsordnung.pdf"} Geschäftsordnung
-    %br/
-    %a{:href => "inc/sublab_ev_geldspendenquittung.pdf"} Geldspendenquittung
-    %br/
-    %a{:href => "inc/sublab_ev_sachspendenquittung.pdf"} Sachspendenquittung
-    %br/
-    %a{:href => "inc/sublab_ev_einzugsermaechtigung.pdf"} Einzugsermächtigung
+.row
+  .small-12.columns
+    %h2
+      Der Verein
+    %p
+      Der sublab e.V. wurde 2008 gegründet und hat seitdem die angemieteten Räumlichkeiten im Westwerk renoviert,
+      elektrifiziert und in einen nutzbaren Zustand versetzt.
+
+.row
+  .small-12.columns
+    %h3
+      sublab e.V.
+    %p
+      Das sublab wird durch den gemeinnützigen Verein sublab e.V., dessen Mitgliedern sowie von Spendern getragen. Die
+      Kombination eines öffentlichen Raumes mit dem Angebot in sich geschlossener Arbeitsstätten wird dadurch erst
+      ermöglicht. Der Verein ermöglicht es die Wartung, Anmietung und den Ausbau des Spaces zu finanzieren.
+      %br/
+      Die breite Unterstützung verschiedener Zugänge zu Technik das erklärte Ziel des sublabs, sei dies nun Hardware, Hacking,
+      Medienkunst oder Hacktivism.
+.row
+  .small-12.medium-8.columns
+    %h3
+      Vereinsarbeit
+    %p
+      Durch die Arbeit des Vereins werden vielen Leipziger Gruppen, die sich mit Technik und verwandten Themen beschäftigen,
+      die Möglichkeiten gegeben sich zu treffen und zu arbeiten. Die notwendige Infrastruktur wird den Nutzern vom sublab
+      kostenlos zur Verfügung gestellt, da viele Gruppen keine finanziellen Mittel haben, eigene Räumlichkeiten zu
+      unterhalten. So trifft sich im sublab u.a. regelmäßig der Leipziger Chaostreff, um Workshops und Vorträge rund um
+      aktuelle Technikthemen, z.B. Mikrokontrollerprogrammierung, zu halten.  Sobald die Räume fertig renoviert sind, werden
+      im sublab auch Workshops stattfinden um Kinder und Jugendliche mit Technik in Berührung zu bringen, und ihre
+      Kenntnisse über Funktionsweise aber auch Nutzen und Gefahren zu verbessern.
+  .small-12.medium-4.columns
+    %h3
+      Dokumente
+    .panel
+      %p
+        %a{:href => "inc/sublab_ev_mitgliedsantrag.pdf"} Mitgliedsantrag
+        %br/
+        %a{:href => "inc/sublab_ev_satzung.pdf"} Vereinssatzung
+        %br/
+        %a{:href => "inc/sublab_ev_geschaeftsordnung.pdf"} Geschäftsordnung
+        %br/
+        %a{:href => "inc/sublab_ev_geldspendenquittung.pdf"} Geldspendenquittung
+        %br/
+        %a{:href => "inc/sublab_ev_sachspendenquittung.pdf"} Sachspendenquittung
+        %br/
+        %a{:href => "inc/sublab_ev_einzugsermaechtigung.pdf"} Einzugsermächtigung
+.row
+  .small-12.columns
+    %h3
+      Gemeinnützigkeit
+    %p
+      Der sublab e.V. ist ein gemeinnütziger Verein, der sich ausschließlich durch die Beiträge der Mitglieder und durch
+      Spenden finanziert und finanzieren kann. Durch die anerkannte Gemeinnützigkeit sind wir in der Lage steuerlich
+      absetzbare Spendenquittungen auszustellen.
+      %br/
+      Wenngleich wir bemüht sind die Strukturen flach zu halten bringt so ein juristischer Körper neben Vorteilen auch
+      einige Anforderungen an den Papierkram mit sich.
+.row
+  .small-12.columns
+    %h3
+      Über den Verein
+    %p
+      Eine kurze prägnante Beschreibung des sublab ist hier zu finden:
+      %a{:href => "inc/was_ist_das_sublab.pdf"} Was ist das sublab? (pdf)
+.row
+  = asset_with_thumb("/inc/was_ist_das_sublab.pdf", thumbnail: "wasistdassublab.png", caption: "Was ist das sublab? (pdf)", container_opts: {class: "small-12 large-6 columns"})
+  = asset_with_thumb("/inc/sublab-presentation.pdf", thumbnail: "presi.png", caption: "Ubucon Präsentation (pdf)", container_opts: {class: "small-12 large-6 columns"})