Menu rework und font sizes (freifunkMUC#147)

* use default navbar-fixed-top * reduce font-sizes
privatereese · Jul 4, 2016 · 4548e33 · 4548e33
1 parent eb49b91
commit 4548e33
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 105 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,53 +1,49 @@
 <header class="site-header">
 
-  <div class="wrap">
-
-
-    <a class="site-title" href="{{ site.baseurl }}/"><img width=100px height=100px src="{{ site.baseurl }}/assets/Ffmuc-logo-250.png"> {{ site.title }}</a>
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
+    </div>
 
-<!-- Fixed navbar -->
-    <div class="navbar navbar-fixed" role="navigation">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>          
-        </div>
-        <div class="navbar-collapse collapse">
-          <ul class="nav navbar-nav">
-            <li class="active"><a href="/">Home</a></li>
-            <li><a href="/wasistfreifunk">Was ist Freifunk?</a></li>
-            <li class="dropdown">
-              <a href="/mitmachen">Mitmachen<b class="caret"></b></a>
-              <ul class="dropdown-menu">                
-                <li><a class="page-link" href="/firmware">1. Firmware herunterladen</a></li>
-                <li><a class="page-link" href="/router-flashen">2. Router flashen</a></li>
-                <li><a class="page-link" href="/router-konfigurieren">3. Router konfigurieren</a></li>
-                <li><a class="page-link" href="/verbreiten">Infomaterial</a></li>
-                <li><a class="page-link" href="/unterstuetzung">Unterstützung</a></li>
-              </ul>
-            </li>
-            <li><a href="/map">Knotenkarte</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/nutzungsbedingungen">Nutzungsbedingungen</a></li>
-            <li><a href="/wiki">Wiki</a></li>
-            <li><a href="/podcast">Podcast</a></li>
-            <li class="dropdown">
-              <a href="/dienste">Dienste<b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a class="page-link" href="https://chat.ffmuc.net">Chat</a></li>
-                <li><a class="page-link" href="https://lqfb.freifunk-muenchen.de/">Liquid-Feedback</a></li>
-                <li><a class="page-link" href="https://ffmuc.net/pad/">Etherpad</a></li>
-              </ul>
-            </li>
-            <li><a href="/kontakt">Kontakt</a></li> 
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="/wasistfreifunk">Was ist Freifunk?</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mitmachen <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a class="page-link" href="/firmware">1. Firmware herunterladen</a></li>
+            <li><a class="page-link" href="/router-flashen">2. Router flashen</a></li>
+            <li><a class="page-link" href="/router-konfigurieren">3. Router konfigurieren</a></li>
+            <li><a class="page-link" href="/verbreiten">Infomaterial</a></li>
+            <li><a class="page-link" href="/unterstuetzung">Unterstützung</a></li>
           </ul>
-        </div><!--/.nav-collapse -->
-      </div>
-    </div>
-  </div>
+        </li>
+        <li><a href="/map">Knotenkarte</a></li>
+        <li><a href="/faq">FAQ</a></li>
+        <li><a href="/nutzungsbedingungen">Nutzungsbedingungen</a></li>
+        <li><a href="/wiki">Wiki</a></li>
+        <li><a href="/podcast">Podcast</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dienste <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a class="page-link" href="https://chat.ffmuc.net">Chat</a></li>
+            <li><a class="page-link" href="https://lqfb.freifunk-muenchen.de/">Liquid-Feedback</a></li>
+            <li><a class="page-link" href="https://ffmuc.net/pad/">Etherpad</a></li>
+          </ul>
+        </li>
+        <li><a href="/kontakt">Kontakt</a></li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container -->
+</nav>
 
 </header>
diff --git a/_includes/network-status.md b/_includes/network-status.md
@@ -1,4 +1,4 @@
-### Netzwerk Status
+## Netzwerk Status
 <u><b>Aktuell:</b></u>
 <br>Keine Arbeiten oder Störungen am System
 <br>

diff --git a/_includes/treffen.md b/_includes/treffen.md
@@ -1,4 +1,4 @@
-### Treffen
+## Treffen
 
 Wir treffen uns immer am letzten Mittwoch des Monats im [muCCC](http://muc.ccc.de) ([Schleißheimer Str. 41](http://osm.org/go/0JAf0IVLh?node=2012031859)).
 

diff --git a/css/main.css b/css/main.css
@@ -12,10 +12,11 @@ html, body { height: 100%; }
 
 body {
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 16px;
+
   line-height: 1.5;
   font-weight: 300;
   background-color: #fdfdfd;
+  padding-top: 60px;
 }
 
 h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
@@ -24,12 +25,6 @@ a         { color: #2a7ae2; text-decoration: none; }
 a:hover   { color: #000; text-decoration: underline; }
 a:visited { color: #205caa; }
 
-/* Fix to show dropdown menu in navi also when hovering */
-ul.nav li.dropdown:hover ul.dropdown-menu{
-  display: block;
-  margin-top:0px
-}
-
 /* Utility */
 
 .wrap:before,
@@ -50,42 +45,6 @@ ul.nav li.dropdown:hover ul.dropdown-menu{
 /* Layout Styles */
 /* ----------------------------------------------------------*/
 
-/* Site header */
-
-.site-header {
-  border-top: 5px solid #333;
-  border-bottom: 1px solid #e8e8e8;
-  min-height: 56px;
-  background-color: white;
-}
-
-.site-title,
-.site-title:hover,
-.site-title:visited {
-  display: block;
-  color: #333;
-  font-size: 26px;
-  letter-spacing: -1px;
-  float: left;
-  line-height: 56px;
-  position: relative;
-  z-index: 1;
-  padding-top: 20px;
-}
-
-.site-nav {
-  float: right;
-  line-height: 56px;
-}
-
-.site-nav .menu-icon { display: none; }
-
-.site-nav .page-link {
-  margin-left: 20px;
-  color: #727272;
-  letter-spacing: -.5px;
-}
-
 /* Site footer */
 
 .site-footer {
@@ -185,8 +144,8 @@ ul.nav li.dropdown:hover ul.dropdown-menu{
 .posts li { margin-bottom: 30px; }
 
 .posts .post-link {
-  font-size: 24px;
-  letter-spacing: -1px;
+  font-size: 20px;
+  letter-spacing: -0.5px;
   line-height: 1;
 }
 
@@ -203,8 +162,8 @@ ul.nav li.dropdown:hover ul.dropdown-menu{
 .post-header { margin: 10px 0 30px; }
 
 .post-header h1 {
-  font-size: 42px;
-  letter-spacing: -1.75px;
+  font-size: 38px;
+  letter-spacing: -1.25px;
   line-height: 1;
   font-weight: 300;
 }
@@ -255,26 +214,26 @@ ul.nav li.dropdown:hover ul.dropdown-menu{
 }
 
 .post-content h2 {
-  font-size: 32px;
-  letter-spacing: -1.25px;
+  font-size: 28px;
+  letter-spacing: -0.75px;
 }
 
 .post-content h3 {
-  font-size: 26px;
-  letter-spacing: -1px;
+  font-size: 22px;
+  letter-spacing: -0.5px;
 }
 
 .post-content h4 {
-  font-size: 20px;
-  letter-spacing: -1px;
+  font-size: 16px;
+  letter-spacing: -0.5px;
 }
 
 .post-content blockquote {
   border-left: 4px solid #e8e8e8;
   padding-left: 20px;
-  font-size: 18px;
+  font-size: 15px;
   opacity: .6;
-  letter-spacing: -1px;
+  letter-spacing: -0.5px;
   font-style: italic;
   margin: 30px 0;
 }

diff --git a/index.md b/index.md
@@ -6,15 +6,18 @@ customjs:
  - main
 ---
 
+![Logo Freifunk München](/assets/mobilewikilogo.png){:.pull-left width="60px" height="60px" style="margin-right: 10px"}
+
 Die nichtkommerzielle Initiative für den Aufbau freier (Funk-)Netzwerke.
+
 Unser Ziel: Der Aufbau und Betrieb eines freien und unabhängigen WLAN Netzes in München.
 
 <div class="row">
     <div class="col-sm-6">
         <div class="list-group">
 
 <div class="panel-heading" markdown="1">
-### Neuigkeiten
+## Neuigkeiten
 
 <ul id="posts" class="posts">
 {% for post in site.posts %}