implement new UI / design

- add new design
- update preview site
- add Gotham fonts
- remove old fonts
- update icons
- add fragment jumper script
- configure build to not remove viewBox on SVG
- configure build to copy images for preview site

Author: mojavelinux

preview-site-src/index.adoc

@@ -30,7 +30,7 @@ This section provides information on the server resources across the cluster.
 
 The summary section is designed to provide a quick overview of the cluster activity.
 
-image::web-console-server-stats-summary.png[]
+image::stats-summary.png[]
 
 The following statistics are available:
 
@@ -58,6 +58,20 @@ With the stream-based views, data returned when `stale` is set to `ok` is closer
 
 The *Server Resources* statistics section displays the resource information on this server including swap usage, free RAM, CPU utilization percentage,and FTS RAM used.
 
+[source,java]
+----
+// Query (fluent API)
+Observable<AsyncN1qlQueryResult> theAirline = bucket
+    .async()
+    .query(N1qlQuery.simple(
+        select("name")
+            .from("travel-sample")
+            .as("Airline")
+            .where(x("id")
+            .eq(5209))));
+return thisAirline;
+----
+
 [#vbucket_stats]
 == Monitoring vBucket Resources
 
@@ -175,6 +189,7 @@ POST http://nodename:8091/settings/viewUpdateDaemon
 updateInterval=10000&updateMinChanges=7000
 ----
 
+[source,json]
 ----
 {
    "_id": "_design/myddoc",
@@ -193,8 +208,9 @@ updateInterval=10000&updateMinChanges=7000
 You can set this information when creating and updating design documents through the design document REST API.
 To perform this operation using the `curl` tool:
 
+[source,console]
 ----
-> curl -X POST -v -d 'updateInterval=7000&updateMinChanges=7000' \
+$ curl -X POST -v -d 'updateInterval=7000&updateMinChanges=7000' \
     'http://Administrator:[email protected]:8091/settings/viewUpdateDaemon'
 ----
 

preview-site-src/stats-summary.png

@@ -97,24 +97,28 @@ page:
       urlType: fragment
   - content: Managing Clusters
     items:
-    - content: Monitor Using the REST API
-      url: '#'
-      urlType: fragment
-    - content: Monitor Using the cbstats Utility
-      url: '#'
-      urlType: fragment
-    - content: *page_title
-      url: *page_url
-      urlType: internal
-    - content: Monitoring XDCR Timestamp-based Conflict Resolution
-      url: '#'
-      urlType: fragment
-    - content: Monitoring Management
-      url: '#'
-      urlType: fragment
-    - content: Monitoring N1QL Queries
+    - content: Monitoring
       url: '#'
       urlType: fragment
+      items:
+      - content: Monitor Using the REST API
+        url: '#'
+        urlType: fragment
+      - content: Monitor Using the cbstats Utility
+        url: '#'
+        urlType: fragment
+      - content: *page_title
+        url: *page_url
+        urlType: internal
+      - content: Monitoring XDCR Timestamp-based Conflict Resolution
+        url: '#'
+        urlType: fragment
+      - content: Monitoring Management
+        url: '#'
+        urlType: fragment
+      - content: Monitoring N1QL Queries
+        url: '#'
+        urlType: fragment
     - content: Troubleshooting
       url: '#'
       urlType: fragment

preview-site-src/ui-model.yml

@@ -1,13 +1,5 @@
 .doc {
   padding-bottom: 4rem;
-  color: var(--color-text);
-  font-size: 1.0625rem;
-}
-
-@media screen and (max-width: 1024px) {
-  .doc {
-    margin: 0 auto;
-  }
 }
 
 .doc h1,
@@ -16,7 +8,7 @@
 .doc h4,
 .doc h5,
 .doc h6 {
-  font-weight: 400;
+  font-weight: var(--weight-normal);
   line-height: 1.5;
   margin: 1.0625rem 0 calc(0.625rem - 1rem) 0;
 }
@@ -47,7 +39,6 @@
 
 .doc h4 {
   font-size: 1.25rem;
-  font-weight: var(--weight-bold);
 }
 
 .doc h1 > a.anchor,
@@ -62,7 +53,7 @@
   width: 1.5ex;
   margin-left: -1.25ex;
   visibility: hidden;
-  font-weight: 400;
+  font-weight: var(--weight-normal);
 }
 
 .doc h1 > a.anchor::before,
@@ -83,16 +74,6 @@
   visibility: visible;
 }
 
-.doc a {
-  text-decoration: underline;
-}
-
-.doc a:focus,
-.doc a:hover {
-  color: var(--color-link-focus);
-  text-decoration: none;
-}
-
 .doc i.fa {
   font-style: normal;
 }
@@ -101,6 +82,11 @@
   text-decoration: underline;
 }
 
+.doc strong,
+.doc b {
+  font-weight: var(--weight-medium);
+}
+
 .doc code {
   font-size: 0.875em;
   color: #555;
@@ -163,6 +149,7 @@
 
 .doc table.tableblock th {
   border-bottom: 2.5px solid #ddd;
+  font-weight: var(--weight-medium);
 }
 
 .doc table.tableblock td {
@@ -312,17 +299,21 @@ p.tableblock + p.tableblock {
 }
 
 .quoteblock.abstract blockquote {
-  display: table;
-  color: #555;
-  font-size: 0.95rem;
+  /* color: var(--color-muted); */
+  font-size: 0.9375rem;
   margin: 1rem 0 1.5625rem 0;
-  text-align: justify;
+  font-weight: var(--weight-light);
+}
+
+.quoteblock.abstract blockquote * {
+  font-weight: inherit;
 }
 
 .quoteblock.abstract blockquote::before {
   content: "Abstract: ";
-  color: #707070;
-  font-weight: var(--weight-bold);
+  /* color: #757575; */
+  color: var(--color-muted);
+  font-weight: var(--weight-medium);
 }
 
 .doc ul {
@@ -422,19 +413,16 @@ p.tableblock + p.tableblock {
   margin-top: 0;
 }
 
-/* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
-.doc .tableblock pre,
-.doc .listingblock.wrap pre {
-  white-space: pre-wrap;
-}
-
 .doc pre:not(.highlight),
 .doc pre.highlight code {
-  background-color: #f5f2f0;
-  outline: 1px solid #ccc;
+  /* background-color: #333; */
+  background-color: #28282f;
+  color: #f8f8f2;
   display: block;
   white-space: pre-wrap;
-  padding: 0.625rem 0.5rem;
+  /* NOTE without word-break=break-word, listingblock causes article to overflow bounds */
+  word-break: break-word;
+  padding: 0.625rem;
 }
 
 /* NOTE assume pre.highlight contains code[data-lang] */
@@ -444,10 +432,10 @@ p.tableblock + p.tableblock {
 
 .doc .listingblock code[data-lang]::before {
   content: attr(data-lang);
-  color: #909090;
+  color: #f8f8f2;
   display: none;
   font-size: 0.75em;
-  font-weight: 400;
+  font-weight: var(--weight-light);
   letter-spacing: 1px;
   line-height: 1;
   text-transform: uppercase;
@@ -461,7 +449,7 @@ p.tableblock + p.tableblock {
 }
 
 .doc .dlist dt {
-  font-weight: 700;
+  font-weight: var(--weight-medium);
   margin-top: 1.5rem;
 }
 
@@ -559,5 +547,5 @@ p.tableblock + p.tableblock {
 
 .doc .menuseq i.caret::before {
   content: ">";
-  font-weight: var(--weight-bold);
+  font-weight: var(--weight-medium);
 }

src/css/doc.css renamed to src/css/article.css

@@ -1,12 +1,20 @@
 :root {
-  --color-text: #252525;
-  --color-link: #ec1e2c;
-  --color-link-focus: #cc2a2e;
+  --color-brand: #ea2328;
+  --color-muted: #666;
+  --color-text: #333;
+  --color-link: #00ace0;
   --color-code: #555;
   --color-border: #eaeaea;
   --color-navbar-bg: #000;
   --color-navbar-text: #fff;
-  --color-navbar-text-focus: #fff;
+  --color-footer-bg: #000;
+  --color-footer-text: #fff;
+  /* --height-navbar: 4rem; */
+  --height-navbar: 4.875rem;
+  --height-navbar-with-gap: calc(1.5rem + var(--height-navbar));
+  --weight-light: 300;
+  --weight-normal: 400;
+  --weight-medium: 500;
   --weight-bold: 700;
 }
 
@@ -23,11 +31,16 @@ body {
 
 html {
   box-sizing: border-box;
-  font-family: "Kievit OT", sans-serif;
-  font-size: 1em;
   text-size-adjust: 100%;
 }
 
+html,
+button,
+input,
+select {
+  font-family: "Gotham", sans-serif;
+}
+
 body {
   color: var(--color-text);
   line-height: 1.5;
@@ -39,22 +52,10 @@ strong {
   font-weight: var(--weight-bold);
 }
 
-button,
-input,
-select {
-  font-family: "Kievit OT", sans-serif;
-}
-
 .container {
   margin: 0 auto;
-  max-width: 68rem;
-  padding: 0 0.9rem;
-}
-
-@media screen and (min-width: 769px) {
-  .container {
-    padding: 0;
-  }
+  max-width: 80rem;
+  padding: 0 1.25rem;
 }
 
 a {
@@ -74,3 +75,7 @@ pre {
   font-family: "Roboto Mono", monospace;
   color: var(--color-code);
 }
+
+img {
+  border: 0;
+}

src/css/base.css

@@ -0,0 +1,36 @@
+div.body {
+  display: flex;
+  margin-top: var(--height-navbar-with-gap);
+}
+
+main.article {
+  flex: 1;
+}
+
+nav.nav {
+  display: none;
+  flex: 0 0 16rem;
+  width: 16rem; /* width has to be set for fixed position child */
+  order: -1;
+}
+
+@media screen and (min-width: 769px) {
+  nav.nav {
+    display: block;
+  }
+}
+
+aside.toc.sidebar {
+  display: none;
+  flex: 0 0 12rem;
+}
+
+@media screen and (min-width: 1200px) {
+  aside.toc.embedded {
+    display: none;
+  }
+
+  aside.toc.sidebar {
+    display: block;
+  }
+}