JSDoc template updates for branding

tools/jsdoc/config.json

@@ -1,5 +1,6 @@
 {
     "opts": {
+        "readme": "api-mainpage.md",
         "template": "hifi-jsdoc-template"
     },
     "docdash": {

tools/jsdoc/hifi-jsdoc-template/publish.js

@@ -420,7 +420,7 @@ function linktoExternal(longName, name) {
  */
 
 function buildNav(members) {
-    var nav = '<h3><a href="index.html">Home</a></h3>';
+    var nav = '<h3><a href="index.html">API Reference Home</a></h3>';
     var seen = {};
     var seenTutorials = {};
     var docdash = env && env.conf && env.conf.docdash || {};

tools/jsdoc/hifi-jsdoc-template/static/styles/jsdoc.css

@@ -4,8 +4,13 @@
 ********************************************************************/
 
 @font-face{
-	font-family: 'Cairo';
-	src: url('../fonts/Cairo-Bold.ttf') format('truetype');
+	font-family: 'Graphik Semibold';
+	src: url('../fonts/Graphik-SemiBold.otf') format('opentype');
+}
+
+@font-face{
+	font-family: 'Graphik Regular';
+	src: url('../fonts/Graphik-Regular.otf') format('opentype');
 }
 
 @font-face{
@@ -29,12 +34,16 @@ html
 
 body
 {
-    font-family: 'Proxima Nova', sans-serif;
-    font-size: 1rem;
-    line-height: 1.5;
-    letter-spacing: 0.5px;
-    margin: 1.5rem;
-    color: #555;
+	font-family: 'Graphik Regular', 'Proxima Nova', arial, sans-serif;
+	font-weight: 400; 
+    color: #000000;
+    letter-spacing: 0.5px;  
+}
+
+#main p {
+    font-size: 0.95rem;
+    line-height: 24px;
+    margin-bottom: 24px;
 }
 
 section
@@ -50,14 +59,13 @@ section
 ********************************************************************/
 
 h1, h2, h3, h4 {
-	font-family: "Cairo", Helvetica, sans-serif;
+	font-family: "Graphik Semibold", Helvetica, sans-serif;
 }
 
 h1
 {
     font-size: 3.25rem;
     text-align: center;
-    letter-spacing: 1.5px;
     margin: 50px 25px 25px;
 }
 
@@ -69,15 +77,13 @@ h2
 
 h3
 {
-    font-size: 1.5rem;
+    font-size: 28px;
 }
 
 h4
 {
-    font-size: 18px;
-    letter-spacing: -0.33px;
-    margin-bottom: 12px;
-    color: #4d4e53;
+    font-family: 'Graphik Regular';
+	font-size: 1.03rem;
 }
 
 h6
@@ -119,7 +125,7 @@ table
     background-color: #fff;
     border-collapse: collapse;
     border-spacing: 0;
-    border: 1px solid #ccc;
+	border: solid #d8e1d9 1px;
     text-align: left;
     overflow: auto;
     font-size: 0.9rem;
@@ -128,18 +134,19 @@ table
 }
 
 table > thead {
-    background-color: #ddd;
-    border-bottom: 1px solid #ccc;
+    border-color: #d8e1d9;
+    background: #d8e1d9;
     font-weight: 400;
 }
 
 table th, table td {
     padding: 0.5rem;
-    border-left: 1px solid #ccc;
+    border-left: 1px solid #d8e1d9;
+    font-size: .95em;
 }
 
 table tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #d8e1d9;
 }
 
 table tr:nth-child(even) {
@@ -150,18 +157,14 @@ table tr:nth-child(even) {
 ****************************** Link styles *************************
 ********************************************************************/
 
-a, a:visited, a:active {
-  color: #1694CA;
-  text-decoration: none;
+a, a:hover, a:active, a:visited {
+    text-decoration: none;
 }
 
-article a:hover {
-  color: #0e6185;
-  text-decoration: none;
-  font-weight: bold;
+#main a, #main a:visited, #main a:active, #main a:hover {
+  color: #009ee0;
 }
 
-
 /*******************************************************************
 ***************************** List styles **************************
 ********************************************************************/
@@ -171,20 +174,29 @@ article ul {
 }
 
 article li {
+    font-size: .95rem;
     padding-bottom: 5px;
 }
 
+.readme ul {
+    font-size: 0.95rem;
+    line-height: 24px;
+    margin-bottom: 24px;
+
+}
+
 /*******************************************************************
 ********************** Navigation sidebar styles *******************
 ********************************************************************/
 
 nav {
     position: fixed;
-    top: 165px;
+    top: 260px;
     bottom: 0;
     left: 0;
     right: 0;
-    width: 305px;
+    width: 300px;
+    background-color: #000000;
     border-right: 1px solid #ccc;
     overflow-y: scroll;
     padding-left: 20px;
@@ -192,6 +204,11 @@ nav {
     box-sizing: border-box;
 }
 
+nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
 nav #nav-search {
     width: 210px;
     height: 30px;
@@ -207,21 +224,28 @@ nav #nav-search {
     position: fixed;
     top: 0;
     left: 0;
-    height: 165px;
-    width: 305px;
-    background-color: #00B4EF;
-    vertical-align: middle;
+    height: 260px;
+    width: 300px;
+    background-color: #000000;
+    color: #FFFFFF;
     text-align: center;
     margin-top: 0px;    
 }
 
 .nav-header p {
-    padding-top: 15px;
+    padding-top: 8px;    
+}
+
+.nav-header a {
+    color: #FFFFFF;
+    font-size: .9rem;
+    line-height: 1.5;
 }
 
 nav h3 {
-    font-family: "Proxima Nova", sans-serif;
+    font-family: "Graphik Regular", sans-serif;
     font-size: 0.9rem;
+    color: #FFFFFF;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -233,8 +257,16 @@ nav ul {
     list-style: none;
 }
 
+nav h3 a {
+    color: #FFFFFF;
+}
+
 nav ul a, nav ul a:visited, nav ul a:active {
-    color: #a1a1a1;
+    color: #FFFFFF;
+}
+
+nav ul a:hover {
+    font-weight: bold;
 }
 
 nav ul ul {
@@ -250,7 +282,7 @@ nav ul ul li:first-child
 
 nav li 
 {
-    margin-top: 3px;
+    margin-top: 14px;
 }
  
 
@@ -333,14 +365,14 @@ nav > h2 > a {
 
 .search-input
 {
-    font-family: 'Proxima Nova', sans-serif;
-    font-size:  0.9rem;    
+    font-family: 'Graphik Regular', sans-serif;
+    font-size: 80%;    
     border: 1px solid #ddd;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
-    border-radius: 0.1875rem;    
+    border-radius: 0;    
     color: #3A3F3E;
-    width: 75%;
-    padding: 0.425rem;
+    width: 70%;
+    padding: 10px;
 }
 
 /********************************************************************
@@ -349,23 +381,20 @@ nav > h2 > a {
 
 tt, code, kbd, samp {
     font-family: Consolas, Monaco, 'Andale Mono', monospace;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
 }
 
 .name, .signature {
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 
 
 
-
-
-
-
-
 img {
+  display: block;
   max-width: 100%;
+  margin: auto;
 }
 
 p, ul, ol, blockquote {
@@ -427,7 +456,7 @@ header {
    color: #999 !important;
 }
 
-.availableIn 
+#main p.availableIn 
 {
     font-size: 0.8rem;
 }
@@ -517,7 +546,7 @@ header {
 
 .prettyprint code
 {
-    font-size: 0.65rem;
+    font-size: 0.7rem;
     line-height: 18px;
     display: block;
     padding: 4px 12px;
@@ -580,13 +609,8 @@ header {
    padding-top: 0;
 }
 
-.params td.description > p:last-child, .props td.description > p:last-child {
-   margin-bottom: 0;
-   padding-bottom: 0;
-}
-
 span.param-type, .params td .param-type, .param-type dd {
-   color: #606;
+  color: #606;
   font-family: Consolas, Monaco, 'Andale Mono', monospace
 }