From 012d85876278aef79bda8b1e89cdf85d5868c269 Mon Sep 17 00:00:00 2001
From: Timm Szigat <timm@szigat.de>
Date: Tue, 4 Nov 2014 01:49:09 +0100
Subject: [PATCH] added nav design

---
 _includes/header.html | 25 ++++++++++++++----------
 css/style.css         | 45 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 177de74f..a195b4a1 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-  <hr id="status_bar" style="margin:0; border-width:4px 0px;">
+  <hr id="status_bar">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
@@ -12,30 +12,35 @@
     <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
         <li><a href="/">Home</a></li>
+        <li class="divider-vertical"></li>
         <li><a href="/blog.html">Logbuch</a></li>
+        <li class="divider-vertical"></li>
         <li><a href="/#about">&Uuml;ber uns</a></li>
+        <li class="divider-vertical"></li>
         <li><a href="#contact">Kontakt</a></li>
+        <li class="divider-vertical"></li>
+        <li><a href="http://wiki.chaospott.de">Wiki</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <script>
           $.getJSON("http://status.chaospott.de/status.json").done(function(data) {
             if(data.state.open) {
-              document.getElementById('status_open').style.display='block';
-              document.getElementById('status_bar').style.borderColor='#00ff00';
+              $( "#status_open" ).css( "display", "block" );
+              $( "#status_bar" ).css( "borderColor", "#00ff00" );
             } else {
-              document.getElementById('status_closed').style.display='block';
-              document.getElementById('status_bar').style.borderColor='#ff0000';
+              $( "#status_closed" ).css( "display", "block" );
+              $( "#status_bar" ).css( "borderColor", "#ff0000" );
 	          }
           });
         </script>
-        <li id="status_open" style="display:none; border-right:0;">
+        <li id="status_open">
           <a href="#" style="color:#00ff00 !important;">
-            Raum: offen
+            Raum offen
           </a>
         </li>
-        <li id="status_closed" style="display:none;">
-          <a href="#" style="color:#ff0000;">
-            Raum: geschlossen
+        <li id="status_closed">
+          <a href="#">
+            Raum geschlossen
           </a>
         </li>
       </ul>
diff --git a/css/style.css b/css/style.css
index 0dc17a01..49beb57e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -26,14 +26,6 @@ background-color:#d2d4bc;
 border:none;
 }
 
-ul.navbar-nav li {
-  border-right:1px red solid;
-}
-
-ul.navbar-nav li:last-child {
-  border-right:0;
-}
-
 ul.navbar-nav li a {
   color:red !important;
 }
@@ -101,3 +93,40 @@ ul.nav>li>a {
   display: block;
   margin:auto;
 }
+
+#status_open, #status_closed {
+  display:none; 
+  border:0;
+}
+
+#status_open a {
+  color:#00ff00 !important;
+}
+
+#status_closed a {
+  color:#ff0000 !important;
+}
+
+#status_bar {
+  margin:0; 
+  border-width:2px 0px;
+  border-color:transparent;
+}
+
+.navbar .divider-vertical {
+height: 20px;
+margin: 14px 9px;
+border-right: 1px solid #ff0000;
+border-left: 1px solid #ff0000;
+}
+
+.navbar-inverse .divider-vertical {
+border-right-color: #222222;
+border-left-color: #111111;
+}
+
+@media (max-width: 767px) {
+.navbar-collapse .nav > .divider-vertical {
+    display: none;
+  }
+}