adjust active menu item style and add whats markup to the menu

docs/_layouts/document.ts

@@ -52,6 +52,9 @@ export default (props: PageProps) => {
         <main id="documentation" class="wrapper">
             <nav id="docs-nav">
                 <ul>
+                    <li ${
+                        props.path === '/documentation' ? 'class="active"' : ''
+                    }><a href="/documentation">What is Markup?</a></li>
                     ${docsMenu}
                 </ul>
             </nav>

docs/documentation/index.md

@@ -31,7 +31,9 @@ We believe in a simple way to build the web without the jargon of a framework, c
 
 ### Why Markup?
 
-Markup focus on being intuitive by relying on whats familiar, being small and enhancing the web by doing things well and reliably. This can be broken down into 6 points:
+Markup focus on being intuitive by relying on whats familiar; on being small so you can confidently ship it to the client; and on enhancing the web by doing things well and in performant way. 
+
+This philosophy can be further broken down into six points:
 
 - **Reactive**:
     Markup uses JavaScript **[template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)** and Functions to allow you to create reative DOM with state management, render lyfecycles, and side effects control.

docs/stylesheets/documentation.css

@@ -33,6 +33,7 @@
     height: 100%;
     overflow: auto;
     padding: 50px 0 30px 0;
+    position: relative;
 }
 
 #documentation nav a {
@@ -55,14 +56,14 @@
 #documentation nav li.active::after {
     content: '';
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     background: coral;
     position: absolute;
-    right: 0;
+    right: 10px;
     top: 50%;
-    transform: translate(50%, -50%);
+    transform: translate(0, -50%);
 }
 
 #documentation nav ol {
@@ -239,7 +240,7 @@
 #documentation article #edit-doc {
     margin: 30px 0 0;
     display: inline-block;
-    color: #009688;
+    color: coral;
 }
 
 /* #table-of-content ------------ */