DOC-204 style settings table

Author: markzegarelli

src/_includes/content/destination-footer.md

@@ -44,19 +44,21 @@ When you first create an audience, Personas sends an Identify call for every use
 ## Settings
 
 Segment lets you change these destination settings from the Segment app without having to touch any code.
-<table>
+<table class="settings">
+<thead>
 <tr>
-<th>Setting Name</th>
+<th>Setting</th>
 <th>Data Type</th>
 <th>Default</th>
 <th>Description</th>
 </tr>
+</thead>
 {% for item in currentIntegration.settings %}
   {% unless item.deprecated == true %}
 <tr>
-<td class="def" id="{{item.name | slugify}}" style="cursor:pointer">{{item.name}}</td>
+<td class="def" id="{{item.name | slugify}}"><code>{{item.name}}</code></td>
 <td>{{item.type}}</td>
-<td>{{item.defaultValue}}</td>
+<td><code>{{item.defaultValue}}</code></td>
 <td markdown="span">{{item.description}}</td>
 </tr>
 

src/_sass/components/_markdown.scss

@@ -1,10 +1,11 @@
 .markdown {
-  & > h1,
-  & > h2,
-  & > h3,
-  & > h4,
-  & > h5,
-  & > h6 {
+
+  &>h1,
+  &>h2,
+  &>h3,
+  &>h4,
+  &>h5,
+  &>h6 {
     position: relative;
     cursor: pointer;
     padding-left: 30px;
@@ -32,53 +33,53 @@
     }
   }
 
-  & > h1 {
+  &>h1 {
     @include breakpoint(medium up) {
       margin-top: 32px;
     }
   }
 
-  & > h2 {
+  &>h2 {
     margin-top: 32px;
 
     @include breakpoint(medium up) {
       margin-top: 48px;
     }
   }
 
-  & > h3 {
+  &>h3 {
     margin-top: 24px;
 
     @include breakpoint(medium up) {
       margin-top: 48px;
     }
   }
 
-  & > h4 {
+  &>h4 {
     margin-top: 16px;
 
     @include breakpoint(medium up) {
       margin-top: 24px;
     }
   }
 
-  & > h5 {
+  &>h5 {
     margin-top: 16px;
 
     @include breakpoint(medium up) {
       margin-top: 24px;
     }
   }
 
-  & > h6 {
+  &>h6 {
     margin-top: 8px;
 
     @include breakpoint(medium up) {
       margin-top: 16px;
     }
   }
 
-  & > p {
+  &>p {
     margin-top: 8px;
     overflow-wrap: break-word;
     line-height: 26px;
@@ -93,12 +94,12 @@
     overflow-y: auto;
   }
 
-  & > pre {
+  &>pre {
     margin-top: 24px;
     margin-bottom: 24px;
   }
 
-  & > hr {
+  &>hr {
     margin-top: 40px;
     margin-bottom: 40px;
 
@@ -108,7 +109,7 @@
     }
   }
 
-  & > div {
+  &>div {
     margin-top: 16px;
   }
 
@@ -121,11 +122,13 @@
       border: 1px solid #ddd;
       display: block;
       margin: 24px auto;
-      border-radius: 5px;;
+      border-radius: 5px;
+      ;
     }
   }
 
-  ul, ol {
+  ul,
+  ol {
     padding-left: 25px;
     line-height: 26px;
     list-style-type: none;
@@ -142,14 +145,15 @@
         left: 0;
       }
 
-      & > ul, ol {
+      &>ul,
+      ol {
         margin-top: 0;
       }
     }
   }
 
   ul {
-    & > li {
+    &>li {
       &::before {
         width: 8px;
         height: 8px;
@@ -163,7 +167,7 @@
   ol {
     counter-reset: list-items;
 
-    & > li {
+    &>li {
       counter-increment: list-items;
 
       &::before {
@@ -218,11 +222,43 @@
     }
   }
 
-  & > table {
+  table.settings {
+    width: 100%;
+    table-layout: fixed;
+
+    th:first-of-type {
+      width: 25%;
+    }
+
+    th:nth-of-type(2n) {
+      width: 15%
+    }
+
+    th:nth-of-type(3n) {
+      width: 15%
+    }
+
+    th:nth-of-type(4n) {
+      width: 45%
+    }
+
+    td.def {
+      font-size: 12px;
+      cursor:  pointer;
+      code {
+        max-width: 100%;
+        word-break: break-all;
+      }
+
+
+    }
+  }
+
+  &>table {
     margin-top: 24px;
   }
 
-  & > *:first-child {
+  &>*:first-child {
     margin-top: 0;
   }