add new sass stylesheet and refactor layout with semantic classes

3 files changed, 106 insertions, 88 deletions

diff --git a/source/entdecken/raeume.html.erb b/source/entdecken/raeume.html.erb
index 34e008d..b205ba0 100644
--- a/source/entdecken/raeume.html.erb
+++ b/source/entdecken/raeume.html.erb
@@ -1,67 +1,63 @@
 ---
 section: "entdecken"
 ---
-<div>
-
-  <h2>
-    [ Räume ]
-  </h2>
-  <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>
-  </p>
-
-  <h3>Lounge</h3>
-  <%= 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.
-  </p>
-
-  <h3>Werkstatt</h3>
-  <%= 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.
-  </p>
-
-  <h3>Hacklab</h3>
-  <%= 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.
-  </p>
-
-  <h3>Uhrenraum</h3>
-  <%= 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.
-  </p>
-
-  <h3>Büro</h3>
-  <%= 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)
-  </p>
-
-  <h3>Lager</h3>
-  <%= 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.
-  </p>
-
-  <h3>Getränkelager</h3>
-  <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.
-  </p>
-
-</div>
+<h2>
+  [ Räume ]
+</h2>
+<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>
+</p>
+
+<h3>Lounge</h3>
+<%= 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.
+</p>
+
+<h3>Werkstatt</h3>
+<%= 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.
+</p>
+
+<h3>Hacklab</h3>
+<%= 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.
+</p>
+
+<h3>Uhrenraum</h3>
+<%= 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.
+</p>
+
+<h3>Büro</h3>
+<%= 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)
+</p>
+
+<h3>Lager</h3>
+<%= 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.
+</p>
+
+<h3>Getränkelager</h3>
+<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.
+</p>
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index b0cba82..3f642ff 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -12,8 +12,7 @@
     <!-- Use title if it's in the page YAML frontmatter -->
     <title><%= current_page.data.title || "sublab" %></title>
 
-    <%= stylesheet_link_tag "all", "bootstrap", "bootstrap-theme" %>
-
+    <%= stylesheet_link_tag "base" %>
     <%#= stylesheet_link_tag "http://localhost:9393/status.css" %>
 
     <%= javascript_include_tag  "all", "jquery", "bootstrap" %>
@@ -21,30 +20,20 @@
 
   <body class="<%= page_classes %>">
 
-    <div class="container">
-
-      <div class="header container">
-        <div class="row">
-          <div class="col-md-3">
-            <h1>sublab</h1>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-          <%= partial "navigation" %>
-      </div>
+      <!-- header -->
+      <header>
+        <h1>sublab</h1>
+      </header>
 
-      <% if (section = current_page.data.section) %>
-          <%= partial "nav_#{section}" %>
-      <% end %>
+      <!-- main navigation -->
+      <nav>
+        <%= partial "navigation" %>
+      </nav>
 
-      <div class="row">
-        <div class="col-md-9">
-          <%= yield %>
-        </div>
-      </div>
+      <!-- content -->
+      <section id="main">
+        <%= yield %>
+      </section>
 
-    </div> <!-- end container -->
   </body>
 </html>
diff --git a/source/stylesheets/base.css.scss b/source/stylesheets/base.css.scss
new file mode 100644
index 0000000..a38b784
--- /dev/null
+++ b/source/stylesheets/base.css.scss
@@ -0,0 +1,33 @@
+@import "bootstrap";
+
+header {
+  @extend .row;
+}
+
+body {
+  @extend .container;
+}
+
+nav {
+  @extend .row;
+}
+
+nav ul {
+  @extend .nav;
+  @extend .navbar-nav;
+  @extend .navbar-justified;
+}
+
+@media (min-width: 768px){
+  .navbar-nav{
+    margin: 0 auto;
+    display: table;
+    table-layout: fixed;
+    float:none;
+  }
+}
+
+ul.nav li.dropdown:hover ul.dropdown-menu{
+  display: block;
+  margin-top:0px
+}