Docs unified WIP -- do NOT merge

doc/user/assets/sass/_base.scss

@@ -11,10 +11,10 @@ $rem-scale: 0.585;
 :root {
     --nav-height: #{rem(6.5)}; // Changes to height requires changes to partials/toc.html since custom scroll logic implementation
 
-    --h1: #{rem(4.2)};
-    --h2: #{rem(2.6)};
-    --h3: #{rem(2.2)};
-    --h4: #{rem(1.8)};
+    --h1: #{rem(4.0)};
+    --h2: #{rem(2.8)};
+    --h3: #{rem(2.1)};
+    --h4: #{rem(1.7)};
     --h5: #{rem(1.6)};
     --base: #{rem(1.6)};
     --sm: #{rem(1.4)};
@@ -116,6 +116,10 @@ body.dark {
     --public-preview-border: #374e7c;
     --public-preview-after: #c0d3d8;
     --public-preview-gutter: #306dca;
+
+    --tab-bg: var(--gray-lightest);
+    --tab-selected-bg: var(--tip-after);
+    --font-h4: var(--gray-lightest);
 }
 
 body.light {
@@ -165,6 +169,10 @@ body.light {
     --public-preview-after: #c0d3d8;
     --public-preview-gutter: #186477;
     --public-preview-text: var(--black);
+
+    --tab-bg: var(--gray-lighter);
+    --tab-selected-bg: var(--tip);
+    --font-h4: var(--gray-dark);
 }
 
 *,

doc/user/assets/sass/_content.scss

@@ -8,8 +8,6 @@ h3,
 h4,
 h5,
 h6 {
-    color: var(--important);
-    font-weight: 500;
     line-height: 1.2;
 
     code {
@@ -24,6 +22,11 @@ h6 {
     }
 }
 
+h1, h2, h3 {
+    font-weight: 500;
+    color: var(--important);
+}
+
 h1 {
     font-size: var(--h1);
     margin-bottom: var(--xx-small);
@@ -36,18 +39,28 @@ h2 {
 
 h3 {
     font-size: var(--h3);
+    font-weight: 600;
     margin: var(--small) 0 var(--nano);
 }
 
-.tab-pane h3 {
-    margin: 0;
+div.tab-pane > h3 {
+    margin: var(--nano) 0;
+}
+
+h4, h5, h6 {
+    font-weight: 600;
+    color: var(--font-h4);
 }
 
 h4 {
     font-size: var(--h4);
     margin: var(--small) 0 var(--nano);
 }
 
+div.tab-pane > h4 {
+    margin: var(--nano) 0;
+}
+
 h5 {
     font-size: var(--h5);
     margin: var(--small) 0 var(--nano);
@@ -251,8 +264,8 @@ p+p {
 
         &::before {
             content: "";
-            width: 48px;
-            height: 48px;
+            width: 32px;
+            height: 32px;
             position: absolute;
             top: rem(2);
             background-size: contain;
@@ -261,10 +274,16 @@ p+p {
         &.book,
         &.bulb,
         &.doc,
+        &.materialize,
         &.touch {
             padding-top: rem(8);
         }
 
+        &.materialize::before {
+            background-image: url("../images/materialize_favicon_32.png");
+            margin-left: -10px;
+        }
+
         &.book::before {
             background-image: url("../images/icon_book.png");
         }
@@ -283,6 +302,7 @@ p+p {
 
         .title {
             text-transform: uppercase;
+            font-size: 12px;
             font-weight: 500;
             color: var(--important);
             margin-bottom: var(--nano);
@@ -546,8 +566,7 @@ p+p {
     }
 
     .annotation {
-        border: 4px solid var(--annotation-border);
-        background: var(--annotation-bg);
+        border: 1px solid var(--annotation-border);
 
         a {
             &:hover,
@@ -752,7 +771,7 @@ p+p {
     .nav-tabs {
         list-style: none;
         padding: 0;
-        border-bottom: 1px solid #9c86e0;
+
         display: flex;
         overflow-x: auto;
         // white-space: nowrap;
@@ -763,7 +782,12 @@ p+p {
             padding: 0;
             position: relative;
             bottom: -1px;
-            background: var(--gray-lightest);
+            background: var(--bg);
+            border-top: 1px solid var(--highlight);
+            border-left: 1px solid var(--highlight);
+            border-right: 1px solid var(--highlight);
+            border-radius: 2px 2px 2px 2px;
+            background: var(--tab-bg);
 
             a {
                 color: var(--body);
@@ -788,13 +812,14 @@ p+p {
             }
 
             &.active {
-                background: var(--bg);
+
                 border-radius: 2px 2px 0 0;
                 border: 1px solid #9c86e0;
                 border-bottom-color: var(--bg);
 
                 a {
                     color: var(--highlight);
+                    background: var(--tab-selected-bg);
                 }
             }
         }
@@ -807,6 +832,9 @@ p+p {
 
         &.active {
             display: block;
+            border-radius: 0 0 rem(1) rem(1);
+            border: 1px solid #9c86e0;
+            padding: rem(0.8) rem(0.5) rem(0.6) rem(0.6);
         }
     }
 
@@ -1233,8 +1261,3 @@ sup {
         color: var(--link);
     }
 }
-
-// Remove the bottom border from the last row of a nested table
-table table tr:last-child {
-    border-bottom: none;
-}

doc/user/assets/sass/_layout.scss

@@ -199,14 +199,15 @@ table.inline-headings {
         display: block;
         cursor: pointer;
         position: relative;
-        padding: 3px 0 3px 15px;
+        padding: 3px 30px 3px 15px;
         margin-left: 5px;
         text-decoration: none;
         word-wrap: break-word;
         white-space: initial;
 
         &.active {
             font-weight: 500;
+            background: var(--tip);
         }
 
         &:hover,
@@ -225,10 +226,11 @@ table.inline-headings {
 
         svg {
             position: absolute;
-            left: -6px;
+            right: 6px;
             top: 50%;
-            margin-top: -18px;
+            transform: translateY(-50%);
             color: var(--divider-light);
+            transition: transform 0.2s ease-out;
 
             .darker {
                 color: var(--sub);
@@ -240,6 +242,10 @@ table.inline-headings {
         }
     }
 
+    li.open > a svg {
+        transform: translateY(-50%) rotate(90deg);
+    }
+
     code {
         font-family: "Fira Code", Courier, monospace;
     }
@@ -248,8 +254,7 @@ table.inline-headings {
     .level-4 a {
 
 
-        &:hover,
-        &.active {
+        &:hover {
             border-left: 2px solid  var(--highlight);
         }
     }
@@ -508,27 +513,6 @@ body.dark {
             fill: var(--gray-dark);
         }
     }
-
-    li.level-2 {
-        li.level-3 {
-            ul {
-
-                &:before,
-                &:after {
-                    content: "";
-                    background-image: url("../images/level_three_transition_dark.svg");
-                }
-            }
-        }
-        ul {
-
-            &:before,
-            &:after {
-                content: "";
-                background-image: url("../images/level_three_transition_dark.svg");
-            }
-        }
-    }
 }
 
 .banner {

doc/user/config.toml

@@ -20,7 +20,7 @@ publishDate = ["publishDate"]
 [[menu.main]]
 identifier = "get-started"
 name = "Get started"
-weight = 5
+weight = 1
 
 #
 # Connect sources
@@ -67,7 +67,7 @@ weight = 12
 [[menu.main]]
 identifier = "reference"
 name = "Reference"
-weight = 15
+weight = 60
 
 [[menu.main]]
 name = "SQL commands"
@@ -80,16 +80,11 @@ weight = 100
 # Releases
 #
 
-[[menu.main]]
-identifier = "releases-previews"
-name = "Releases"
-weight = 65
-
 [[menu.main]]
 identifier = "changelogs"
 name = "Changelog ↗️"
-parent = "releases-previews"
-weight = 20
+parent = "releases"
+weight = 40
 url = "https://materialize.com/changelog/"
 
 #
@@ -99,10 +94,10 @@ url = "https://materialize.com/changelog/"
 [[menu.main]]
 identifier = "about"
 name = "About"
-weight = 70
+weight = 90
 
 [[menu.main]]
-name = "Security overview"
+name = "Materialize Cloud Security and Compliance"
 parent = "about"
 url = "https://materialize.com/security-overview"
 weight = 25
@@ -117,6 +112,16 @@ weight = 30
 # allow <a name="link-target">, the old syntax no longer works
 unsafe = true
 
+[markup]
+  [markup.highligh]
+    noClasses = false
+    style = "monokai"
+
+# Need to co-ordinate with toc.html
+  [markup.tableOfContents]
+    startLevel = 2
+    endLevel = 4
+
 [[deployment.targets]]
 name = "production"
 url = "s3://materialize-website?region=us-east-1"

doc/user/content/administration/billing.md

@@ -93,15 +93,15 @@ Accessing usage and billing information in Materialize
 requires **administrator** privileges.
 {{</ note >}}
 
-From the [Materialize console](https://console.materialize.com/) (`Admin` >
+From the [Materialize console](/console/) (`Admin` >
 `Usage & Billing`), administrators can access their invoice. The invoice
 provides Compute and Storage usage and cost information.
 
 ## On Demand
 
 Materialize Cloud administrators can sign up for an [On Demand
 plan](https://materialize.com/pdfs/on-demand-terms.pdf) from the billing section
-of the [Materialize console](https://console.materialize.com/). Pricing is
+of the [Materialize console](/console/). Pricing is
 usage-based and is billed on a monthly basis. Invoices will be sent to the
 account email and paid via the card on file on the first of the month. If you
 have questions about billing or are interested in converting to an annual

doc/user/content/console/_index.md

@@ -5,11 +5,12 @@ disable_list: true
 disable_toc: true
 menus:
   main:
-    weight: 5
+    parent: "get-started"
+    weight: 25
     identifier: 'console'
 ---
 
-The [Materialize Console](https://console.materialize.com/) is a graphical user
+The [Materialize Console](/console/) is a graphical user
 interface for working with Materialize. From the Console, you can create and
 manage your clusters and sources, issue SQL queries, explore your objects, and
 view billing information.

doc/user/content/console/admin.md

@@ -9,7 +9,7 @@ menu:
     identifier: console-admin
 ---
 
-The [Materialize Console](https://console.materialize.com/) provides an
+The [Materialize Console](/console/) provides an
 **Admin** section where you can manage client credentials and, for
 administrators, review your usage and billing information.
 

doc/user/content/console/clusters.md

@@ -9,7 +9,7 @@ menu:
     identifier: console-clusters
 ---
 
-The [Materialize Console](https://console.materialize.com/) provides a
+The [Materialize Console](/console/) provides a
 **Clusters** section where you can manage your clusters.
 
 ![Image of Clusters page](/images/console/console-clusters.png "Clusters page