Bug/1848 (#1865)

* Modifies documentation to use a wider layout; adds better md table formatting

Signed-off-by: Colin Bayer <ccbayer@gmail.com>

* Adds Changelog notes

Signed-off-by: Colin Bayer <ccbayer@gmail.com>

* remove redundant css rule

Signed-off-by: Colin Bayer <ccbayer@gmail.com>

changelogs/unreleased/1848-ccbayer

@@ -0,0 +1 @@
+Jeckyll Site updates - modifies documentation to use a wider layout; adds better markdown table formatting

site/_layouts/docs.html

@@ -16,28 +16,28 @@
   <div class="container-fluid site-outer-container">
     <div class="site-container">
       {% include site-header.html %}
-      <div class="post-single-hero bg-color-{{ site.hero.background-color }}">
+      <div class="post-single-hero post-single-hero-short bg-color-{{ site.hero.background-color }}">
         <div class="section">
             <div class="section-content">
               <h1>Documentation</h1>
             </div>
         </div>
       </div>
-        <div class="post-single-body">
-        <div class="section section-card">
-            <div class="section-content pt-4 pb-0">
-              <div class="row">
-                <div class="col-md-3">
-                {% include versions.html %}
-                {% include nav.html %}
-                </div>
-                <div class="col-md-8 offset-md-1">
-                {% include version-warning.html %}
+        <div class="section section-card pt-4 pb-0">
+          <div class="container container-max">
+            <div class="row">
+              <div class="col-md-3 toc">
+              {% include versions.html %}
+              {% include nav.html %}
+              </div>
+              <div class="col-md-8">
+              {% include version-warning.html %}
+              <div class="documentation-container">
                 {{ content }}
-                </div>
+              </div>
               </div>
             </div>
-        </div>
+          </div>
         </div>
       {% include footer.html %}
     </div>

site/_scss/_styles.scss

@@ -10,6 +10,7 @@
 
 // Layouts
 @import "./site/layouts/container";
+@import "./site/layouts/documentation";
 
 // Objects
 @import "./site/objects/header";

site/_scss/site/layouts/_documentation.scss

@@ -0,0 +1,32 @@
+#docs {
+  .container.container-max {
+    max-width: 90%;
+  }
+  table {
+    @extend .table;
+    @extend .table-striped;
+    @extend .table-bordered;
+    thead {
+      @extend .thead-light;
+    }
+    td {
+      code {
+        word-break: keep-all;
+      }
+    }
+  }
+  .toc {
+    padding-left: 30px;
+    nav {
+      ul {
+        padding: 0;
+      }
+    }
+  }
+  .documentation-container {
+    @include media-breakpoint-down(lg) {
+      max-width: 100%;
+      overflow-x: scroll;
+    }
+  }
+}

site/_scss/site/objects/_post.scss

@@ -25,6 +25,9 @@
     font-weight: $font-weight-light;
     text-align: center;
   }
+  &.post-single-hero-short {
+    padding-bottom: 0;
+  }
 }
 
 .post-single-body {