MarkBind · ang-zeyu · Dec 12, 2020 · Dec 6, 2020 · Dec 6, 2020 · Dec 6, 2020
diff --git a/.gitignore b/.gitignore
@@ -42,6 +42,7 @@ jspm_packages
 .node_repl_history
 
 docs/_site/*
+packages/core/template/*/_site
 
 # Generated site (MarkBind)
 packages/cli/test/functional/*/_site

diff --git a/docs/_markbind/layouts/default.md b/docs/_markbind/layouts/default.md
@@ -0,0 +1,9 @@
+<include src="headers/header.mbdf" />
+
+<div id="flex-body">
+  <div id="content-wrapper" class="fixed-header-padding">
+    {{ content }}
+  </div>
+</div>
+
+<include src="footers/footer.mbdf" />
diff --git a/docs/_markbind/layouts/default/footer.md b/docs/_markbind/layouts/default/footer.md
diff --git a/docs/_markbind/layouts/default/head.md b/docs/_markbind/layouts/default/head.md
diff --git a/docs/_markbind/layouts/default/navigation.md b/docs/_markbind/layouts/default/navigation.md
diff --git a/docs/_markbind/layouts/default/scripts.js b/docs/_markbind/layouts/default/scripts.js
diff --git a/docs/_markbind/layouts/default/styles.css b/docs/_markbind/layouts/default/styles.css
diff --git a/docs/_markbind/layouts/devGuide.md b/docs/_markbind/layouts/devGuide.md
@@ -0,0 +1,31 @@
+<include src="headers/header.mbdf" />
+
+<div id="flex-body">
+  <nav id="site-nav" class="fixed-header-padding">
+    <div class="site-nav-top">
+      <div class="font-weight-bold mb-2" style="font-size: 1.25rem;">Developer Guide</div>
+    </div>
+    <div class="nav-component slim-scroll">
+      <site-nav>
+* [Contributing]({{baseUrl}}/devGuide/devGuide.html)
+* [Setting up]({{baseUrl}}/devGuide/settingUp.html)
+* [Workflow]({{baseUrl}}/devGuide/workflow.html)
+* [Design]({{baseUrl}}/devGuide/design.html)
+* [Writing Plugins]({{baseUrl}}/devGuide/writingPlugins.html)
+* [Project management]({{baseUrl}}/devGuide/projectManagement.html)
+* Appendices :expanded:
+  * [Style guides]({{baseUrl}}/devGuide/styleGuides.html)
+      </site-nav>
+    </div>
+  </nav>
+  <div id="content-wrapper" class="fixed-header-padding">
+    {{ content }}
+  </div>
+  <nav id="page-nav" class="fixed-header-padding">
+    <div class="nav-component slim-scroll">
+      {{ pageNav }}
+    </div>
+  </nav>
+</div>
+
+<include src="footers/footer.mbdf" />
diff --git a/docs/_markbind/layouts/devGuide/footer.md b/docs/_markbind/layouts/devGuide/footer.md
diff --git a/docs/_markbind/layouts/devGuide/header.md b/docs/_markbind/layouts/devGuide/header.md
diff --git a/docs/_markbind/layouts/devGuide/navigation.md b/docs/_markbind/layouts/devGuide/navigation.md
diff --git a/docs/_markbind/footers/footer.md → docs/_markbind/layouts/footers/footer.mbdf b/docs/_markbind/footers/footer.md → docs/_markbind/layouts/footers/footer.mbdf
diff --git a/docs/_markbind/headers/header.md → docs/_markbind/layouts/headers/header.mbdf b/docs/_markbind/headers/header.md → docs/_markbind/layouts/headers/header.mbdf
@@ -1,5 +1,8 @@
-<header fixed>
+<head-bottom>
   <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
+</head-bottom>
+
+<header fixed>
   <navbar type="dark">
     <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand"><img src="{{baseUrl}}/images/logo-darkbackground.png" height="20"></a>
     <li><a highlight-on="exact" href="{{baseUrl}}/index.html" class="nav-link">HOME</a></li>

diff --git a/..._markbind/layouts/userGuide/navigation.md → docs/_markbind/layouts/userGuide.md b/..._markbind/layouts/userGuide/navigation.md → docs/_markbind/layouts/userGuide.md
@@ -1,7 +1,12 @@
-<navigation>
-
-<span style="font-weight: bolder; font-size: 1.25em;">User Guide</span>
+<include src="headers/header.mbdf" />
 
+<div id="flex-body">
+  <nav id="site-nav" class="fixed-header-padding">
+    <div class="site-nav-top">
+      <div class="font-weight-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
+    </div>
+    <div class="nav-component slim-scroll">
+      <site-nav>
 * [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)
 * **Authoring Contents** :expanded:
   * [Overview]({{baseUrl}}/userGuide/authoringContents.html)
@@ -28,4 +33,17 @@
   * [`site.json` File]({{baseUrl}}/userGuide/siteJsonFile.html)
   * [Tips & Tricks]({{baseUrl}}/userGuide/tipsAndTricks.html)
   * [Glossary]({{baseUrl}}/userGuide/glossary.html)
-</navigation>
+      </site-nav>
+    </div>
+  </nav>
+  <div id="content-wrapper" class="fixed-header-padding">
+    {{ content }}
+  </div>
+  <nav id="page-nav" class="fixed-header-padding">
+    <div class="nav-component slim-scroll">
+      {{ pageNav }}
+    </div>
+  </nav>
+</div>
+
+<include src="footers/footer.mbdf" />
diff --git a/docs/_markbind/layouts/userGuide/footer.md b/docs/_markbind/layouts/userGuide/footer.md
diff --git a/docs/_markbind/layouts/userGuide/header.md b/docs/_markbind/layouts/userGuide/header.md
diff --git a/docs/_markbind/navigation/devGuideSections.md b/docs/_markbind/navigation/devGuideSections.md
diff --git a/docs/_markbind/navigation/userGuideSections.md b/docs/_markbind/navigation/userGuideSections.md
diff --git a/docs/about.md b/docs/about.md
@@ -1,7 +1,5 @@
 <frontmatter>
   title: "About Us"
-  header: header.md
-  footer: footer.md
 </frontmatter>
 
 # About Us

diff --git a/docs/css/main.css b/docs/css/main.css
@@ -12,3 +12,135 @@ mark {
 .theme-card img {
     width: 100%;
 }
+
+/* Scrollbar */
+
+.slim-scroll::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll::-webkit-scrollbar-thumb {
+    background: #808080;
+    border-radius: 20px;
+}
+
+.slim-scroll::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-thumb {
+    background: #00b0ef;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}
+
+/* Layout containers */
+
+#flex-body {
+    display: flex;
+    flex: 1;
+}
+
+#content-wrapper {
+    flex: 1;
+    margin: 0 auto;
+    min-width: 0;
+    max-width: 1000px;
+    padding: 0.8rem 20px 0 20px;
+    transition: 0.4s;
+    -webkit-transition: 0.4s;
+}
+
+#site-nav,
+#page-nav {
+    position: sticky;
+    top: 0;
+    flex: 0 0 auto;
+    padding-top: 1rem;
+    max-width: 300px;
+    width: 300px;
+}
+
+#site-nav {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid lightgrey;
+    padding-bottom: 20px;
+    z-index: 999;
+    max-height: 100vh;
+}
+
+.site-nav-top {
+    margin-top: 0.8rem;
+    padding: 0 12px 12px 12px;
+}
+
+.nav-component {
+    padding: 0.8rem 12px 0 12px;
+    overflow-y: auto;
+}
+
+#page-nav {
+    display: block;
+    max-height: 90vh;
+}
+
+#page-nav .nav-component {
+    border-left: 1px solid lightgrey;
+    max-height: 90vh;
+}
+
+@media screen and (max-width: 1299.98px) {
+    #page-nav {
+        display: none;
+    }
+}
+
+/* Bootstrap medium(md) responsive breakpoint */
+@media screen and (max-width: 991.98px) {
+    #site-nav {
+        display: none;
+    }
+
+    footer {
+        margin-left: 60px;
+    }
+}
+
+/* Bootstrap small(sm) responsive breakpoint */
+@media (max-width: 767.98px) {
+    #content-wrapper {
+        padding: 0 10px;
+    }
+}
+
+/* Bootstrap extra small(xs) responsive breakpoint */
+@media screen and (max-width: 575.98px) {
+    #site-nav {
+        display: none;
+    }
+
+    footer {
+        margin-left: 0;
+    }
+}
+
+/* Hide site navigation when printing */
+@media print {
+    #site-nav {
+        display: none;
+    }
+
+    #page-nav {
+        display: none;
+    }
+}
diff --git a/docs/devGuide/design.md b/docs/devGuide/design.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
   pageNav: default
 </frontmatter>
 

diff --git a/docs/devGuide/devGuide.md b/docs/devGuide/devGuide.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
 </frontmatter>
 
 <h1 class="display-3">Developer guide</h1>

diff --git a/docs/devGuide/projectManagement.md b/docs/devGuide/projectManagement.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
   pageNav: default
 </frontmatter>
 

diff --git a/docs/devGuide/settingUp.md b/docs/devGuide/settingUp.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
 </frontmatter>
 
 # {{ title }}

diff --git a/docs/devGuide/styleGuides.md b/docs/devGuide/styleGuides.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
   pageNav: default
 </frontmatter>
 

diff --git a/docs/devGuide/workflow.md b/docs/devGuide/workflow.md
@@ -3,7 +3,7 @@
 
 <frontmatter>
   title: "{{ title }}"
-  layout: devGuide
+  layout: devGuide.md
   pageNav: default
 </frontmatter>