iOS jazzy theme improvements (#7422)

some small improvements to the theme

17 files changed, 276 insertions, 142 deletions

diff --git a/platform/darwin/docs/theme/assets/css/jazzy.css.scss b/platform/darwin/docs/theme/assets/css/jazzy.css.scss
index 99eebd0572..cad4764d50 100644
--- a/platform/darwin/docs/theme/assets/css/jazzy.css.scss
+++ b/platform/darwin/docs/theme/assets/css/jazzy.css.scss
@@ -5,7 +5,7 @@
 // ===========================================================================
 
 $body_background: #fff;
-$body_font: 15px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$body_font: 14px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $text_color: #333;
 $gray_border: 1px solid #ddd;
 
@@ -18,9 +18,15 @@ $link_hover_color: #63b6e5;
 $table_alt_row_color: #fbfbfb;
 $table_border_color: #ddd;
 
-$code_bg_color: #f6f6f6;
+$color_light: #F5F8FC;
+$color_darkblue: #0B293A;
+$color_brightblue: #3A68D8;
+$color_darkblue_lighten: rgba(11, 41, 58, 0.75);
+$keyline_color: rgba(12, 40, 73, 0.08);
 $code_font: Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospacee;
 
+$purple: #9595D1;
+$blue: #4092C5;
 
 // ----- Layout
 
@@ -34,38 +40,29 @@ $navigation_max_width: 300px;
 $header_weight: normal;
 $header_color: #555;
 $header_font: 'Open Sans Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$header_bg_color: #3887be;
 $header_link_color: #fff;
 $doc_coverage_color: #999;
 
 
-// ----- Breadcrumbs
-
-$breadcrumbs_bg_color: #fbfbfb;
-$breadcrumbs_border_color: #ddd;
-
-
 // ----- Navigation
 
 $navigation_max_width: 300px;
 $navigation_bg_color: #fbfbfb;
-$navigation_border_color: #ddd;
-$navigation_title_color: rgba(0, 0, 0, 0.5);
 $navigation_task_color: $link_color;
 
-$section_name_color: $navigation_title_color;
+$section_name_color: $color_darkblue;
 
 // ----- Content
 
 $declaration_title_language_color: #4183c4;
-$declaration_language_border: 5px solid #cde9f4;
+$declaration_language_border: 4px solid $color_brightblue;
 $declaration_bg_color: #fdfeff;
 $declaration_border_color: #ddd;
 
 $aside_color: #aaa;
-$aside_border: 5px solid lighten($aside_color, 20%);
+$aside_border: 4px solid lighten($aside_color, 20%);
 $aside_warning_color: #ff0000;
-$aside_warning_border: 5px solid lighten($aside_warning_color, 20%);
+$aside_warning_border: 4px solid lighten($aside_warning_color, 20%);
 
 // ----- Footer
 
@@ -86,9 +83,8 @@ $footer_link_color: #555;
 body {
   margin: 0;
   background: $body_background;
-  color: $text_color;
+  color: $color_darkblue;
   font: $body_font;
-  letter-spacing: .2px;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
 }
@@ -99,16 +95,16 @@ body {
   font-family: $header_font;
   font-size: $font-size;
   font-weight: $header_weight;
-  color: $header_color;
+  color: $color_darkblue;
   margin: $margin;
 }
 
 h1 {
-  @include heading(2.0rem, 0.5em 0 0.6em);
+  @include heading(1.7rem, 0.5em 0 0.6em);
 }
 
 h1 a {
-  color: $header_color;
+  color: $color_darkblue;
 }
 
 h2 {
@@ -116,7 +112,7 @@ h2 {
 }
 
 h3 {
-  @include heading(1rem, 1em 0 0.3em);
+  @include heading(14px, 1em 0 0.3em);
 }
 
 h4 {
@@ -132,10 +128,19 @@ p {
 }
 
 ul, ol {
-  padding: 0 0 0 2em;
+  padding: 0 0 0 1.5em;
   margin: 0 0 0.85em;
 }
 
+ul.item-container {
+  padding: 0px;
+}
+
+ul:first-of-type,
+ol:first-of-type {
+  margin: 0px;
+}
+
 blockquote {
   margin: 0 0 0.85em;
   padding: 0 15px;
@@ -153,11 +158,9 @@ img {
 a {
   color: $link_color;
   text-decoration: none;
-
-  &:hover, &:focus {
-    color: $link_hover_color;
+  > *:hover, &:hover, &:focus {
+    opacity: 0.7;
   }
-  
   &:focus {
     box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
   }
@@ -168,21 +171,17 @@ a {
 table {
   background: $body_background;
   width: 100%;
+  font-size: 13px;
+  line-height: 23px;
   border-collapse: collapse;
   border-spacing: 0;
   overflow: auto;
   margin: 0 0 0.85em;
 }
 
-tr {
-  &:nth-child(2n) {
-    background-color: $table_alt_row_color;
-  }
-}
-
 th, td {
   padding: 6px 13px;
-  border: 1px solid $table_border_color;
+  border: 1px solid $keyline_color;
 }
 
 
@@ -192,29 +191,33 @@ pre {
   margin: 0 0 1.275em;
   padding: .85em 1em;
   overflow: auto;
-  background: $code_bg_color;
+  background: $color_light;
   font-family: $code_font;
   border-radius: 4px;
 }
 
 code {
   font-family: $code_font;
-  font-size: .85em;
+  font-size: 13px;
   line-height: .85em;
 }
 
 p, li {
   > code {
-    background: $code_bg_color;
-    padding: .2em;
+    background: $color_light;
+    padding: 0.1em 0.2em;
+    font-weight: bold;
+    border: 1px solid #D5D5D5;
     border-radius: 4px;
-    &:before, &:after {
-      letter-spacing: -.35em;
-      content: "\00a0";
-    }
   }
 }
 
+td > code,
+.graybox code {
+  font-weight: bold;
+  font-size: 12px;
+}
+
 pre code {
   padding: 0;
   white-space: pre;
@@ -234,7 +237,14 @@ pre code {
     flex-direction: row;
   }
 }
-
+.limiter {
+  max-width: 1360px;
+  margin: auto;
+  padding: 0px 30px;
+}
+.space-right2 {
+  margin-right: 20px;
+}
 
 // ===========================================================================
 //
@@ -242,17 +252,31 @@ pre code {
 //
 // ===========================================================================
 
+.header-container {
+  background: $color_brightblue;
+}
 .header {
   display: flex;
-  padding: $gutter/2;
-  font-size: 0.875em;
-  background: $header_bg_color;
+  padding: 12px 0px;
+  font-size: 12px;
   color: $doc_coverage_color;
+  @media (max-width: 768px) {
+    display: block;
+  }
 }
+.header-tag {
+  vertical-align: text-top;
+  line-height: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 5px;
+  margin-left: 5px;
+  opacity: 0.9;
 
+}
 .header-col {
-  margin: 0;
-  padding: 0 $gutter/2
+  margin: 5px 0 0 0;
+  padding: 0
 }
 
 .header-col--primary {
@@ -260,11 +284,12 @@ pre code {
 }
 
 .header-link {
+  font-family: $header_font;
   color: $header_link_color;
 }
 
 .header-image, .header-icon {
-  padding-right: 6px;
+  padding-right: 2px;
   vertical-align: -4px;
   height: 16px;
 }
@@ -276,11 +301,11 @@ pre code {
 // ===========================================================================
 
 .breadcrumbs {
-  font-size: 0.875em;
-  padding: $gutter / 2 $gutter;
+  font-size: 13px;
+  padding: $gutter / 2 0px;
   margin: 0;
-  background: $breadcrumbs_bg_color;
-  border-bottom: 1px solid $breadcrumbs_border_color;
+  background: $color_light;
+  border-bottom: 1px solid $keyline_color;
 }
 
 .carat {
@@ -297,18 +322,17 @@ pre code {
 
 .navigation {
   order: 2;
-
+  font-size: 13px;
+  padding-top: 20px;
   @media (min-width: 768px) {
     order: 1;
     width: 25%;
     min-width: $navigation_min_width;
     max-width: $navigation_max_width;
     padding-bottom: $gutter*4;
-    font-size: 12px;
     line-height: 20px;
     overflow: hidden;
-    background: $navigation_bg_color;
-    border-right: 1px solid $navigation_border_color;
+    border-right: 1px solid $keyline_color;
   }
 }
 
@@ -318,18 +342,20 @@ pre code {
 }
 
 .nav-group-name {
-  border-bottom: 1px solid $navigation_border_color;
-  padding: $gutter/2 0 $gutter/2 $gutter;
+  padding: $gutter/2 0 $gutter/2 0px;
 }
 
-.nav-group-name-link {
+.small-heading, h4 {
+  font-size: 13px;
   font-family: $header_font;
-  color: $navigation_title_color;
+  text-transform: uppercase;
+  color: $color_darkblue;
+  letter-spacing: 1px;
 }
 
 .nav-group-tasks {
   margin: $gutter/2 0;
-  padding: 0 0 0 $gutter/2;
+  padding: 0 0 0 0;
 }
 
 .nav-group-task {
@@ -342,9 +368,8 @@ pre code {
 }
 
 .nav-group-task-link {
-   color: $navigation_task_color;
+   color: $color_darkblue_lighten;
 }
-
 // ===========================================================================
 //
 //  Content
@@ -362,18 +387,20 @@ pre code {
 }
 
 .section {
-  padding: 0 $gutter * 2;
-  border-bottom: 1px solid $navigation_border_color;
+  padding: 0px 20px;
+  @media (max-width: 768px) {
+    padding: inherit;
+  }
 }
 
 .section-content {
   margin: 0 auto;
   padding: $gutter 0;
+  border-bottom: 1px solid $keyline_color;
 }
 
 .section-content img {
   margin: 0 auto;
-  display: block;
 }
 
 .section-name {
@@ -381,14 +408,29 @@ pre code {
   display: block;
 }
 
+.anchor-icon {
+  margin-left: 4px;
+  opacity: 0.7;
+  display: inline-block;
+  background: url("../img/link.svg");
+  background-repeat: no-repeat;
+  width: 10px;
+  height: 10px;
+}
+
+h1 > .anchor-icon { margin-bottom: 2px; }
 .declaration .highlight {
+  font-size: 15px;
   overflow-x: initial; // This allows the scrollbar to show up inside declarations
   padding: $gutter/2 0;
+  line-height: 20px;
   margin: 0;
   background-color: transparent;
   border: none;
 }
 
+.highlight a { text-decoration: underline; }
+
 .task-group-section {
   border-top: $gray_border;
 }
@@ -406,10 +448,7 @@ pre code {
   }
 }
 
-.item-container { }
-
 .item {
-  padding-top: 8px;
   width: 100%;
   list-style-type: none;
 
@@ -421,19 +460,42 @@ pre code {
   }
 
   .token {
-    padding-left: 3px;
     margin-left: 0px;
-    font-size: 1em;
-    word-break: break-all;
+    font-size: 13px;
+    display: flex;
+    padding: 5px 0px;
+    line-height: 14px;
+  }
+  .token-name {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .token-icon {
+    background: url('../img/plus.svg');
+    width: 17px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 13px;
+    opacity: 1;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+  }
+  .token-icon-minus {
+    background: url('../img/minus.svg');
+    background-repeat: no-repeat;
   }
 
   .declaration-note {
-    font-size: .85em;
+    font-size: 13px;
     color: #808080;
     font-style: italic;
   }
+
 }
 
+
 .pointer-container {
   border-bottom: $gray_border;
   left: -23px;
@@ -462,9 +524,10 @@ pre code {
   overflow: hidden;
   .section {
     background: $declaration_bg_color;
-    border: $gray_border;
-    border-top-width: 0;
-    padding: $gutter / 1.5 $gutter;
+    border: 1px solid $keyline_color;
+    padding: 15px 20px;
+    border-radius: 4px;
+    margin: 10px 0px 30px;
   }
 }
 
@@ -474,12 +537,14 @@ pre code {
   border-left: $aside_border;
   overflow-y: hidden;
   .aside-title {
-    font-size: 9px;
+    font-size: 10px;
+    font-family: $header_font;
     letter-spacing: 2px;
     text-transform: uppercase;
-    padding-bottom: 0;
+    padding: 2px 8px;
+    display: inline;
+    border-radius: 4px;
     margin: 0;
-    color: $aside_color;
     -webkit-user-select: none;
   }
   p:last-child {
@@ -488,9 +553,16 @@ pre code {
 }
 
 .language {
+  background: $color_light;
+  border-radius: 4px;
   border-left: $declaration_language_border;
+}
+
+.aside.aside-see, .aside.aside-note, {
+  background: $color_light;
+  border-radius: 4px;
   .aside-title {
-    color: $declaration_title_language_color;
+    padding-left: 0px;
   }
 }
 
@@ -502,15 +574,17 @@ pre code {
 }
 
 .graybox {
-  border-collapse: collapse;
   width: 100%;
+  border-collapse:separate;
+  border:solid $keyline_color 1px;
+  border-radius:6px;
+  -moz-border-radius:6px;
   p {
     margin: 0;
     word-break: break-word;
     min-width: 50px;
   }
   td {
-    border: $gray_border;
     padding: 5px 25px 5px 10px;
     vertical-align: middle;
   }
@@ -520,15 +594,19 @@ pre code {
     vertical-align: top;
     word-break: normal;
     width: 40px;
+    border-left: none;
+    border-top: none;
+  }
+  th, td {
+    border-right:none;
+    border-top: none;
+  }
+  td:first-child, th:first-child {
+     border-left: none;
+  }
+  tr:last-of-type td {
+    border-bottom: none;
   }
-}
-
-.slightly-smaller {
-  font-size: 0.9em;
-}
-
-.show-on-github {
-  font-variant: small-caps;
 }
 
 .show-on-github-icon {
@@ -538,6 +616,12 @@ pre code {
   padding-left: 2px;
 }
 
+.show-on-github a {
+  margin: 10px 0 10px;
+  display: inline-block;
+  font-size: 13px;
+}
+
 
 // ===========================================================================
 //
@@ -546,10 +630,9 @@ pre code {
 // ===========================================================================
 
 .footer {
-  border-top: 1px $navigation_border_color solid;
+  border-top: 1px $keyline_color solid;
   padding: $gutter/2 $gutter;
   color: $footer_text_color;
-  font-size: 0.8em;
 
   p {
     display: inline;
@@ -598,3 +681,11 @@ html.dash {
     src:url('../fonts/opensans-bold.eot#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold.woff') format('woff');
   }
+
+
+.strong { font-family: $header_font;}
+.text-purple { color: $purple; }
+.text-blue { color: $blue; }
+.keyline-purple { border-color: $purple; }
+.keyline-blue { border-color: $blue; }
+
diff --git a/platform/darwin/docs/theme/assets/img/github.svg b/platform/darwin/docs/theme/assets/img/github.svg
index b59e7f82f1..5b2fa95ab7 100644
--- a/platform/darwin/docs/theme/assets/img/github.svg
+++ b/platform/darwin/docs/theme/assets/img/github.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path stroke="none" fill="#555" fill-rule="evenodd" d="M16.6,0.4 C7.6,0.4 0.3,7.7 0.3,16.7 C0.3,23.9 5,30 11.4,32.2 C12.2,32.3 12.5,31.8 12.5,31.4 L12.5,28.6 C8,29.6 7,26.4 7,26.4 C6.3,24.5 5.2,24 5.2,24 C3.7,23 5.3,23 5.3,23 C6.9,23.1 7.8,24.7 7.8,24.7 C9.3,27.2 11.6,26.5 12.5,26.1 C12.6,25 13.1,24.3 13.5,23.9 C9.9,23.5 6.1,22.1 6.1,15.8 C6.1,14 6.7,12.6 7.8,11.4 C7.6,11 7.1,9.3 8,7.1 C8,7.1 9.4,6.7 12.5,8.8 C13.8,8.4 15.2,8.3 16.6,8.3 C18,8.3 19.4,8.5 20.7,8.8 C23.8,6.7 25.2,7.1 25.2,7.1 C26.1,9.3 25.5,11 25.4,11.4 C26.4,12.5 27.1,14 27.1,15.8 C27.1,22.1 23.3,23.4 19.7,23.8 C20.3,24.3 20.8,25.3 20.8,26.8 L20.8,31.3 C20.8,31.7 21.1,32.2 21.9,32.1 C28.4,29.9 33,23.8 33,16.6 C32.9,7.7 25.6,0.4 16.6,0.4 L16.6,0.4 Z"></path>
+    <path stroke="none" fill="#3887BE" fill-rule="evenodd" d="M16.6,0.4 C7.6,0.4 0.3,7.7 0.3,16.7 C0.3,23.9 5,30 11.4,32.2 C12.2,32.3 12.5,31.8 12.5,31.4 L12.5,28.6 C8,29.6 7,26.4 7,26.4 C6.3,24.5 5.2,24 5.2,24 C3.7,23 5.3,23 5.3,23 C6.9,23.1 7.8,24.7 7.8,24.7 C9.3,27.2 11.6,26.5 12.5,26.1 C12.6,25 13.1,24.3 13.5,23.9 C9.9,23.5 6.1,22.1 6.1,15.8 C6.1,14 6.7,12.6 7.8,11.4 C7.6,11 7.1,9.3 8,7.1 C8,7.1 9.4,6.7 12.5,8.8 C13.8,8.4 15.2,8.3 16.6,8.3 C18,8.3 19.4,8.5 20.7,8.8 C23.8,6.7 25.2,7.1 25.2,7.1 C26.1,9.3 25.5,11 25.4,11.4 C26.4,12.5 27.1,14 27.1,15.8 C27.1,22.1 23.3,23.4 19.7,23.8 C20.3,24.3 20.8,25.3 20.8,26.8 L20.8,31.3 C20.8,31.7 21.1,32.2 21.9,32.1 C28.4,29.9 33,23.8 33,16.6 C32.9,7.7 25.6,0.4 16.6,0.4 L16.6,0.4 Z"></path>
 </svg>
diff --git a/platform/darwin/docs/theme/assets/img/link.svg b/platform/darwin/docs/theme/assets/img/link.svg
new file mode 100644
index 0000000000..7053b958b4
--- /dev/null
+++ b/platform/darwin/docs/theme/assets/img/link.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>Page 1 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.461229011">
+        <g id="Desktop-Copy" transform="translate(-251.000000, -309.000000)" fill="#071B32">
+            <path d="M255.260269,316.616571 L254.592518,317.284675 C254.075101,317.80176 253.233025,317.80176 252.715608,317.284675 C252.19819,316.766905 252.19819,315.925161 252.715608,315.407433 L254.592518,313.530854 C255.110267,313.013105 255.951679,313.013105 256.469097,313.530854 C256.630773,313.69253 256.736069,313.887591 256.796969,314.093309 C256.846216,314.064798 256.896791,314.04147 256.938262,313.999999 L257.810446,313.128146 C257.698992,312.93827 257.5707,312.755526 257.407407,312.592565 C256.371266,311.556133 254.69039,311.556133 253.653918,312.592565 L251.777339,314.469143 C250.740887,315.505927 250.740887,317.18618 251.777339,318.222964 C252.813791,319.259084 254.494355,319.259084 255.530828,318.222964 L256.953171,316.800601 C256.384848,316.884186 255.801346,316.827163 255.260269,316.616571 M260.222897,313.530854 L258.345675,315.407412 C257.309534,316.444196 255.628659,316.444196 254.592518,315.407412 C254.429225,315.244782 254.301576,315.061375 254.189458,314.872162 L255.061663,313.999978 C255.103134,313.958154 255.15433,313.934204 255.203246,313.906004 C255.263504,314.112096 255.3688,314.307115 255.530807,314.469123 C256.048225,314.986851 256.89028,314.986208 257.407386,314.469123 L259.283965,312.592544 C259.801714,312.074774 259.801714,311.233051 259.283965,310.715613 C258.766838,310.198195 257.925135,310.198195 257.407386,310.715613 L256.739925,311.383716 C256.198558,311.172772 255.615036,311.116081 255.047065,311.199355 L256.469076,309.777323 C257.50586,308.740892 259.186092,308.740892 260.222876,309.777323 C261.259038,310.813817 261.259038,312.494402 260.222897,313.530854" id="Page-1-Copy"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/platform/darwin/docs/theme/assets/img/minus.svg b/platform/darwin/docs/theme/assets/img/minus.svg
new file mode 100644
index 0000000000..432a468d82
--- /dev/null
+++ b/platform/darwin/docs/theme/assets/img/minus.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.68516791">
+        <g id="Desktop-Copy" transform="translate(-633.000000, -419.000000)" fill="#3887BE">
+            <g id="Page-1" transform="translate(633.000000, 419.000000)">
+                <path d="M6.49003164,12.5026484 C9.77303945,12.5107734 12.477852,9.82012891 12.5025824,6.52148047 C12.5272621,3.23964063 9.80929727,0.507914063 6.50892227,0.497351563 C3.22951992,0.486890625 0.516836328,3.18535547 0.497336328,6.47735156 C0.477836328,9.76472656 3.19280508,12.4944727 6.49003164,12.5026484 M-1.5234375e-05,6.49233203 C8.6328125e-05,2.89442969 2.92752383,-0.00116796875 6.56371523,2.52575739e-14 C10.1085004,0.0011171875 13.0018637,2.95516406 12.9999848,6.57124609 C12.9981566,10.111918 10.0405551,13.0024883 6.42218789,13 C2.91340664,12.9976133 -0.000116796875,10.045293 -1.5234375e-05,6.49233203" id="Fill-1"></path>
+                <path d="M6.50034531,6.75380469 C5.4769,6.75380469 4.45345469,6.75385547 3.43000938,6.75370312 C3.37084922,6.75365234 3.2953375,6.77437109 3.25577891,6.74593359 C3.16254453,6.67885156 3.08637266,6.58795312 3.00329453,6.50665234 C3.09033359,6.42057812 3.17204063,6.32769922 3.26750938,6.2521875 C3.29904453,6.22720312 3.36592344,6.24624609 3.41665391,6.24624609 C5.47197422,6.24614453 7.52734531,6.24614453 9.58261484,6.24624609 C9.63334531,6.24624609 9.70017344,6.22720312 9.73186094,6.25213672 C9.82748203,6.32744531 9.90944297,6.42012109 9.99673594,6.50604297 C9.90543125,6.58810547 9.81905234,6.67697266 9.72013047,6.74852344 C9.68656406,6.77274609 9.62136094,6.75375391 9.57063047,6.75375391 C8.54723594,6.75380469 7.52373984,6.75380469 6.50034531,6.75380469" id="Fill-4"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/platform/darwin/docs/theme/assets/img/plus.svg b/platform/darwin/docs/theme/assets/img/plus.svg
new file mode 100644
index 0000000000..77338665e5
--- /dev/null
+++ b/platform/darwin/docs/theme/assets/img/plus.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop-Copy" transform="translate(-664.000000, -384.000000)" fill="#3887BE">
+            <g id="Page-1-Copy-2" transform="translate(664.000000, 384.000000)">
+                <path d="M6.50560625,12.5026484 C9.79216875,12.4978242 12.4953055,9.79478906 12.502618,6.50583984 C12.5098797,3.21653516 9.78231719,0.489378906 6.49331719,0.497402344 C3.20421563,0.505425781 0.503719531,3.20576953 0.497321094,6.49294141 C0.490973438,9.78478516 3.21295,12.5074219 6.50560625,12.5026484 M2.03125001e-05,6.49563281 C7.10937501e-05,2.89549609 2.92552813,-0.00106640625 6.56045,2.10942375e-14 C10.1069109,0.001015625 13.0016961,2.95353906 13.0000203,6.56799609 C12.9982938,10.1104453 10.0425203,13.0021836 6.42547344,13 C2.91501641,12.9978672 -3.04687499e-05,10.0470195 2.03125001e-05,6.49563281" id="Fill-1"></path>
+                <path d="M6.75167695,6.75167187 L6.75167695,8.89296484 C6.75167695,9.13833984 6.74700508,9.38386719 6.75320039,9.62908984 C6.75797383,9.81850391 6.71440352,9.99253125 6.49934492,9.992125 C6.28459102,9.99161719 6.24574336,9.81753906 6.24655586,9.62817578 C6.25046602,8.68151172 6.2483332,7.73484766 6.2483332,6.75167187 L5.96527852,6.75167187 C5.14450117,6.75167187 4.32367305,6.75030078 3.5028957,6.75273828 C3.31896602,6.75329687 3.14113008,6.73039453 3.13772773,6.5040625 C3.13432539,6.27828906 3.30662617,6.2465 3.49405977,6.24700781 C4.39877852,6.24980078 5.30354805,6.24832812 6.2483332,6.24832812 L6.2483332,5.96999609 C6.2483332,5.19151953 6.25061836,4.41304297 6.24665742,3.63456641 C6.24569258,3.44982422 6.26976289,3.26711328 6.4872082,3.25975 C6.72288398,3.25172656 6.75416523,3.43834766 6.75320039,3.63456641 C6.74949336,4.4045625 6.75167695,5.17455859 6.75167695,5.94455469 L6.75167695,6.24832812 L7.06900898,6.24832812 C7.88130586,6.24832812 8.69365352,6.24980078 9.50595039,6.24716016 C9.69302852,6.24660156 9.86598945,6.27925391 9.86213008,6.50482422 C9.85821992,6.73080078 9.68002852,6.75339844 9.49609883,6.75278906 C8.68380195,6.75025 7.87150508,6.75167187 7.0592082,6.75167187 L6.75167695,6.75167187 Z" id="Fill-4"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/platform/darwin/docs/theme/assets/js/jazzy.js b/platform/darwin/docs/theme/assets/js/jazzy.js
index 70d90890c7..2e42193e38 100755
--- a/platform/darwin/docs/theme/assets/js/jazzy.js
+++ b/platform/darwin/docs/theme/assets/js/jazzy.js
@@ -22,9 +22,11 @@ $(".token").click(function(event) {
     return;
   }
   var link = $(this);
+  var linkIcon = link.find('.token-icon');
   var animationDuration = 300;
-  var tokenOffset = "-15px";
+  var tokenOffset = "0px";
   var original = link.css('marginLeft') == tokenOffset;
+  linkIcon.toggleClass('token-icon-minus');
   link.animate({'margin-left':original ? "0px" : tokenOffset}, animationDuration);
   $content = link.parent().parent().next();
   $content.slideToggle(animationDuration);
diff --git a/platform/darwin/docs/theme/templates/doc.mustache b/platform/darwin/docs/theme/templates/doc.mustache
index b16521a431..c558b1fc34 100644
--- a/platform/darwin/docs/theme/templates/doc.mustache
+++ b/platform/darwin/docs/theme/templates/doc.mustache
@@ -19,19 +19,21 @@
 
     {{> header}}
 
-    <p class="breadcrumbs">
-      <a class="breadcrumb" href="{{path_to_root}}index.html">{{module_name}} Reference</a>
-      <img class="carat" src="{{path_to_root}}img/carat.png" />
-      {{name}} {{kind}} Reference
-    </p>
+    <div class="breadcrumbs">
+      <div class="limiter">
+        <a class="breadcrumb" href="{{path_to_root}}index.html">{{module_name}} Reference</a>
+        <img class="carat" src="{{path_to_root}}img/carat.png" />
+        {{name}} {{kind}} Reference
+      </div>
+    </div>
 
-    <div class="content-wrapper">
+    <div class="content-wrapper limiter">
       {{> nav}}
       <article class="main-content">
 
         <section class="section">
           <div class="section-content">
-            {{^hide_name}}<h1>{{name}}</h1>{{/hide_name}}
+            {{^hide_name}}<a href="#/{{name}}"><h1 id="{{name}}">{{name}}<span class="anchor-icon" /></h1></a>{{/hide_name}}
             {{#declaration}}
               <div class="declaration">
                 <div class="language">
diff --git a/platform/darwin/docs/theme/templates/footer.mustache b/platform/darwin/docs/theme/templates/footer.mustache
index e72ede6126..c0bd7b9446 100644
--- a/platform/darwin/docs/theme/templates/footer.mustache
+++ b/platform/darwin/docs/theme/templates/footer.mustache
@@ -1,3 +1,3 @@
-<section class="footer">
+<section class="footer limiter">
   {{{copyright}}} Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v{{jazzy_version}}</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.
 </section>
diff --git a/platform/darwin/docs/theme/templates/header.mustache b/platform/darwin/docs/theme/templates/header.mustache
index 15e35b9a81..f705b4125b 100644
--- a/platform/darwin/docs/theme/templates/header.mustache
+++ b/platform/darwin/docs/theme/templates/header.mustache
@@ -1,28 +1,33 @@
-<header class="header">
-  <p class="header-col header-col--primary">
-    <a class="header-link" href="{{path_to_root}}index.html">
-      <img class="header-icon" src="{{path_to_root}}img/mapbox.svg" alt="{{module_name}} Docs"/>
-    </a>
-    {{#doc_coverage}} ({{doc_coverage}}% documented){{/doc_coverage}}
-  </p>
-
-  {{#github_url}}
-    <p class="header-col header-col--secondary">
-      <a class="header-link" href="{{github_url}}">
-        <svg class="header-icon" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-		      <path stroke="none" stroke-width="1" fill="white" fill-rule="evenodd" d="M16.6,0.4 C7.6,0.4 0.3,7.7 0.3,16.7 C0.3,23.9 5,30 11.4,32.2 C12.2,32.3 12.5,31.8 12.5,31.4 L12.5,28.6 C8,29.6 7,26.4 7,26.4 C6.3,24.5 5.2,24 5.2,24 C3.7,23 5.3,23 5.3,23 C6.9,23.1 7.8,24.7 7.8,24.7 C9.3,27.2 11.6,26.5 12.5,26.1 C12.6,25 13.1,24.3 13.5,23.9 C9.9,23.5 6.1,22.1 6.1,15.8 C6.1,14 6.7,12.6 7.8,11.4 C7.6,11 7.1,9.3 8,7.1 C8,7.1 9.4,6.7 12.5,8.8 C13.8,8.4 15.2,8.3 16.6,8.3 C18,8.3 19.4,8.5 20.7,8.8 C23.8,6.7 25.2,7.1 25.2,7.1 C26.1,9.3 25.5,11 25.4,11.4 C26.4,12.5 27.1,14 27.1,15.8 C27.1,22.1 23.3,23.4 19.7,23.8 C20.3,24.3 20.8,25.3 20.8,26.8 L20.8,31.3 C20.8,31.7 21.1,32.2 21.9,32.1 C28.4,29.9 33,23.8 33,16.6 C32.9,7.7 25.6,0.4 16.6,0.4 L16.6,0.4 Z"></path>
-        </svg>
-        View on GitHub
+<header class="header-container">
+  <div class="limiter">
+    <div class="header">
+    <p class="header-col header-col--primary">
+      <a class="header-link" href="{{path_to_root}}index.html">
+        <img style="height: 25px;"  class="header-icon" src="{{path_to_root}}img/mapbox.svg" alt="{{module_name}} Docs"/>
+        <span class='header-tag'>BRANDLESS_DOCSET_TITLE Reference</span>
       </a>
+      {{#doc_coverage}} ({{doc_coverage}}% documented){{/doc_coverage}}
     </p>
-  {{/github_url}}
 
-  {{#dash_url}}
-    <p class="header-col header-col--secondary">
-      <a class="header-link" href="{{dash_url}}">
-        <img class="header-icon" src="{{path_to_root}}img/dash.png"/>
-        Install in Dash
-      </a>
-    </p>
-  {{/dash_url}}
+    {{#github_url}}
+      <p class="header-col header-col--secondary">
+        <a class="header-link space-right2" href="{{github_url}}">
+          <svg style="margin-bottom: 1px;" class="header-icon" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  		      <path stroke="none" stroke-width="1" fill="white" fill-rule="evenodd" d="M16.6,0.4 C7.6,0.4 0.3,7.7 0.3,16.7 C0.3,23.9 5,30 11.4,32.2 C12.2,32.3 12.5,31.8 12.5,31.4 L12.5,28.6 C8,29.6 7,26.4 7,26.4 C6.3,24.5 5.2,24 5.2,24 C3.7,23 5.3,23 5.3,23 C6.9,23.1 7.8,24.7 7.8,24.7 C9.3,27.2 11.6,26.5 12.5,26.1 C12.6,25 13.1,24.3 13.5,23.9 C9.9,23.5 6.1,22.1 6.1,15.8 C6.1,14 6.7,12.6 7.8,11.4 C7.6,11 7.1,9.3 8,7.1 C8,7.1 9.4,6.7 12.5,8.8 C13.8,8.4 15.2,8.3 16.6,8.3 C18,8.3 19.4,8.5 20.7,8.8 C23.8,6.7 25.2,7.1 25.2,7.1 C26.1,9.3 25.5,11 25.4,11.4 C26.4,12.5 27.1,14 27.1,15.8 C27.1,22.1 23.3,23.4 19.7,23.8 C20.3,24.3 20.8,25.3 20.8,26.8 L20.8,31.3 C20.8,31.7 21.1,32.2 21.9,32.1 C28.4,29.9 33,23.8 33,16.6 C32.9,7.7 25.6,0.4 16.6,0.4 L16.6,0.4 Z"></path>
+          </svg>
+          View on GitHub
+        </a>
+      </p>
+    {{/github_url}}
+
+    {{#dash_url}}
+      <p class="header-col header-col--secondary">
+        <a class="header-link bold" href="{{dash_url}}">
+          <img style="margin-bottom: 1px;" class="header-icon" src="{{path_to_root}}img/dash.png"/>
+          Install in Dash
+        </a>
+      </p>
+    {{/dash_url}}
+  </div>
+  </div>
 </header>
diff --git a/platform/darwin/docs/theme/templates/nav.mustache b/platform/darwin/docs/theme/templates/nav.mustache
index f7de866712..94babd5f03 100644
--- a/platform/darwin/docs/theme/templates/nav.mustache
+++ b/platform/darwin/docs/theme/templates/nav.mustache
@@ -2,11 +2,11 @@
   <ul class="nav-groups">
     {{#structure}}
     <li class="nav-group-name">
-      <a class="nav-group-name-link" href="{{path_to_root}}{{section}}.html">{{section}}</a>
+      <a class="small-heading" href="{{path_to_root}}{{section}}.html">{{section}}<span class="anchor-icon" /></a>
       <ul class="nav-group-tasks">
         {{#children}}
         <li class="nav-group-task">
-          <a class="nav-group-task-link" href="{{path_to_root}}{{url}}">{{name}}</a>
+          <a title="{{name}}" class="nav-group-task-link" href="{{path_to_root}}{{url}}">{{name}}</a>
         </li>
         {{/children}}
       </ul>
diff --git a/platform/darwin/docs/theme/templates/parameter.mustache b/platform/darwin/docs/theme/templates/parameter.mustache
index 6fa329d72e..c76d18c61e 100644
--- a/platform/darwin/docs/theme/templates/parameter.mustache
+++ b/platform/darwin/docs/theme/templates/parameter.mustache
@@ -1,7 +1,7 @@
 <tr>
   <td>
     <code>
-    <em>{{name}}</em>
+      {{name}}
     </code>
   </td>
   <td>
diff --git a/platform/darwin/docs/theme/templates/task.mustache b/platform/darwin/docs/theme/templates/task.mustache
index dd30c670eb..4648327dc8 100644
--- a/platform/darwin/docs/theme/templates/task.mustache
+++ b/platform/darwin/docs/theme/templates/task.mustache
@@ -4,7 +4,7 @@
     <a name="/{{uid}}"></a>
     <a name="//apple_ref/{{language_stub}}/Section/{{name}}" class="dashAnchor"></a>
     <a href="#/{{uid}}">
-      <h3 class="section-name">{{name}}</h3>
+      <h3 id="{{uid}}" class="section-name">{{name}}<span class="anchor-icon" /></h3>
     </a>
   </div>
   {{/name}}
@@ -15,7 +15,7 @@
         <code>
         <a name="/{{usr}}"></a>
         <a name="//apple_ref/{{language_stub}}/{{dash_type}}/{{name}}" class="dashAnchor"></a>
-        <a class="token" href="#/{{usr}}">{{name}}</a>
+        <a class="token" href="#/{{usr}}"><span class="token-name">{{name}}</span><span class="token-icon" /></a>
         </code>
         {{#default_impl_abstract}}
           <span class="declaration-note">
@@ -29,9 +29,7 @@
         {{/from_protocol_extension}}
       </div>
       <div class="height-container">
-        <div class="pointer-container"></div>
         <section class="section">
-          <div class="pointer"></div>
           {{#abstract}}
           <div class="abstract">
             {{{abstract}}}
@@ -49,13 +47,13 @@
           {{#declaration}}
           <div class="declaration">
             <h4>Declaration</h4>
-            <div class="language">
-              <p class="aside-title">{{language}}</p>
+            <div class="language keyline-blue">
+              <p  style="background: rgba(65, 131, 196, 0.15);" class="aside-title text-blue">{{language}}</p>
               {{{declaration}}}
             </div>
             {{#other_language_declaration}}
-            <div class="language">
-              <p class="aside-title">Swift</p>
+            <div class="language keyline-purple">
+              <p style="background: rgba(149, 149, 209, 0.21);" class="aside-title text-purple">Swift</p>
               {{{other_language_declaration}}}
             </div>
             {{/other_language_declaration}}
@@ -80,10 +78,10 @@
           </div>
           {{/return}}
           {{#github_token_url}}
-          <div class="slightly-smaller show-on-github">
+          <div class="show-on-github">
             <a href="{{{github_token_url}}}">
-              show on github
-              <img class="show-on-github-icon" src="{{{path_to_root}}}img/github.svg"/>
+              <img style="margin-bottom: 1px;" class="show-on-github-icon" src="{{{path_to_root}}}img/github.svg"/>
+              View Source on GitHub
             </a>
           </div>
           {{/github_token_url}}
diff --git a/platform/ios/originals/screenshot.sketch b/platform/ios/originals/screenshot.sketch
new file mode 100644
index 0000000000..6b938457f1
--- /dev/null
+++ b/platform/ios/originals/screenshot.sketch
diff --git a/platform/ios/originals/screenshots.sketch b/platform/ios/originals/screenshots.sketch
deleted file mode 100644
index 9098b3db60..0000000000
--- a/platform/ios/originals/screenshots.sketch
+++ /dev/null
diff --git a/platform/ios/screenshot.png b/platform/ios/screenshot.png
index 6f5f7bb7d8..62c04746d4 100644
--- a/platform/ios/screenshot.png
+++ b/platform/ios/screenshot.png
diff --git a/platform/ios/scripts/document.sh b/platform/ios/scripts/document.sh
index 2fb57a2688..fddf5abb0f 100755
--- a/platform/ios/scripts/document.sh
+++ b/platform/ios/scripts/document.sh
@@ -47,4 +47,4 @@ jazzy \
     --output ${OUTPUT}
 # https://github.com/realm/jazzy/issues/411
 find ${OUTPUT} -name *.html -exec \
-    perl -pi -e 's/Mapbox\s+(Docs|Reference)/Mapbox iOS SDK $1/' {} \;
+    perl -pi -e 's/BRANDLESS_DOCSET_TITLE/iOS SDK $1/, s/Mapbox\s+(Docs|Reference)/Mapbox iOS SDK $1/' {} \;
diff --git a/platform/macos/scripts/document.sh b/platform/macos/scripts/document.sh
index fc026d08f5..d03ad91674 100755
--- a/platform/macos/scripts/document.sh
+++ b/platform/macos/scripts/document.sh
@@ -43,4 +43,4 @@ jazzy \
     --output ${OUTPUT}
 # https://github.com/realm/jazzy/issues/411
 find ${OUTPUT} -name *.html -exec \
-    perl -pi -e 's/Mapbox\s+(Docs|Reference)/Mapbox macOS SDK $1/' {} \;
+    perl -pi -e 's/BRANDLESS_DOCSET_TITLE/macOS SDK $1/, s/Mapbox\s+(Docs|Reference)/Mapbox macOS SDK $1/' {} \;