diff --git a/src/lessc/page/color.less b/src/lessc/page/color.less
index d448829..df33e60 100644
--- a/src/lessc/page/color.less
+++ b/src/lessc/page/color.less
@@ -12,8 +12,9 @@
 @color-comparison-ok: #E9E653;
 @color-comparison-bad: #E96D53;
 
-@color-nav-background: rgb(0, 0, 5);
-@color-nav-text: rgb(255, 255, 255);
+@color-nav-background: rgb(241, 241, 192);
+@color-nav-underline: rgb(156, 110, 110);
+@color-nav-text: rgb(64, 78, 111);
 @color-nav-item-border: rgb(59, 206, 59);
 @color-nav-item-border-active: rgb(213, 230, 62);
 
diff --git a/src/lessc/page/hack.less b/src/lessc/page/hack.less
new file mode 100644
index 0000000..a66e0eb
--- /dev/null
+++ b/src/lessc/page/hack.less
@@ -0,0 +1,878 @@
+html {
+  font-size: 12px
+}
+
+* {
+  box-sizing: border-box;
+  text-rendering: geometricPrecision
+}
+
+body {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: 0;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  word-wrap: break-word
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.3em
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0
+}
+
+pre {
+  padding: 2rem;
+  margin: 1.75rem 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  overflow: auto
+}
+
+code[class*=language-], pre[class*=language-], pre code {
+  font-weight: 100;
+  text-shadow: none;
+  margin: 1.75rem 0
+}
+
+a {
+  cursor: pointer;
+  color: #ff2e88;
+  text-decoration: none;
+  border-bottom: 1px solid #ff2e88
+}
+
+a:hover {
+  background-color: #ff2e88;
+  color: #fff
+}
+
+.grid {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap
+}
+
+.grid.\-top {
+  -ms-flex-align: start;
+  align-items: flex-start
+}
+
+.grid.\-middle {
+  -ms-flex-align: center;
+  align-items: center
+}
+
+.grid.\-bottom {
+  -ms-flex-align: end;
+  align-items: flex-end
+}
+
+.grid.\-stretch {
+  -ms-flex-align: stretch;
+  align-items: stretch
+}
+
+.grid.\-baseline {
+  -ms-flex-align: baseline;
+  align-items: baseline
+}
+
+.grid.\-left {
+  -ms-flex-pack: start;
+  justify-content: flex-start
+}
+
+.grid.\-center {
+  -ms-flex-pack: center;
+  justify-content: center
+}
+
+.grid.\-right {
+  -ms-flex-pack: end;
+  justify-content: flex-end
+}
+
+.grid.\-between {
+  -ms-flex-pack: justify;
+  justify-content: space-between
+}
+
+.grid.\-around {
+  -ms-flex-pack: distribute;
+  justify-content: space-around
+}
+
+.cell {
+  -ms-flex: 1;
+  flex: 1;
+  box-sizing: border-box
+}
+
+@media screen and (min-width: 768px) {
+  .cell.\-1of12 {
+    -ms-flex: 0 0 8.33333%;
+    flex: 0 0 8.33333%
+  }
+
+  .cell.\-2of12 {
+    -ms-flex: 0 0 16.66667%;
+    flex: 0 0 16.66667%
+  }
+
+  .cell.\-3of12 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%
+  }
+
+  .cell.\-4of12 {
+    -ms-flex: 0 0 33.33333%;
+    flex: 0 0 33.33333%
+  }
+
+  .cell.\-5of12 {
+    -ms-flex: 0 0 41.66667%;
+    flex: 0 0 41.66667%
+  }
+
+  .cell.\-6of12 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%
+  }
+
+  .cell.\-7of12 {
+    -ms-flex: 0 0 58.33333%;
+    flex: 0 0 58.33333%
+  }
+
+  .cell.\-8of12 {
+    -ms-flex: 0 0 66.66667%;
+    flex: 0 0 66.66667%
+  }
+
+  .cell.\-9of12 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%
+  }
+
+  .cell.\-10of12 {
+    -ms-flex: 0 0 83.33333%;
+    flex: 0 0 83.33333%
+  }
+
+  .cell.\-11of12 {
+    -ms-flex: 0 0 91.66667%;
+    flex: 0 0 91.66667%
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .grid {
+    -ms-flex-direction: column;
+    flex-direction: column
+  }
+
+  .cell {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto
+  }
+}
+
+.hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
+  font-size: 1rem;
+  font-style: normal;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
+}
+
+.hack blockquote, .hack code, .hack em, .hack strong {
+  line-height: 20px
+}
+
+.hack blockquote, .hack code, .hack footer, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack header, .hack li, .hack ol, .hack p, .hack section, .hack ul {
+  float: none;
+  margin: 0;
+  padding: 0
+}
+
+.hack blockquote, .hack h1, .hack ol, .hack p, .hack ul {
+  margin-top: 20px;
+  margin-bottom: 20px
+}
+
+.hack h1 {
+  position: relative;
+  display: inline-block;
+  display: table-cell;
+  padding: 20px 0 30px;
+  margin: 0;
+  overflow: hidden
+}
+
+.hack h1:after {
+  content: "====================================================================================================";
+  position: absolute;
+  bottom: 10px;
+  left: 0
+}
+
+.hack h1 + * {
+  margin-top: 0
+}
+
+.hack h2, .hack h3, .hack h4, .hack h5, .hack h6 {
+  position: relative;
+  margin-bottom: 1.75rem
+}
+
+.hack h2:before, .hack h3:before, .hack h4:before, .hack h5:before, .hack h6:before {
+  display: inline
+}
+
+.hack h2:before {
+  content: "## "
+}
+
+.hack h3:before {
+  content: "### "
+}
+
+.hack h4:before {
+  content: "#### "
+}
+
+.hack h5:before {
+  content: "##### "
+}
+
+.hack h6:before {
+  content: "###### "
+}
+
+.hack li {
+  position: relative;
+  display: block;
+  padding-left: 20px
+}
+
+.hack li:after {
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+.hack ul > li:after {
+  content: "-"
+}
+
+.hack ol {
+  counter-reset: a
+}
+
+.hack ol > li:after {
+  content: counter(a) ".";
+  counter-increment: a
+}
+
+.hack ol li:nth-child(n+10):after {
+  left: -7px
+}
+
+.hack blockquote {
+  position: relative;
+  padding-left: 17px;
+  padding-left: 2ch;
+  overflow: hidden
+}
+
+.hack blockquote:after {
+  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
+  white-space: pre;
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 20px
+}
+
+.hack em:after, .hack em:before {
+  content: "*";
+  display: inline
+}
+
+.hack pre code:after, .hack pre code:before {
+  content: ""
+}
+
+.hack code {
+  font-weight: 700
+}
+
+.hack code:after, .hack code:before {
+  content: "`";
+  display: inline
+}
+
+.hack hr {
+  position: relative;
+  height: 20px;
+  overflow: hidden;
+  border: 0;
+  margin: 20px 0
+}
+
+.hack hr:after {
+  content: "----------------------------------------------------------------------------------------------------";
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 20px;
+  width: 100%;
+  word-wrap: break-word
+}
+
+@-moz-document url-prefix() {
+  .hack h1 {
+    display: block
+  }
+}
+
+.hack-ones ol > li:after {
+  content: "1."
+}
+
+p {
+  margin: 0 0 1.75rem
+}
+
+.container {
+  max-width: 70rem
+}
+
+.container, .container-fluid {
+  margin: 0 auto;
+  padding: 0 1rem
+}
+
+.inner {
+  padding: 1rem
+}
+
+.inner2x {
+  padding: 2rem
+}
+
+.pull-left {
+  float: left
+}
+
+.pull-right {
+  float: right
+}
+
+.progress-bar {
+  height: 8px;
+  opacity: .8;
+  background-color: #ccc;
+  margin-top: 12px
+}
+
+.progress-bar.progress-bar-show-percent {
+  margin-top: 38px
+}
+
+.progress-bar-filled {
+  background-color: gray;
+  height: 100%;
+  transition: width .3s ease;
+  position: relative;
+  width: 0
+}
+
+.progress-bar-filled:before {
+  content: "";
+  border: 6px solid transparent;
+  border-top-color: gray;
+  position: absolute;
+  top: -12px;
+  right: -6px
+}
+
+.progress-bar-filled:after {
+  color: gray;
+  content: attr(data-filled);
+  display: block;
+  font-size: 12px;
+  white-space: nowrap;
+  position: absolute;
+  border: 6px solid transparent;
+  top: -38px;
+  right: 0;
+  -ms-transform: translateX(50%);
+  transform: translateX(50%)
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.75rem 0;
+  color: #778087
+}
+
+table td, table th {
+  vertical-align: top;
+  border: 1px solid #ccc;
+  line-height: 15px;
+  padding: 10px
+}
+
+table thead th {
+  font-size: 10px
+}
+
+table tbody td:first-child {
+  font-weight: 700;
+  color: #333
+}
+
+.form {
+  width: 30rem
+}
+
+.form-group {
+  margin-bottom: 1.75rem;
+  overflow: auto
+}
+
+.form-group label {
+  border-bottom: 2px solid #ccc;
+  color: #333;
+  width: 10rem;
+  display: inline-block;
+  height: 38px;
+  line-height: 38px;
+  padding: 0;
+  float: left;
+  position: relative
+}
+
+.form-group.form-success label {
+  color: #4caf50 !important;
+  border-color: #4caf50 !important
+}
+
+.form-group.form-warning label {
+  color: #ff9800 !important;
+  border-color: #ff9800 !important
+}
+
+.form-group.form-error label {
+  color: #f44336 !important;
+  border-color: #f44336 !important
+}
+
+.form-control {
+  outline: none;
+  border: none;
+  border-bottom: 2px solid #ccc;
+  padding: .5rem 0;
+  width: 20rem;
+  height: 38px;
+  background-color: transparent
+}
+
+.form-control:focus {
+  border-color: #555
+}
+
+.form-group.form-textarea label:after {
+  position: absolute;
+  content: "";
+  width: 2px;
+  background-color: #fff;
+  right: -2px;
+  top: 0;
+  bottom: 0
+}
+
+textarea.form-control {
+  height: auto;
+  resize: none;
+  padding: 1rem 0;
+  border-bottom: 2px solid #ccc;
+  border-left: 2px solid #ccc;
+  padding: .5rem
+}
+
+select.form-control {
+  border-radius: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none
+}
+
+.help-block {
+  color: #999;
+  margin-top: .5rem
+}
+
+.form-actions {
+  margin-bottom: 1.75rem
+}
+
+.btn {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  padding: .65rem 2rem;
+  font-size: 1rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  z-index: 1
+}
+
+.btn:active {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12)
+}
+
+.btn.btn-ghost {
+  border-color: #757575;
+  color: #757575;
+  background-color: transparent
+}
+
+.btn.btn-ghost:focus, .btn.btn-ghost:hover {
+  border-color: #424242;
+  color: #424242;
+  z-index: 2
+}
+
+.btn.btn-ghost:hover {
+  background-color: transparent
+}
+
+.btn-block {
+  width: 100%;
+  display: -ms-flexbox;
+  display: flex
+}
+
+.btn-default {
+  color: #fff;
+  background-color: #e0e0e0;
+  border: 1px solid #e0e0e0;
+  color: #333
+}
+
+.btn-default:focus:not(.btn-ghost), .btn-default:hover {
+  background-color: #dcdcdc;
+  border-color: #dcdcdc
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #4caf50;
+  border: 1px solid #4caf50
+}
+
+.btn-success:focus:not(.btn-ghost), .btn-success:hover {
+  background-color: #43a047;
+  border-color: #43a047
+}
+
+.btn-success.btn-ghost {
+  border-color: #4caf50;
+  color: #4caf50
+}
+
+.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
+  border-color: #388e3c;
+  color: #388e3c;
+  z-index: 2
+}
+
+.btn-error {
+  color: #fff;
+  background-color: #f44336;
+  border: 1px solid #f44336
+}
+
+.btn-error:focus:not(.btn-ghost), .btn-error:hover {
+  background-color: #e53935;
+  border-color: #e53935
+}
+
+.btn-error.btn-ghost {
+  border-color: #f44336;
+  color: #f44336
+}
+
+.btn-error.btn-ghost:focus, .btn-error.btn-ghost:hover {
+  border-color: #d32f2f;
+  color: #d32f2f;
+  z-index: 2
+}
+
+.btn-warning {
+  color: #fff;
+  background-color: #ff9800;
+  border: 1px solid #ff9800
+}
+
+.btn-warning:focus:not(.btn-ghost), .btn-warning:hover {
+  background-color: #fb8c00;
+  border-color: #fb8c00
+}
+
+.btn-warning.btn-ghost {
+  border-color: #ff9800;
+  color: #ff9800
+}
+
+.btn-warning.btn-ghost:focus, .btn-warning.btn-ghost:hover {
+  border-color: #f57c00;
+  color: #f57c00;
+  z-index: 2
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #00bcd4;
+  border: 1px solid #00bcd4
+}
+
+.btn-info:focus:not(.btn-ghost), .btn-info:hover {
+  background-color: #00acc1;
+  border-color: #00acc1
+}
+
+.btn-info.btn-ghost {
+  border-color: #00bcd4;
+  color: #00bcd4
+}
+
+.btn-info.btn-ghost:focus, .btn-info.btn-ghost:hover {
+  border-color: #0097a7;
+  color: #0097a7;
+  z-index: 2
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #2196f3;
+  border: 1px solid #2196f3
+}
+
+.btn-primary:focus:not(.btn-ghost), .btn-primary:hover {
+  background-color: #1e88e5;
+  border-color: #1e88e5
+}
+
+.btn-primary.btn-ghost {
+  border-color: #2196f3;
+  color: #2196f3
+}
+
+.btn-primary.btn-ghost:focus, .btn-primary.btn-ghost:hover {
+  border-color: #1976d2;
+  color: #1976d2;
+  z-index: 2
+}
+
+.btn-group {
+  overflow: auto
+}
+
+.btn-group .btn {
+  float: left
+}
+
+.btn-group .btn-ghost:not(:first-child) {
+  margin-left: -1px
+}
+
+.card {
+  border: 1px solid #ccc
+}
+
+.card .card-header {
+  color: #333;
+  text-align: center;
+  background-color: #ddd;
+  padding: .5rem 0
+}
+
+.alert {
+  color: #ccc;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  margin-bottom: 1.75rem
+}
+
+.alert-success {
+  color: #4caf50;
+  border-color: #4caf50
+}
+
+.alert-error {
+  color: #f44336;
+  border-color: #f44336
+}
+
+.alert-info {
+  color: #00bcd4;
+  border-color: #00bcd4
+}
+
+.alert-warning {
+  color: #ff9800;
+  border-color: #ff9800
+}
+
+.media:not(:last-child) {
+  margin-bottom: 1.25rem
+}
+
+.media-left {
+  padding-right: 1rem
+}
+
+.media-left, .media-right {
+  display: table-cell;
+  vertical-align: top
+}
+
+.media-right {
+  padding-left: 1rem
+}
+
+.media-body {
+  display: table-cell;
+  vertical-align: top
+}
+
+.media-heading {
+  font-size: 1.16667rem;
+  font-weight: 700
+}
+
+.media-content {
+  margin-top: .3rem
+}
+
+.avatarholder, .placeholder {
+  background-color: #f0f0f0;
+  text-align: center;
+  color: #b9b9b9;
+  font-size: 1rem;
+  border: 1px solid #f0f0f0
+}
+
+.avatarholder {
+  width: 48px;
+  height: 48px;
+  line-height: 46px;
+  font-size: 2rem;
+  background-size: cover;
+  background-position: 50%;
+  background-repeat: no-repeat
+}
+
+.avatarholder.rounded {
+  border-radius: 33px
+}
+
+.loading {
+  display: inline-block;
+  content: " 
+    ";
+  height: 20px;
+  width: 20px;
+  margin: 0 .5rem;
+  animation: a .6s infinite linear;
+  border: 2px solid #e91e63;
+  border-right-color: transparent;
+  border-radius: 50%
+}
+
+.btn .loading {
+  margin-bottom: 0;
+  width: 14px;
+  height: 14px
+}
+
+.btn div.loading {
+  float: left
+}
+
+.alert .loading {
+  margin-bottom: -5px
+}
+
+@keyframes a {
+  0% {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+.menu {
+  width: 100%;
+
+  .menu-item {
+    display: block;
+    color: #616161;
+    border-color: #616161;
+
+    &.active, &:hover {
+      color: #000;
+      border-color: #000;
+      background-color: transparent;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .form-group label {
+    display: block;
+    border-bottom: none;
+    width: 100%
+  }
+
+  .form-group.form-textarea label:after {
+    display: none
+  }
+
+  .form-control {
+    width: 100%
+  }
+
+  textarea.form-control {
+    border-left: none;
+    padding: .5rem 0
+  }
+
+  pre::-webkit-scrollbar {
+    height: 3px
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .form {
+    width: 100%
+  }
+}
diff --git a/src/lessc/page/main-navigation.less b/src/lessc/page/main-navigation.less
new file mode 100644
index 0000000..f01db88
--- /dev/null
+++ b/src/lessc/page/main-navigation.less
@@ -0,0 +1,47 @@
+body {
+  #main-navigation {
+    //background-color: @color-nav-background;
+    //position: fixed;
+
+    width: 100%;
+    display: grid;
+    grid-template-columns:  1fr minmax(100px, 800px) 1fr;
+    grid-template-areas:
+      ". menu .";
+
+    ul {
+      grid-area: menu;
+      margin-top: 40px;
+      margin-bottom: 0;
+
+      list-style-type: none;
+      padding: 0 0 20px;
+      overflow: hidden;
+
+      color: @color-nav-text;
+
+      li {
+        float: left;
+        font-family: @font-nav;
+
+        //border-bottom: 3px solid @color-nav-item-border;
+
+        a {
+          // text
+          text-decoration: none;
+          display: block;
+          text-align: center;
+          color: @color-nav-text;
+
+          // underscore
+          margin-right: 14px; // space between items
+          padding-right: 2px; // overlap of the underscore
+          padding-left: 2px; // overlap of the underscore
+          padding-bottom: 5px; // space to the underscore
+          border-bottom: 2px solid @color-nav-underline;
+
+        }
+      }
+    }
+  }
+}
diff --git a/src/lessc/page/main.less b/src/lessc/page/main.less
index b5107bd..de66b7c 100644
--- a/src/lessc/page/main.less
+++ b/src/lessc/page/main.less
@@ -3,6 +3,7 @@
 @import "color.less";
 @import "media-types.less";
 @import "font.less";
+@import "main-navigation.less";
 
 // left and right for notes and warning and and code blocks
 @special-info-padding-side: 0.5em;
@@ -11,7 +12,7 @@ body {
   margin: 0px;
 
   #main-block{
-    padding-top: 49px;
+    //padding-top: 49px;
     font-family: @font-normal;
     line-height: @font-height;
 
@@ -33,48 +34,6 @@ body {
     }
   }
 
-  #main-navigation {
-    background-color: @color-nav-background;
-    position: fixed;
-
-    width:100%;
-    display: grid;
-    grid-template-columns:  1fr minmax(100px,800px) 1fr;
-    grid-template-areas:
-      ". menu .";
-
-    ul {
-      grid-area: menu;
-      margin-top: 0px;
-      margin-bottom: 0px;
-
-      list-style-type: none;
-      padding: 0;
-      overflow: hidden;
-
-      background-color: @color-nav-background;
-      color: @color-nav-text;
-
-      li.active {
-        border-bottom: 3px solid @color-nav-item-border-active;
-      }
-
-      li {
-        float: left;
-        font-family: @font-nav;
-
-        border-bottom: 3px solid @color-nav-item-border;
-
-        a {
-          display: block;
-          text-align: center;
-          padding: 14px 16px;
-          text-decoration: none;
-          color: @color-nav-text;
-        }
-      }
-    }
-  }
 }
 
 // listings of articles