Use CSS3 media queries to position the navbar fixed when the display is high enough

input/index.md

@@ -5,7 +5,7 @@ flattr: true
 compat: home
 ---
 
-<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>
+<div id="index-avatar"></div>
 
 I'm a <!--%
 from datetime import datetime
@@ -44,7 +44,7 @@ for p in posts[0:5]:
 
 ### Tweets
 
-<div style="width: 100%; margin-left: auto; margin-right: auto;">
+<div id="index-twitter-page">
 <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>

page.html

@@ -50,6 +50,7 @@
                 for p in mpages[1:]:
                     print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
             %-->
+            <li><a href="https://github.com/xythobuz">GitHub</a></li>
             <li><a href="http://xythobuz.de/git/">Git</a></li>
             <li><a href="http://xythobuz.de/lastmusic">♫</a></li>
             <!--%
@@ -61,7 +62,7 @@
             %-->
         </ul>
     </div>
-    <div style="width: 75%; margin-left: auto; margin-right: auto;">
+    <div id="content">
         {{ __content__ }}
         <!--%
             import sys
@@ -110,7 +111,7 @@
         &middot;
         <a href="https://github.com/sachinchoolur/lightGallery">lightGallery</a>
         &middot;
-        <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/deed.en">CC-BY</a>
+        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>
         &middot;
         <a href="http://www.amazon.de/?_encoding=UTF8&amp;camp=1638&amp;creative=19454&amp;linkCode=ur2&amp;site-redirect=de&amp;tag=xythobuzorg-21">Amazon.de Affiliate</a>
         &middot;

static/css/style.css

@@ -1,22 +1,50 @@
 body {
     font-size: 1.2em;
     font-family: 'Droid Sans', sans-serif;
+    margin: 0px;
+    padding: 0px;
 }
 
 #nav {
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: orange;
-    margin-bottom: 2em;
+    background-color: white;
+    width: 100%;
 }
 
-#nav ul {
-    list-style-type: none;
+#content {
+    width: 75%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-#nav ul li {
-    display: inline;
-    margin-right: 0.5em;
+@media (min-height: 750px) {
+    #nav {
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+
+    #content {
+        padding-top: 5em;
+    }
+
+    #index-avatar {
+        margin-top: 1.5em;
+    }
+}
+
+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;
 }
 
 #home {
@@ -24,6 +52,15 @@ body {
     margin-right: 0.5em;
 }
 
+#nav ul {
+    list-style-type: none;
+}
+
+#nav ul li {
+    display: inline;
+    margin-right: 0.5em;
+}
+
 #nav a:link {
     color: black;
     font-weight: bold;
@@ -36,22 +73,6 @@ body {
     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;
@@ -65,4 +86,25 @@ iframe[id^='twitter-widget-'] {
 
 #footer a:visited {
     color: gray;
-}
+}
+
+#index-avatar {
+    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;
+}
+
+#index-twitter-page {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+iframe[id^='twitter-widget-'] {
+    width: 100%;
+}
+