Redesigned

input/index.md

 compat: home
 ---
 
-# Welcome
+<div style="width: 150px; height: 150px; float: right; border: 2px, solid, #000000; border-radius: 10px; background-image: url(http://www.gravatar.com/avatar/8d18fec40a74782052fb4c007d212475?s=150); margin-left: 2em; margin-bottom: 1em;"></div>
 
-I'm a 19 year old Information Engineering student from Germany, mostly building cool stuff with AVR microcontrollers.
+I'm a 19 year old Information Engineering student from Germany, mostly building stuff with AVR microcontrollers.
 All of my projects are released as [Free Software][fs] on my [GitHub Profile][gh], as well as on this Website. Have fun!
 
 It would be nice if you could use this [Amazon.de Affiliate Link][ama].
 
-<div style="margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 1em;">
-<iframe src="http://githubbadge.appspot.com/badge/xythobuz?a=0" style="border: 0;height: 110px;width: 200px;overflow: hidden;"></iframe>
-<div style="width: 150px; height: 150px; float: right; border: 2px, solid, #000000; border-radius: 10px; background-image: url(http://www.gravatar.com/avatar/8d18fec40a74782052fb4c007d212475?s=150)"></div>
-</div>
-
-[09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0][2]
-
-[46 DC EA D3 17 FE 45 D8 09 23 EB 97 E4 95 64 10 D4 CD B2 C2][3]
-
-<pre>
------BEGIN GEEK CODE BLOCK-----
-Version: 3.12
-GCS/E/MU d-(--)>--- s:++ a-- C++++>$ UBLX+++>++++$ P+ L+ !E--- W+++ N+ !o K--? !w--- !O M++ !V PS+++ PE-- Y+ PGP++ !t !5 !X !R tv-- b+ DI+ D+ G e h r y?*
-------END GEEK CODE BLOCK------
-</pre>
-
-<div style="width: 520px; max-width: 100%; margin-left: auto; margin-right: auto;">
-<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/xythobuz" data-widget-id="318732638158471170">Tweets by @xythobuz</a>
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-</div>
-
- [1]: http://www.xythobuz.de/cubehook.php
- [2]: http://en.wikipedia.org/wiki/HD_DVD_encryption_key_controversy
- [3]: http://www.yalelawtech.org/trusted-computing-drm/46-dc-ea-d3-17-fe-45-d8-09-23-eb-97-e4-95-64-10-d4-cd-b2-c2/
- [fs]: http://www.gnu.org/philosophy/free-sw.html
- [gh]: https://github.com/xythobuz
- [ama]: http://www.amazon.de/?_encoding=UTF8&amp;camp=1638&amp;creative=19454&amp;linkCode=ur2&amp;site-redirect=de&amp;tag=xythobuzorg-21
-
-lang: de
-
-# Willkommen
-
-Hier findest du (immer mehr) Informationen zu Projekten von mir. Gerne höre ich Feedback über E-Mail. Viel Spaß!
-
-<div style="width: 400px; height: 110px; margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 1em;">
-<iframe src="http://githubbadge.appspot.com/badge/xythobuz?a=0" style="border: 0;height: 110px;width: 200px;overflow: hidden;"></iframe>
-<div style="width: 110px; height: 110px; float: right; border: 2px, solid, #000000; border-radius: 10px; background-image: url(http://www.gravatar.com/avatar/8d18fec40a74782052fb4c007d212475?s=110)"></div>
-</div>
-
-[09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0][2]
+### Recent Posts
 
-[46 DC EA D3 17 FE 45 D8 09 23 EB 97 E4 95 64 10 D4 CD B2 C2][3]
+<!--%
+from datetime import datetime
+posts = [p for p in pages if "post" in p] # get all blog post pages
+posts.sort(key=lambda p: p.get("date"), reverse=True) # sort post pages by date
+for p in posts[0:4]:
+    date = datetime.strptime(p.date, "%Y-%m-%d").strftime("%B %d, %Y")
+    print "  * **[%s](%s)** - %s" % (p.post, p.url, date) # markdown list item
+%-->
+  * **[more...](blog.html)**
 
-<pre>
------BEGIN GEEK CODE BLOCK-----
-Version: 3.12
-GCS/E/MU d-(--)>--- s:++ a-- C++++>$ UBLX+++>++++$ P+ L+ !E--- W+++ N+ !o K--? !w--- !O M++ !V PS+++ PE-- Y+ PGP++ !t !5 !X !R tv-- b+ DI+ D+ G e h r y?*
-------END GEEK CODE BLOCK------
-</pre>
+### Tweets
 
-<div style="width: 520px; max-width: 100%; margin-left: auto; margin-right: auto;">
-<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/xythobuz" data-widget-id="318732638158471170">Tweets by @xythobuz</a>
+<div style="width: 100%; margin-left: auto; margin-right: auto;">
+<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/xythobuz" data-widget-id="318732638158471170" data-chrome="noheader nofooter">Tweets by @xythobuz</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 </div>
 
  [1]: http://www.xythobuz.de/cubehook.php
- [2]: http://en.wikipedia.org/wiki/HD_DVD_encryption_key_controversy
- [3]: http://www.yalelawtech.org/trusted-computing-drm/46-dc-ea-d3-17-fe-45-d8-09-23-eb-97-e4-95-64-10-d4-cd-b2-c2/
  [fs]: http://www.gnu.org/philosophy/free-sw.html
  [gh]: https://github.com/xythobuz
- [ama]: http://www.amazon.de/?_encoding=UTF8&amp;camp=1638&amp;creative=19454&amp;linkCode=ur2&amp;site-redirect=de&amp;tag=xythobuzorg-21
+ [ama]: http://www.amazon.de/?_encoding=UTF8&amp;camp=1638&amp;creative=19454&amp;linkCode=ur2&amp;site-redirect=de&amp;tag=xythobuzorg-21

input/projects/hardware.md

 compat: hw
 ---
 
-# {{ page.title }}
-
-These are my mostly hardware-related projects and articles.
-
-<!--%
-mpages = [p for p in pages if p.get("parent", "") == "hardware" and p.lang == "en"]
-mpages.sort(key=lambda p: int(p["position"]))
-for p in mpages:
-    print "  * **[%s](%s)**" % (p.title, p.url) # markdown list item
-%-->
-
-lang: de
-
-# {{ page.title }}
-
-Dies sind meine Projekte, deren Schwerpunkt eher im Bereich Hardware liegen.
+### {{ page.title }}
 
 <!--%
 mpages = [p for p in pages if p.get("parent", "") == "hardware" and p.lang == "en"]

input/projects/hardware/ledmatrix.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 This is a school project: an 8x10 LED matrix. The circuit is based on [this][1], only the resistor values and transistors were changed. Take two of these and add a AtTiny2313 and voilà, you get this:
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Hier ein kleines Schulprojekt: Eine 8x10 LED Matrix. Die Schaltung basiert [hierauf][1], nur die Widerstandswerte und Transistoren wurden der Matrix entsprechend verändert. Diese Schaltung 2x aufbauen und an einen AtTiny2313 anschliessen und schon kommt das dabei heraus:
 

input/projects/hardware/serialdebug.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 A 8x5 LED Matrix controlled by an AtTiny2313 which communicates via a FT232R with a PC. Received characters are displayed by the matrix. This is useful for debugging serial applications.
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Eine 8x5 LED Matrix an einem AtTiny2313, welcher über einen FT232R mit einem Computer kommuniziert. Empfangene Zeichen werden auf der LED Matrix angezeigt. Dies ist hilfreich beim Debuggen von Computerprogrammen, welche mit einer seriellen Schnittstelle kommunizieren.
 

input/projects/hardware/ssop28.md

 reddit: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 This is a small PCB to use a SSOP28 SMT IC in a Breadboard or similar with 1" (2,54mm) pin-distance:
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Hier das Layout eines SSOP28 - DIL Adapters:
 

input/projects/hardware/xyrobot.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 This is my robot project. A self-made PCB with an AtMega2560 controls everything. The robot has a [Bluetooth module][1], a [Gameboy Camera][2] and my [RAM module][3]. I bought the [RN-KeyLCD][4] and the [RN-VN2][5] from [Roboternetz][6].
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Dies ist mein kleines Roboterprojekt. Eine eigene Platine mit einem AtMega2560 steuert den Roboter. Angeschlossen sind unter anderem mein [Bluetooth Modul][1], eine [Gameboy Kamera][2] und mein [RAM Modul][3]. Vom [Roboternetz][4] stammen das [RN-KeyLCD][5] und der [RN-VN2 Motortreiber][6].
 

input/projects/hardware/xyrobot/bluetooth.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 Here's the Layout of a BTM-222 Bluetooth PCB, following the [Roboternetz Guidelines Mini Format][1]. The circuit comes from [Robotfreak][2], but is basically the minimal circuit described in the [datasheet (370kB)][3].
 
 
 Soldering the standard parts should be no problem. You should use a find soldering iron to connect each pin of the BTM-222, one after another. A 31mm long piece of wire can be used as antenna.
 
-## Interfacing the BTM-222
+### Interfacing the BTM-222
 
 Before using the BTM-222 you have to configure it. You can change the speed, data format, name, PIN and some other things. You have to connect the hardware serial interface of the BTM-222 to a PC and issue the AT-Commands documented in the datasheet. It is very important to use only '\r' as Line-End-Character. Using '\n' or "\r\n" will result in error messages from the module.
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Hier das Layout einer Adapterplatine für den BTM-222 Bluetooth IC im [Roboternetz Mini Format][1]. Die Schaltung stammt von [Robotfreak][2], entspricht aber im Prinzip der Minimalbeschaltung aus dem [Datenblatt][3].
 
 
 Das löten der Standard-Bauteile sollte kein Problem darstellen. Beim BTM-222 empfiehlt es sich, mit einem feinen Lötkolben jeden Pin einzeln anzulöten. Als Antenne kann ein 3,1cm langer Draht verwendet werden.
 
-## Ansteuerung des BTM-222
+### Ansteuerung des BTM-222
 
 Vor der ersten Verwendung muss das BTM-222 Modul konfiguriert werden. Dort werden Geschwindigkeit, Format, Name, PIN und weitere Einstellungen getroffen. Dabei muss das Modul per Hardware-Schnittstelle an einen Computer angeschlossen werden. Nun können die im Datenblatt dokumentierten AT Befehle eingegeben werden. Sehr wichtig hierbei ist, dass das Modul als Zeilenendzeichen nur '\r' erwartet. Wird '\n' oder "\r\n" verwendet quittiert das Modul jegliche Eingabe mit Error.
 

input/projects/hardware/xyrobot/k6x4008.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 [![Photo 1][1]][2]
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 [![Photo 1][1]][2]
 

input/projects/hardware/xyrobot/rremote.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 rRemote is a addin for Casio fx9860G calculators written in C. It allows you to send data over the 3-Pin serial port.
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 rRemote ist ein Addin für Casio fx9860G-Serie Taschenrechner. Es ermöglicht die serielle Kommunikation mit beliebigen Geräten über den 3-Pin Anschluss.
 Zum Download wird das gesamte Projekt für das [offizielle Casio SDK angeboten. Dieses kann kostenlos von Casio bezogen werden][1]. Die Parameter für die serielle Schnittstelle können im Quellcode geändert werden, genauso wie die Daten die gesendet werden sollen. Das sollte mit passablen C Kentnissen möglich sein.

input/projects/hardware/xyrobot/xyrobotremote.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 xyRobotRemote is a Cross-Platform Java GUI App. It controls the [xyRobot][1].
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 xyRobotRemote ist eine Cross-Plattform Java GUI App. Sie dient der Fernsteuerung des [xyRobot][1] Roboters.
 

input/projects/software.md

 compat: sw
 ---
 
-# {{ page.title }}
-
-These are my mostly software-related projects and articles.
-
-<!--%
-mpages = [p for p in pages if p.get("parent", "") == "software" and p.lang == "en"]
-mpages.sort(key=lambda p: int(p["position"]))
-for p in mpages:
-    print "  * **[%s](%s)**" % (p.title, p.url) # markdown list item
-%-->
-
-lang: de
-
-# {{ page.title }}
-
-Dies sind meine Projekte, deren Schwerpunkt eher im Bereich Software liegen.
+### {{ page.title }}
 
 <!--%
 mpages = [p for p in pages if p.get("parent", "") == "software" and p.lang == "en"]

input/projects/software/avrserial.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 The avrSerial Library enables interrupt-driven UART communication on all available UART modules. Each module has it's own receive and transmit buffer. XON/XOFF Flow Control for the receiving end can be enabled. At the moment, the following AtMega types are supported:
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Die avrSerial Library ermöglicht Interruptgesteuerte UART kommunikation mit allen verfügbaren UART Modulen. Jedes Modul hat einen eigenen Sende- und Empfangspuffer. XON/XOFF Flow Control kann auf Empfangsseite aktiviert werden. Unterstützt werden momentan folgende AtMega Typen:
 

input/projects/software/c250.md

 print: true
 ---
 
-# Mio C220 / C250 Unlock
+### Mio C220 / C250 Unlock
 
 In short:
 
 
 lang: de
 
-# Mio C220 / C250 Unlock
+### Mio C220 / C250 Unlock
 
 Das Mio C250 oder C220 (eins für Amerika, eins für Europa) ist ein Navigationsgerät dessen Software auf Windows CE 5.0 basiert.
 Das weckt natürlich Hoffnungen, das Gerät in einen PDA verwandeln zu können. Aber leider ist Windows nur in einer Core Version installiert.

input/projects/software/nas.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 1.  root Access (by Jayare)
     *   Install the device like a normal user would

input/projects/software/serialhelper.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 SerialHelper is a Cross-Platform (Windows, Unix systems) Command Line Utility allowing read and write access to serial ports. Additionally, it can list the available serial ports.
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 SerialHelper ist ein Cross Plattform (Windows, Unix Systeme) Kommandozeilen Programm welches den Zugriff auf serielle Ports ermöglicht. Ausserdem können vorhandene serielle Ports aufgelistet werden.
 

input/projects/software/ultimatenotifier.md

 print: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 The service [Ultimate Notifier][1] allows you to send Push-Notification to your iPhone easily. Based on this, you can write shell scripts that are executed regularly via cron. This could inform you about a changed public IP. To do this, save this script somewhere:
 
 
 <pre>crontab -e</pre>
 
->You can add a cronfile entry. To execute the script every 30 minutes, use this:
+You can add a cronfile entry. To execute the script every 30 minutes, use this:
 
 <pre>*/30 * * * * /Users/anon/bin/ipnotify.sh</pre>
 
 
 lang: de
 
-# {{ page.title_de }}
+### {{ page.title_de }}
 
 Der Dienst [Ultimate Notifier][1] erlaubt es relativ problemlos, zum Beispiel mittels curl Push-Notifications an ein iPhone zu senden. Darauf basierend können Shell Skripte geschrieben werden, welche regelmäßig als Cron-Job gestartet werden. So kann man sich zum Beispiel über eine geänderte Public IP informieren lassen. Dafür muss dieses Skript irgendwo gespeichert werden:
 

input/projects/software/yasab.md

 print: true
 ---
 
-# YASAB - Yet another simple AVR Bootloader
+### YASAB - Yet another simple AVR Bootloader
 
 YASAB is a simple AVR Bootloader, written in C for the [AVR libc][1]. A PC Program sends the data to be programmed with a simple protocol via UART to the AVR. If the bootloader was compiled for the ATmega168, 128x or 256x, it will listen on both USART0 and USART1 for serial communication attempts. [The most recent source code can be found in the Github Repository][2]. The Upload software can easily be used in place of avrdude in makefiles.
 
 
 lang: de
 
-# YASAB - Yet another simple AVR Bootloader
+### YASAB - Yet another simple AVR Bootloader
 
 YASAB ist ein einfacher AVR Bootloader, geschrieben in C für die [AVR libc][1]. Von einem PC-Programm aus werden die Daten über ein simples Protokoll per UART an den AVR gesendet. Wurde der Bootloader für den ATmega168, 128x oder 256x kompiliert, wird sowohl auf USART0 als auch auf USART1 Daten erwartet. [Der aktuellste Quellcode findet sich stets im Github Repository][2]. Die Upload Software kann einfach statt avrdude oder ähnlichem in makefiles eingebaut werden.
 

input/reviews/tex_beetle.md

 flattr: true
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 On June 5th I ordered the [Tex Beetle][texbeetle] from [MechanicalKeyboards.com][shop]. It shipped one day later and after about two weeks I received a notification from the German customs office. Including import sales tax and shipping, I had to pay 160 Euros.
 

input/unlisted/404.md

 title: 404
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
-## Page not found!
+### Page not found!
 
 These are not the Droids you are looking for!

input/unlisted/language.md

 parent: none
 ---
 
-# {{ page.title }}
+### {{ page.title }}
 
 You should only reach this page if your Javascript is disabled, and you clicked on the Language link. To reach the german version of an article, just add .de before .html in the URL bar.

page.html

     <link rel="author" href="xythobuz@xythobuz.de">
     <link rel="shortcut icon" href="img/favicon.ico">
     <link rel="alternate" type="application/rss+xml" title="Blog" href="rss.xml">
+    <link type="text/css" rel="stylesheet" href="css/style.css" />
     <link type="text/css" rel="stylesheet" href="css/sh_bright.min.css" />
-    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />
-    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" />
-    <link rel="stylesheet" href="css/gh-fork-ribbon.css" />
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+    <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
+    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
     <script type="text/javascript" src="js/sh_main.js"></script>
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
-    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <!--%
         if page.get("flattr", "false") == "true":
             print "<script type='text/javascript'>"
             print "</script>"
     %-->
 </head>
-<body onload="sh_highlightDocument('/js/sh/', '.min.js');" style="font-size: 1.1em; font-family: 'Droid Sans', sans-serif;">
+<body onload="sh_highlightDocument('/js/sh/', '.min.js');">
     <!--%
         if page.get("github", "") != "":
             # GitHub Fork-Me Ribbon
             print page.github
             print '">Fork me on GitHub</a></div></div>'
     %-->
-    <div class="navbar navbar-fixed-top">
-        <div class="navbar-inner">
-            <ul class="nav">
-                <!--%
-                    mpages = [p for p in pages if p.get("parent", "") == "main" and p.lang == "en"]
-                    mpages.sort(key=lambda p: int(p["position"]))
-                    entry = '<li><a href="%s">%s</a></li>'
-                    newEntry = '<li class="dropdown"><a href="%s" class="dropdown-toggle" data-toggle="dropdown">%s<b class="caret"></b></a><ul class="dropdown-menu">'
-                    newEntry2 = '<li class="dropdown-submenu"><a href="%s" class="dropdown-toggle disabled" data-toggle="dropdown">%s</a><ul class="dropdown-menu">'
-                    for p in mpages:
-                        sub = [r for r in pages if r.get("parent", "") == p.url.replace("/", "").replace(".html", "") and r.lang == "en"]
-                        sub.sort(key=lambda r: int(r["position"]))
-                        if len(sub) > 0:
-                            print(newEntry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
-                            for r in sub:
-                                subsub = [s for s in pages if s.get("parent", "") == r.url.replace("/", "").replace(".html", "") and s.lang == "en"]
-                                subsub.sort(key = lambda s: int(s["position"]))
-                                if len(subsub) > 0:
-                                    print(newEntry2 % (htmlspecialchars(r["url"]), htmlspecialchars(r["title"])))
-                                    for s in subsub:
-                                        print(entry % (htmlspecialchars(s["url"]), htmlspecialchars(s["title"])))
-                                    print("</ul>")
-                                else:
-                                    print(entry % (htmlspecialchars(r["url"]), htmlspecialchars(r["title"])))
-                            print("</ul>")
-                        else:
-                            print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
-                %-->
-                <li class="divider-vertical"></li>
-                <li><a href="http://xythobuz.de/lastmusic">♫</a></li>
-                <!--%
-                        tmp = [p for p in page["lang_links"].iteritems()]
-                        if len(tmp) > 1:
-                            print '<li class="divider-vertical"></li>'
-                            print '<li class="dropdown"><a href="language.html" class="dropdown-toggle" data-toggle="dropdown">Language<b class="caret"></b></a><ul class="dropdown-menu">'
-                            print " ".join(["<li><a href='%s'>%s</a></li>" % (url, lang) for lang, url in page["lang_links"].iteritems()]).replace(">en<", ">English<").replace(">de<", ">Deutsch<")
-                            print "</ul></li>"
-                            print ''
-                %-->
-                <li class="divider-vertical"></li>
-                <script type="text/javascript">
-                    function sitesearch(curobj) {
-                        curobj.q.value = "site:xythobuz.de " + curobj.r.value
-                    }
-                </script>
-                <form class="navbar-search" action="http://www.google.com/search" method="get" onSubmit="sitesearch(this)">
-                    <input name="q" type="hidden" />
-                    <input name="r" type="text" class="search-query span2" placeholder="Search..." />
-                </form>
-            </ul>
-        </div>
+    <div id="nav">
+        <ul>
+            <li id="home"><a href="index.html">xythobuz.de</a></li>
+            <!--%
+                mpages = [p for p in pages if p.get("parent", "") == "main" and p.lang == "en"]
+                mpages.sort(key=lambda p: int(p["position"]))
+                entry = '<li><a href="%s">%s</a></li>'
+                for p in mpages[1:]:
+                    print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
+            %-->
+            <li><a href="http://xythobuz.de/lastmusic">♫</a></li>
+            <!--%
+                #tmp = [p for p in page["lang_links"].iteritems()]
+                #if len(tmp) > 1:
+                    #print '<li class="dropdown"><a href="language.html" class="dropdown-toggle" data-toggle="dropdown">Language<b class="caret"></b></a><ul class="dropdown-menu">'
+                    #print " ".join(["<li><a href='%s'>%s</a></li>" % (url, lang) for lang, url in page["lang_links"].iteritems()]).replace(">en<", ">English<").replace(">de<", ">Deutsch<")
+                    #print "</ul></li>"
+            %-->
+        </ul>
     </div>
-
-    <div style="width: 75%; margin-left: auto; margin-right: auto; padding-top: 50px;">
+    <div style="width: 75%; margin-left: auto; margin-right: auto;">
         {{ __content__ }}
         <!--%
             import sys
 
-            # Horizontal Line and Centered DIV
+            # Centered DIV
             if page.get("flattr", "false") == "true" or page.get("twitter", "") != "" or page.get("reddit", "") != "" or page.get("github", "") != "" or page.get("print", "false") == "true":
-                print '<hr>'
-                print '<div style="text-align: center;">'
+                print '<div style="margin-top: 1em; text-align: center;">'
 
             # Print and PDF Buttons
             if page.get("print", "false") == "true":
             if page.get("flattr", "false") == "true" or page.get("twitter", "") != "" or page.get("reddit", "") != "" or page.get("github", "") != "" or page.get("print", "false") == "true":
                 print '</div>'
 
-            if page.get("comments", "false") != "true":
-                print '<hr>'
-
             # Disqus Comments
             if page.get("comments", "false") == "true":
-                print '<hr><div id="disqus_thread"></div>'
+                print '<div id="disqus_thread"></div>'
                 print '<script type="text/javascript">'
                 print 'var disqus_shortname = "xythobuz";'
                 print '(function() {'
         %-->
     </div>
 
-    <div style="color: gray; text-align: center;">
-        Made with <a href="http://bitbucket.org/obensonne/poole">Poole</a>, <a href="http://twitter.github.io/bootstrap/index.html">Bootstrap</a> and <a href="http://shjs.sourceforge.net">SHJS</a>
+    <div id="footer">
+        <a href="http://bitbucket.org/obensonne/poole">Poole</a>
+        &middot;
+        <a href="http://shjs.sourceforge.net">SHJS</a>
         &middot;
-        Licensed as <a href="http://creativecommons.org/licenses/by/3.0">CC-BY</a>
+        <a href="http://creativecommons.org/licenses/by/3.0">CC-BY</a>
     </div>
     <img src="http://xythobuz.de/stats/count.php?img" alt="Analytics">
     <script src="http://gitforked.com/api/1.1/button.js" type="text/javascript"></script>
-    <script type="text/javascript">
-        var _gaq = _gaq || [];
-        _gaq.push(['_setAccount', 'UA-39163591-1']);
-        _gaq.push(['_setDomainName', 'xythobuz.org']);
-        _gaq.push(['_setAllowLinker', true]);
-        _gaq.push(['_trackPageview']);
-        setTimeout("_gaq.push(['_trackEvent', '30_seconds', 'read'])", 30000);
-        (function() {
-            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-        })();
-    </script>
 </body>
 </html>

static/css/style.css

+body {
+    font-size: 1.2em;
+    font-family: 'Droid Sans', sans-serif;
+}
+
+#nav ul {
+    list-style-type: none;
+}
+
+#nav ul li {
+    display: inline;
+    margin-right: 0.5em;
+}
+
+#home {
+    font-size: 2.5em;
+    margin-right: 0.5em;
+}
+
+#nav a:link {
+    color: black;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+#nav a:visited {
+    color: black;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+pre {
+    max-height: 300px;
+    overflow: scroll;
+    font-size: 0.9em;
+    padding: 10px;
+    margin: 1em;
+    border-style: solid;
+    border-width: 2px;
+    border-color: orange;
+    border-radius: 10px;
+}
+
+iframe[id^='twitter-widget-'] {
+    width: 100%;
+}
+
+#footer {
+    color: gray;
+    text-align: center;
+    margin-top: 1em;
+    font-size: small;
+}
+
+#footer a:link {
+    color: gray;
+}
+
+#footer a:visited {
+    color: gray;
+}