- Implement Navigation bar

- Change code formatting from pretiffy.js to highlight.js
- refactor static folder to assets and divide file based on types (javascripts, stylesheets, images)

static/app-theme.css → assets/stylesheets/app-theme.css

@@ -23,9 +23,12 @@ header menu li a:visited, a:link {
   color: #fff;
   text-decoration: none;
 }
-a {
+p a, p a:visited, p a:link {
   color: #f50;
 }
+p a:hover {
+  color: #482B58
+}
 
 /****************************************************************\
  **** Syntax highlighting styles ********************************

static/app.css → assets/stylesheets/app.css

@@ -78,21 +78,6 @@ h2 strong {
   font-weight: 300;
 }
 
-a.dl {
-  font-weight: 300;
-  font-size: 30px;
-  line-height: 40px;
-  padding: 3px 10px;
-  display: inline-block;
-  border-radius: 6px;
-  color: #f0f0f0;
-  margin: 5px 0;
-}
-a.dl:hover {
-  color: #f0f0f0;
-  text-decoration: none;
-}
-
 .content-nav {
   margin-top: 130px;
   width: 220px;
@@ -112,12 +97,52 @@ a.dl:hover {
   color: #888;
 }
 
+.nav-tabs.nav-stacked {
+  border-left: 2px solid;
+  border-color: #f50;
+}
+
+.nav-tabs.nav-stacked > li > a {
+  font-size: 18px;
+  color: #919191;
+  border: 0px;
+  border-radius: 0px !important;
+}
+
+.nav-tabs.nav-stacked > li > a:hover {
+  color: #000;
+  font-weight: bolder;
+}
+
+.nav-tabs.nav-stacked > li.active > a {
+  color: #000;
+  font-weight: bolder;
+  z-index: 0;
+  border: 0px;
+  background-color: #f6f6f6;
+}
+
+hr {
+    display: block;
+    height: 2px;
+    border: 0;
+    border-top: 2px solid #e2e2e2;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 5px;
+    padding: 0;
+}
+
 h3 {
   font-weight: bold;
   color: #000;
   font-size: 30px;
-  padding-top: 40px;
-  margin-top: 0;
+  padding-top: 100px;
+  /*
+    Trick to fit scrolling by scrollspy from nav bar
+    http://stackoverflow.com/questions/9288482/how-do-i-set-the-offset-for-scrollspy-in-bootstrap
+  */
+  margin-top: -70px;
 }
 
 h4 {
@@ -140,10 +165,10 @@ p.license {
 
 .row .logo {
   text-align: center;
-  margin-top: 150px;
+  margin-top: 100px;
 }
 .row .logo img {
-  height: 30px;
+  height: 50px;
 }
 .line {
   height: 5px;
@@ -152,14 +177,6 @@ p.license {
   background-color: #f50
 }
 
-pre, code {
-  color: #666;
-}
-code {
-  border: 0;
-  background-color: transparent;
-}
-
 /* Widescreen desktop. */
 @media (min-width: 1200px) {
   .content-nav {

assets/stylesheets/idea.css

@@ -0,0 +1,97 @@
+/*
+
+Intellij Idea-like styling (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #000;
+  background: #fff;
+}
+
+.hljs-subst,
+.hljs-title {
+  font-weight: normal;
+  color: #000;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #808080;
+  font-style: italic;
+}
+
+.hljs-meta {
+  color: #808000;
+}
+
+.hljs-tag {
+  background: #efefef;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-literal,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type,
+.hljs-selector-id,
+.hljs-selector-class {
+  font-weight: bold;
+  color: #000080;
+}
+
+.hljs-attribute,
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: bold;
+  color: #0000ff;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: normal;
+}
+
+.hljs-string {
+  color: #008000;
+  font-weight: bold;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-formula {
+  color: #000;
+  background: #d0eded;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  text-decoration: underline;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660e7a;
+}
+
+.hljs-addition {
+  background: #baeeba;
+}
+
+.hljs-deletion {
+  background: #ffc8bd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}