update

MarkBind · Dec 5, 2020 · cfe49cb · cfe49cb
1 parent 190a675
commit cfe49cb
Show file tree

Hide file tree

Showing 29 changed files with 761 additions and 733 deletions.
diff --git a/docs/_markbind/layouts/default.md b/docs/_markbind/layouts/default.md
@@ -1,7 +1,7 @@
 <include src="headers/header.mbdf" />
 
 <div id="flex-body">
-  <div id="content-wrapper">
+  <div id="content-wrapper" class="fixed-header-padding">
     {{ content }}
   </div>
 </div>

diff --git a/docs/_markbind/layouts/devGuide.md b/docs/_markbind/layouts/devGuide.md
@@ -1,8 +1,11 @@
 <include src="headers/header.mbdf" />
 
 <div id="flex-body">
-  <nav id="site-nav" class="navbar navbar-light bg-transparent">
-    <div class="border-right-grey nav-inner position-sticky slim-scroll">
+  <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)
@@ -15,10 +18,14 @@
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper">
+  <div id="content-wrapper" class="fixed-header-padding">
     {{ content }}
   </div>
-  {{ pageNav }}
+  <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/headers/header.mbdf b/docs/_markbind/layouts/headers/header.mbdf
@@ -1,6 +1,7 @@
-<head-top>
+<head-bottom>
   <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
-</head-top>
+</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>

diff --git a/docs/_markbind/layouts/userGuide.md b/docs/_markbind/layouts/userGuide.md
@@ -1,9 +1,11 @@
 <include src="headers/header.mbdf" />
 
 <div id="flex-body">
-  <nav id="site-nav" class="navbar navbar-light bg-transparent">
-    <div class="border-right-grey nav-inner position-sticky slim-scroll">
-      <div style="font-weight: bolder; font-size: 1.25em; margin-bottom: 1rem;">User Guide</div>
+  <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:
@@ -34,10 +36,14 @@
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper">
+  <div id="content-wrapper" class="fixed-header-padding">
     {{ content }}
   </div>
-  {{ pageNav }}
+  <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/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/userGuide/fullSyntaxReference.md b/docs/userGuide/fullSyntaxReference.md
@@ -28,29 +28,25 @@
   frontmatter : ['Front Matter', ['other']],
   includes : ['Includes', ['other']],
   keywords : ['Keywords', ['other']],
-  pageHead : ['Page Head', ['other']],
-  pageLayouts : ['Page Layouts', ['other']],
   tags : ['Tags', ['other']],
   variables : ['Variables', ['other']],
 
   badges : ['Badges', ['component', 'reader-facing']],
   boxes : ['Boxes', ['component', 'reader-facing']],
   diagrams : ['Diagrams', ['component', 'reader-facing']],
   dropdowns : ['Dropdowns', ['component', 'reader-facing']],
-  footers : ['Footers', ['other', 'reader-facing']],
-  headers: ['Headers', ['other', 'reader-facing']],
   modals : ['Modals', ['component', 'reader-facing']],
   navBars : ['Nav Bars', ['component', 'reader-facing']],
-  pageNavigationMenus : ['Page Navigation Menus', ['component', 'reader-facing']],
   panels : ['Panels', ['component', 'reader-facing']],
   pictures : ['Pictures', ['component', 'reader-facing']],
   popovers : ['Popovers', ['component', 'reader-facing']],
   questions : ['Questions and Quizzes', ['component', 'reader-facing']],
   searchBars : ['Search Bars', ['component', 'reader-facing']],
-  siteNavigationMenus : ['Site Navigation Menus', ['component', 'reader-facing']],
   tabs : ['Tabs', ['component', 'reader-facing']],
   thumbnails : ['Thumbnails', ['component', 'reader-facing']],
-  tooltips : ['Tooltips', ['component', 'reader-facing']]
+  tooltips : ['Tooltips', ['component', 'reader-facing']],
+  siteNavigationMenus : ['Site Navigation Menus', ['component', 'reader-facing']],
+  pageNavigationMenus : ['Page Navigation Menus', ['component', 'reader-facing']]
 } %}
 
 {% for topic in syntax_topics | dictsort %}

diff --git a/docs/userGuide/plugins/tags.mbdf b/docs/userGuide/plugins/tags.mbdf
@@ -1,4 +1,4 @@
-### Plugin: Tags
+{{ topHeadingLevel or "###" }} Plugin: Tags
 
 With this plugin you can use tags to selectively filter content when building a site.
 

diff --git a/docs/userGuide/syntax/footers.mbdf b/docs/userGuide/syntax/footers.mbdf
diff --git a/docs/userGuide/syntax/frontmatter.mbdf b/docs/userGuide/syntax/frontmatter.mbdf
@@ -26,7 +26,7 @@ Should you need more expressive formatting, or encounter any issues when formatt
 **Page properties:**
 
 * **`title`**: The title of the page. Will be used as the `<title>` attribute of the HTML page generated.
-* Other properties such as `keywords`, `layout`, `head` etc. will be explained in other places of this user guide.
+* Other properties such as `keywords`, `layout`, etc. will be explained in other places of this user guide.
 
 <include src="../siteJsonFile.md#page-property-overriding" />
 

diff --git a/docs/userGuide/syntax/headers.mbdf b/docs/userGuide/syntax/headers.mbdf