From e9af1df532d0f2af6610ce599421ff3e5e750cef Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Tue, 20 Jun 2023 18:06:00 +0100
Subject: [PATCH 1/6] css-tidyup

---
 src/css/base.css               |   1 +
 src/css/body.css               |   6 +-
 src/css/component-frame.css    |  12 ----
 src/css/contributor.css        |   1 -
 src/css/doc.css                | 107 +--------------------------------
 src/css/external-link-icon.css |   2 +-
 src/css/feedback.css           |   2 +
 src/css/footer.css             |   3 -
 src/css/header.css             |  25 --------
 src/css/highlight.css          |   3 +-
 src/css/home.css               |  12 +---
 src/css/info-banner.css        |   5 +-
 src/css/labels.css             |  38 ------------
 src/css/landing-page.css       |   8 ---
 src/css/main.css               |  13 +---
 src/css/nav.css                |   2 -
 src/css/pagination.css         |   4 +-
 src/css/site.css               |   1 -
 src/css/table.css              |  29 ---------
 src/css/toc.css                |   4 --
 src/css/toolbar.css            |   8 +--
 src/css/vars.css               |  51 +++++++++-------
 src/css/vendor/docsearch.css   |  12 ----
 23 files changed, 50 insertions(+), 299 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index 744c3605..6dc246f3 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -217,6 +217,7 @@ label::after {
   outline-width: 0;
 }
 
+
 /* Common margin padding css class */
 /* margin-top */
 .mt-0 {
diff --git a/src/css/body.css b/src/css/body.css
index 49241fed..54311846 100644
--- a/src/css/body.css
+++ b/src/css/body.css
@@ -1,8 +1,10 @@
-/* NOTE min-width of flex: 1 container = content-width to prevent wrapping by default; min-width: 0 lets content wrap */
+/* NOTE
+  min-width of flex: 1 container = content-width to prevent wrapping by default; 
+  min-width: 0 lets content wrap */
+  
 div.body {
   display: flex;
   margin-top: var(--height-to-body);
-  /* overflow-wrap: break-word; */
   word-wrap: break-word;
   /* IE only supports word-wrap, which is an alias of overflow-wrap */
 }
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index bd90c8b4..30945368 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -1,9 +1,7 @@
 .component-frame {
-  /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
   padding: 0 15px 0 15px;
   display: flex;
-  /* align-items: center; */
   justify-content: center;
   position: relative;
 }
@@ -20,7 +18,6 @@
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
-  /* position: relative; */
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 0;
@@ -48,9 +45,6 @@
 .component-frame .frame-link-dropdowns {
   display: inline-block;
   line-height: 1;
-  /* position: relative;
-  padding-bottom: 20px;
-  margin-bottom: -20px; */
 }
 
 .frame-body .frame-link {
@@ -99,7 +93,6 @@
 .frame-dropdown ul {
   background: var(--color-brand-white);
   border-radius: 0;
-  /* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */
   margin: 0;
 }
 
@@ -127,11 +120,6 @@
   border-left: 3px solid var(--color-brand-gray8);
 }
 
-/* .frame-dropdown ul.frame-dropdown-list li,
-.frame-dropdown ul.related li {
-  border-bottom: 1px solid var(--color-brand-gray8);
-} */
-
 ul.frame-dropdown-list li:last-child,
 .frame-dropdown ul.related li:last-child {
   border-bottom: 0;
diff --git a/src/css/contributor.css b/src/css/contributor.css
index 7c3c4cb1..b4b86137 100644
--- a/src/css/contributor.css
+++ b/src/css/contributor.css
@@ -1,5 +1,4 @@
 .contributor-list-box {
-  /* display: flex; */
   align-items: center;
   flex-wrap: wrap;
   margin: 15px 0 0;
diff --git a/src/css/doc.css b/src/css/doc.css
index 308d3b29..f551286f 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -49,21 +49,11 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  /* max-width: fit-content; */
   width: 100%;
   margin-top: var(--base-extra-large-space);
   /* NOTE used to restrict width of key line */
 }
 
-/* .doc h2::after {
-  content: "";
-  display: block;
-  max-width: 5.75rem;
-  height: 0;
-  outline: 0.5px solid currentColor;
-  margin-top: 1.0625rem;
-} */
-
 .doc h3 {
   font-size: var(--heading-h3);
   margin-top: var(--base-extra-large-space);
@@ -122,11 +112,6 @@
   text-decoration: underline;
 }
 
-/* .doc code {
-  color: var(--color-text);
-  font-weight: var(--weight-medium);
-} */
-
 .doc pre code {
   display: block;
   color: inherit;
@@ -185,7 +170,6 @@ occur inside lists.
 .doc caption {
   font-size: var(--font-base);
   font-weight: var(--weight-semibold);
-  /* letter-spacing: -0.025em; */
   line-height: 1.2;
   margin-bottom: var(--base-space);
   color: var(--color-brand-gray3);
@@ -222,18 +206,6 @@ ul ul ul {
   margin-bottom: var(--base-extra-small-space);
 }
 
-/* .doc table.tableblock,
-.doc th.tableblock,
-.doc td.tableblock {
-  border: 0 solid var(--color-border-table);
-}
-
-.doc table.tableblock {
-  border-width: 1px;
-  border-collapse: collapse;
-  margin: 1.5rem 0 2rem;
-} */
-
 /* TODO drop .spread after upgrading to Asciidoctor 1.5.7 */
 
 .doc table.spread,
@@ -245,16 +217,6 @@ ul ul ul {
   text-align: left;
 }
 
-/* .doc table.tableblock > tbody {
-  font-weight: var(--weight-light);
-} */
-
-/* NOTE prevent wide tables from exceeding bounds */
-
-/* TODO could also target table.tableblock[style^="width:"] */
-
-/* TODO drop .spread after upgrading to Asciidoctor 1.5.7 */
-
 .doc table.spread > tbody > tr > *,
 .doc table.stretch > tbody > tr > * {
   /* NOTE setting max-width reactivates overflow-wrap behavior on the table cell */
@@ -444,7 +406,6 @@ ul ul ul {
   flex-direction: column;
   border: 1px solid var(--color-brand-gray8);
   padding: var(--base-space);
-  /* padding-left: var(--base-space); */
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
   align-items: center;
@@ -509,19 +470,6 @@ ul ul ul {
   font-weight: inherit;
 }
 
-/* Use this for a working pseudo element before an [abstract] attribute-marked block in the documentation.
-  This one adds the words "Quick Summary" before any text inside the [abstract] block. */
-
-/*
-.doc .abstract blockquote::before {
-  content: "Quick Summary \a";
-  white-space: pre;
-  color: var(--color-muted);
-  font-weight: var(--weight-medium);
-  font-size: var(--heading-h4);
-  padding-bottom: 1rem;
-}  */
-
 .doc ul {
   margin: 0;
   padding: 0 0 0 1rem;
@@ -546,11 +494,11 @@ ul ul ul {
 }
 
 .doc ul.checklist i.fa-check-square-o::before {
-  content: "\2713";
+  content: "\2713"; /* check-mark */
 }
 
 .doc ul.checklist i.fa-square-o::before {
-  content: "\274f";
+  content: "\274f"; /* square with a shadow outline */
 }
 
 .doc .dlist .dlist,
@@ -626,18 +574,6 @@ ul ul ul {
 
 /* NOTE assume pre.highlight contains code[data-lang] */
 
-/* .doc pre.highlight code::after,
-.doc pre:not(.highlight)::after{
-  content: '';
-  display: inline-block;
-  background: transparent linear-gradient(180deg, #F1F7FE0D 0%, #F1F7FE40 18%, #F1F7FE 68%, #F1F7FE 100%) 0% 0% no-repeat padding-box;
-  width: 65px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-} */
-
 .doc pre.highlight {
   position: relative;
 }
@@ -648,41 +584,6 @@ ul ul ul {
   padding: 0;
 }
 
-/* .doc pre.highlight .hljs-attr {
-  color: var(--hljs-attr);
-} */
-
-/* .doc pre.highlight .hljs-string {
-  color: var(--hljs-string);
-} */
-
-/* .doc pre.highlight .hljs-number {
-  color: var(--hljs-number);
-} */
-
-/* .doc .listingblock code[data-lang]::before {
-  content: attr(data-lang);
-  color: var("--color-brand-gray1");
-  display: none;
-  font-size: 0.75rem;
-  font-weight: var(--weight-normal);
-  letter-spacing: 1px;
-  line-height: 18px;
-  text-transform: uppercase;
-  position: absolute;
-  top: 0.375rem;
-  right: 2rem;
-  font-family: "Source Sans Pro", sans-serif;
-  padding-right: 6px;
-  border-right: 1px solid var(--color-brand-gray9);
-}
-
-.doc .listingblock:hover code[data-lang]::before {
-  display: block;
-}
-
-*/
-
 table.tableblock code.language-console.hljs.shell,
 table.tableblock pre code.language-bash.hljs {
   white-space: normal;
@@ -717,10 +618,6 @@ table.tableblock pre code.language-bash.hljs {
   margin-top: var(--base-extra-small-space);
 }
 
-/* .doc .dlist dd > .openblock > .content > :first-child {
-  margin-top: 0;
-} */
-
 .doc .sidebarblock > .content {
   border: 1px solid var(--color-border);
   padding: 2.5rem;
diff --git a/src/css/external-link-icon.css b/src/css/external-link-icon.css
index 923a5709..0bb97d2b 100644
--- a/src/css/external-link-icon.css
+++ b/src/css/external-link-icon.css
@@ -2,7 +2,7 @@
 .doc a[href^="http://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
 a.add-ext-icon::after {
   font-family: "Font Awesome Light", serif;
-  content: "\f35d";
+  content: "\f35d"; /* alternate external link icon */
   font-size: inherit;
   color: inherit;
   display: none;
diff --git a/src/css/feedback.css b/src/css/feedback.css
index 60245af7..0e7e289c 100644
--- a/src/css/feedback.css
+++ b/src/css/feedback.css
@@ -1,3 +1,5 @@
+/* these elements are created by Jira Issue Collector script */
+
 #atlwdg-trigger.atlwdg-trigger {
   display: none;
   background: linear-gradient(to right, var(--color-brand-pink) 0%, var(--color-brand-orange) 100%);
diff --git a/src/css/footer.css b/src/css/footer.css
index e68050df..96537445 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -4,7 +4,6 @@
   padding: 2.5rem 0;
   position: relative;
   z-index: var(--z-index-footer);
-  /* box-shadow: 0 0 10px -5px #999; FIX BELOW */
   border-top: 1px solid var(--color-border-table);
 }
 
@@ -162,8 +161,6 @@ h2.footer-column-title {
 
 .footer-terms {
   font-size: 0.575rem;
-
-  /*  font-size: 0.875rem; */
   line-height: 1;
   border-top: 1px solid var(--color-footer-text);
   padding: 2.125rem 0 0.3125rem;
diff --git a/src/css/header.css b/src/css/header.css
index 96e5471a..98789554 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -135,19 +135,6 @@
   display: inline-block;
 }
 
-.parent-site {
-  /* margin: 0 10px;
-  padding: 0 10px; */
-  /* border-right: 1px solid var(--color-brand-gray5);
-  border-left: 1px solid var(--color-brand-gray5); */
-}
-
-/* .parent-site a {
-  color: var(--color-brand-gray4);
-  font-size: 1rem;
-  font-family: "Source Sans Pro", sans-serif;
-} */
-
 .search {
   position: relative;
 }
@@ -255,11 +242,6 @@
     width: 283px;
   }
 
-  /* .parent-site {
-    margin: 0;
-    padding: 0 var(--column-space);
-  } */
-
   .navbar.navbar-new-top {
     padding: 1.25rem 0;
     line-height: 1;
@@ -318,13 +300,6 @@
     font-size: 18px;
     color: #ffffffbf;
   }
-  /* .parent-site {
-    border-left: none;
-  }
-
-  .parent-site a {
-    color: var(--color-brand-white);
-  } */
 
   .free-trial-link {
     background: var(--color-brand-white);
diff --git a/src/css/highlight.css b/src/css/highlight.css
index 3465519f..50b8f7e5 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -11,9 +11,9 @@ Other CSS rules for styling code blocks:
 - In doc.css, the `.doc pre:not(.highlight), .doc pre.highlight code` selector sets the code block `color` and `background-color`
 - In docs.css, the `.doc .listingblock code[data-lang]::before` selector sets the language label `color`
 */
+
 .hljs-comment,
 .hljs-meta {
-  /* color: #708090; */
   color: var(--color-brand-gray1);
 }
 
@@ -47,7 +47,6 @@ Other CSS rules for styling code blocks:
 
 .hljs-built_in,
 .hljs-function .hljs-title {
-  /* color: #e6db74; */
   color: var(--color-brand-orange);
 }
 
diff --git a/src/css/home.css b/src/css/home.css
index 6ce4a69b..0db15ea6 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -139,7 +139,6 @@
 .home .card .ulist {
   font-weight: var(--weight-bold);
   margin: 1.5rem 0 0.5rem;
-  /* overflow-wrap: normal; */
   word-wrap: normal; /* NOTE not sure why this is required, but without it, list items get spaced apart */
 }
 
@@ -149,7 +148,7 @@
 }
 
 .home .card a::after {
-  content: "\00a0>";
+  content: "\00a0>"; /* non breaking space then > */
   width: 0;
   display: inline-block;
 }
@@ -281,10 +280,6 @@
   font-size: 1.3rem;
 }
 
-mark {
-  /* background: #f4f8fd; */
-}
-
 .tutorials.body.tiles .sect1 {
   border: 1px solid var(--color-brand-silver);
   margin: 0 0 1.25rem 0;
@@ -313,11 +308,6 @@ mark {
   margin-bottom: 1.25rem;
 }
 
-/* fix the height. some titles span over 2 lines */
-.tutorials.body.tiles .title {
-  /* height: 62px; */
-}
-
 /* fix the height. tutorial summaries vary in length */
 .tutorials.body.tiles .sect2 .summary p {
   height: 100%;
diff --git a/src/css/info-banner.css b/src/css/info-banner.css
index 0acab440..d8be62d5 100644
--- a/src/css/info-banner.css
+++ b/src/css/info-banner.css
@@ -1,10 +1,13 @@
+/* styles include::home::partial$info-banner.adoc[]
+  which includes an `[.info-banner]` section */
+
 .info-banner {
   display: block;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
-  background-image: linear-gradient(to right, #00ace0, #636cdc);
+  background-image: linear-gradient(to right, var(--color-brand-purple) 0%, var(--color-brand-light-blue) 100%);
   padding: 0.75em;
   margin-top: 0;
   margin-bottom: 1em;
diff --git a/src/css/labels.css b/src/css/labels.css
index 5fe02cf3..61579269 100644
--- a/src/css/labels.css
+++ b/src/css/labels.css
@@ -34,21 +34,10 @@
   top: -1rem;
 }
 
-/* .doc .labels li:first-child::before,
-.doc .labels span:first-child::before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: calc(50% - 0.5rem);
-  border: 0.5rem solid transparent;
-  top: -1rem;
-} */
-
 .doc .labels li,
 .doc .edition,
 .doc .status,
 .doc .edition.page-edition {
-  /* color: #fff; */
   display: inline-block;
   padding: 6px;
   text-transform: uppercase;
@@ -69,10 +58,6 @@
   color: inherit;
 }
 
-/* .doc .labels li.edition {
-  background-color: var(--color-brand-light-blue);
-} */
-
 .doc .edition {
   color: var(--color-brand-blue-secondary);
   border: 1px solid var(--color-brand-blue-secondary);
@@ -139,26 +124,3 @@
 .doc .edition.page-edition:hover {
   opacity: 1;
 }
-
-/* .doc .labels span:first-child,
-.doc .labels li:first-child {
-  opacity: 1;
-} */
-
-/* .doc .labels span.edition::before{
-  color: var(--color-brand-blue-secondary);
-  border:1px solid var(--color-brand-blue-secondary);
-} */
-
-/* .doc .labels li.edition::before {
-  border-bottom-color: var(--color-brand-light-blue);
-} */
-
-/* .doc .labels li.status {
-  background-color: var(--color-brand-orange);
-} */
-
-/* .doc .labels li.status:first-child::before,
-.doc .labels span.status:first-child::before {
-  border-bottom-color: var(--color-brand-orange);
-} */
diff --git a/src/css/landing-page.css b/src/css/landing-page.css
index 8c3f82b1..df151e6c 100644
--- a/src/css/landing-page.css
+++ b/src/css/landing-page.css
@@ -41,10 +41,6 @@
 }
 
 .doc.landing-page-doc .sub-heading.two-column-heading {
-  /* display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap; */
   display: block;
 }
 
@@ -245,10 +241,6 @@
   display: none;
 }
 
-/* .card-row.two-column-row .column:nth-child(even) {
-  padding-left: 5%;
-} */
-
 .doc.landing-page-doc iframe {
   width: 100%;
   height: 315px;
diff --git a/src/css/main.css b/src/css/main.css
index ee8b6432..e2fb45ca 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,7 +2,8 @@ main {
   padding-bottom: 4rem;
 }
 
-/* IMPORTANT for this to work, the element cannot be display: flex and cannot have padding top or border top */
+/* IMPORTANT for this to work, the element cannot be display: flex 
+   and cannot have padding top or border top */
 main [id]::before {
   content: "";
   display: inherit;
@@ -44,7 +45,6 @@ main p {
 
 .article-banner {
   align-items: center;
-  /* background: linear-gradient(to right, var(--color-brand-purple) 0%, var(--color-brand-light-blue) 100%); */
   background: transparent;
   border: 1px solid #1174e0;
   color: var(--color-brand-blue-secondary);
@@ -65,12 +65,6 @@ main p {
   color: var(--color-brand-blue-secondary);
 }
 
-/* .article-banner span {
-  font-size: var(--font-small);
-  margin: 0.5rem 1rem 0 0;
-  color: var(--color-brand-gray4);
-} */
-
 .article-banner svg {
   margin-right: 10px;
   margin-bottom: 10px;
@@ -141,9 +135,6 @@ main p {
   .toc {
     margin: 0 auto 0 0;
   }
-  /* .article-banner {
-    margin: var(--base-small-space) 0 var(--base-space);
-  } */
 
   .article-header {
     align-items: flex-start;
diff --git a/src/css/nav.css b/src/css/nav.css
index 2cdd1e11..948b2f9c 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -117,7 +117,6 @@
 }
 
 .menu_list.is-current-page > .menu_line {
-  /* background: #4287d60f; */
   border-right: 4px solid rgba(66, 135, 214, 0.44);
   font-weight: var(--weight-semibold);
 }
@@ -129,7 +128,6 @@
   word-break: break-word;
   font-family: 'Source Sans Pro', sans-serif;
   text-decoration: none;
-  /* padding: 0.25rem 0; */
 }
 
 a.menu_link {
diff --git a/src/css/pagination.css b/src/css/pagination.css
index a3118661..0abc24bb 100644
--- a/src/css/pagination.css
+++ b/src/css/pagination.css
@@ -54,10 +54,10 @@ nav.pagination a::after {
 }
 
 nav.pagination .prev a::before {
-  content: "\2039";
+  content: "\2039"; /* < */
   transform: translateX(-100%);
 }
 
 nav.pagination .next a::after {
-  content: "\203a";
+  content: "\203a"; /* > */
 }
diff --git a/src/css/site.css b/src/css/site.css
index 8ca90e74..f1101dee 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -14,7 +14,6 @@
 @import "toolbar.css";
 @import "labels.css";
 @import "doc.css";
-/* @import "@asciidoctor/tabs"; */
 @import "tabs.css";
 @import "pagination.css";
 @import "swagger-ui.css";
diff --git a/src/css/table.css b/src/css/table.css
index d76c4013..aaa5906a 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -45,18 +45,10 @@ table.tableblock thead th {
   font-weight: var(--weight-semibold);
 }
 
-/* table.tableblock tbody td:first-child strong {
-  font-size: 1.125rem;
-} */
-
 table.tableblock tbody tr {
   display: table-cell;
 }
 
-/* .tableblock tbody tr :hover{
-    background: var(--color-brand-gray7);
-  } */
-
 table.tableblock > tbody td,
 table.tableblock > tbody th {
   display: block;
@@ -85,21 +77,6 @@ table.tableblock tbody td.tableblock p.tableblock {
   margin-top: 1rem;
 }
 
-/* table.tableblock .content .paragraph,
-table.tableblock .content .ulist {
-  margin-top: 0;
-} */
-
-/* table.tableblock tr:nth-child(odd) {
-    background: rgba(0, 0, 0, 0.07);g29
-
-  }
-   */
-
-/* table.tableblock tbody tr:hover {
-    background: var(--color-brand-gray7);
-} */
-
 table.tableblock .title {
   display: inline-block;
   width: 100%;
@@ -111,11 +88,6 @@ table.tableblock .title {
   border-bottom: none;
 }
 
-/* table.table-merge-cells tr:hover {
-  background-color: var(--color-brand-gray7);
-}
-*/
-
 table.table-tutorial tr th:last-child,
 table.table-tutorial tr td:last-child {
   background-color: var(--color-brand-gray7);
@@ -152,7 +124,6 @@ table.table-tutorial tr td:last-child {
 }
 
 /* Responsive css  */
-
 @media screen and (min-width: 768px) {
   table.tableblock {
     display: table;
diff --git a/src/css/toc.css b/src/css/toc.css
index 332c5e7e..a68e58f3 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -58,10 +58,6 @@
   line-height: 1.2;
 }
 
-/* .toc .toc-menu h3,
-.toc .toc-menu ul {
-  margin-left: 0.75rem;
-} */
 .toc .toc-menu li {
   margin: 0;
 }
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 431ad54c..be159d82 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -1,6 +1,5 @@
-/* .sidebar-box .tools {
-  margin-left: 0.75rem;
-} */
+/* e.g. "Edit on Github" */
+
 .tools ul {
   margin: 0;
   padding: 0;
@@ -16,9 +15,6 @@
 
 .tools .edit a {
   display: inline-block;
-  /* width: 100%;
-  height: 100%;
-  text-indent: 100%; */
   white-space: nowrap;
   overflow: hidden;
   background: url(../img/edit.svg) no-repeat center left;
diff --git a/src/css/vars.css b/src/css/vars.css
index f17022a6..cf73e50b 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,11 +1,14 @@
 :root {
+    
   /* NOTE tint colors are 15% transparent */
+  
   /* primary */
   --color-brand-primary: #262626;
   --color-brand-black: #000;
   --color-brand-red: #ea2328;
   --color-brand-red-tint: #fcdedf;
   --color-brand-white: #fff;
+  
   /* secondary */
   --color-brand-secondary: #fff;
   --color-brand-blue: #4287d6;
@@ -21,6 +24,7 @@
   --color-brand-important: #b36cdb;
   --color-brand-warning: #ea2328;
   --color-brand-caution: #ff8f00;
+  
   /* tertiary */
   --color-gray-rgb: 115, 118, 138;
   --color-brand-gray1: #292b36;
@@ -32,7 +36,6 @@
   --color-brand-gray7: #f9f9f9;
   --color-brand-gray8: #e5e5e5;
   --color-brand-gray9: #bfbfbf;
-  /* --color-brand-silver: #ccc; */
   --color-brand-silver: #c1c1c1;
   --color-brand-blue-secondary: #0074e0;
   --color-brand-blue-secondary-light: #2689e5;
@@ -41,6 +44,7 @@
   --color-brand-grey: #666;
   --color-brand-orange: #fc9c0c;
   --color-brand-orange-tint: #fff0da;
+  
   --color-muted: var(--color-brand-gray);
   --color-text: #333;
   --color-code: var(--color-brand-pink);
@@ -53,7 +57,6 @@
   --color-link-active: var(--color-brand-blue-secondary-light);
   --color-link-hover: var(--color-brand-blue-secondary-extra-light);
 
-  /* --color-border-table: #666; */
   --color-border-table: #dadada;
   --color-shade: #f3f3f3;
   --color-navbar-bg: var(--color-brand-black);
@@ -66,7 +69,11 @@
   --hljs-attr: #407787;
   --hljs-string: #295d1e;
   --hljs-number: #0711ba;
-  /* --height-navbar: 4rem; */
+  
+  /* Color brand tabsets */
+  --color-active-tabset: #57a1ff;
+
+  /* heights and widths */
   --height-spacer: 1.1rem;
   --height-navbar: 6rem;
   --height-version-control: 4.5rem;
@@ -79,7 +86,7 @@
   --height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
   --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
-  /* --width-main-gutter: 1.5rem; */
+
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;
   --width-container-fluid: 100%;
@@ -87,12 +94,14 @@
   --width-nav: 20rem;
   --width-toc: 13rem;
   --width-page-area: calc(var(--width-container) + var(--width-nav) + var(--width-toc));
+
   /* Font weight */
   --weight-light: 300;
   --weight-normal: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
+  
   /* Z-index  */
   --z-index-feedback: 8;
   --z-index-nav-toggle: 7;
@@ -103,23 +112,19 @@
   --z-index-footer: 2;
   --z-index-nav: 1;
 
-  /* Color brand tabsets */
-  --color-active-tabset: #57a1ff;
-
   /* New  design font style */
-
-  --font-base: 1rem; /* ~16px */
-  --font-medium: 1.25rem; /* ~20px */
-  --font-small: 0.875rem; /* ~14px */
-  --labels-font-size: 0.75rem; /* ~12px */
+  --font-base: 1rem;            /* ~16px */
+  --font-medium: 1.25rem;       /* ~20px */
+  --font-small: 0.875rem;       /* ~14px */
+  --labels-font-size: 0.75rem;  /* ~12px */
   --labels-line-height: 1;
 
   /* Heading fonts */
-  --heading-h1: 2.5rem; /* ~40px */
-  --heading-h2: 2rem; /* ~32px */
-  --heading-h3: 1.5rem; /* ~24px */
-  --heading-h4: 1.25rem; /* ~20px */
-  --heading-h5: var(--font-base);  /* ~16px */
+  --heading-h1: 2.5rem;             /* ~40px */
+  --heading-h2: 2rem;               /* ~32px */
+  --heading-h3: 1.5rem;             /* ~24px */
+  --heading-h4: 1.25rem;            /* ~20px */
+  --heading-h5: var(--font-base);   /* ~16px */
 
   /* line height  */
   --line-height-body: 160%;
@@ -127,14 +132,14 @@
   --line-height-base: 1.375rem;
 
   /* Spacing variables */
-  --base-space: 1rem; /* ~ 16px */
-  --base-small-space: 0.75rem; /* ~ 12px */
+  --base-space: 1rem;               /* ~ 16px */
+  --base-small-space: 0.75rem;      /* ~ 12px */
   --base-extra-small-space: 0.5rem; /* ~ 8px */
-  --base-medium-space: 1.5rem; /* ~ 24px */
-  --base-large-space: 2rem; /* ~ 32px */
+  --base-medium-space: 1.5rem;      /* ~ 24px */
+  --base-large-space: 2rem;         /* ~ 32px */
   --base-extra-large-space: 2.5rem; /* ~ 40px */
-  --column-space: 2.5rem; /* ~ 40px */
-  --admonition-icon-space: 1rem; /* ~ 16px */
+  --column-space: 2.5rem;           /* ~ 40px */
+  --admonition-icon-space: 1rem;    /* ~ 16px */
   --admonition-content-space: 1rem; /* ~ 16px */
 
   /* Heading fonts for responsive */
diff --git a/src/css/vendor/docsearch.css b/src/css/vendor/docsearch.css
index eef78419..a7f2a522 100644
--- a/src/css/vendor/docsearch.css
+++ b/src/css/vendor/docsearch.css
@@ -19,9 +19,6 @@
   display: grid !important;
   grid-template-columns: 5fr 2fr;
   grid-auto-rows: 1fr auto;
-  /*
-  max-height: calc(var(--viewport-height) - var(--navbar-height) - 4rem);
-  */
   max-height: calc(100vh - var(--height-navbar) + 1.5rem);
   max-width: none;
   min-width: auto;
@@ -217,16 +214,7 @@
 @media screen and (min-width: 1024px) {
   .algolia-autocomplete .ds-dropdown-menu.ds-with-1 {
     width: 40rem;
-    /*
-    width: 34rem;
-    */
   }
-
-  /*
-  .algolia-autocomplete .ds-dropdown-menu {
-    max-height: calc(var(--viewport-height) - var(--navbar-height));
-  }
-  */
 }
 
 @supports (scrollbar-width: thin) {

From 5e856252a68f7a33b9179d7780d274b37d4aba40 Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Wed, 21 Jun 2023 07:13:11 +0100
Subject: [PATCH 2/6] Remove Contributor box

It's nice to credit contributors...
but doing so in an invisible div that makes an API request
to Github on every page load perhaps not.
---
 src/css/contributor.css          | 69 -------------------------
 src/css/site.css                 |  1 -
 src/js/08-contributor-bot.js     | 87 --------------------------------
 src/partials/article.hbs         |  1 -
 src/partials/contributor-bot.hbs |  5 --
 5 files changed, 163 deletions(-)
 delete mode 100644 src/css/contributor.css
 delete mode 100644 src/js/08-contributor-bot.js
 delete mode 100644 src/partials/contributor-bot.hbs

diff --git a/src/css/contributor.css b/src/css/contributor.css
deleted file mode 100644
index b4b86137..00000000
--- a/src/css/contributor.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.contributor-list-box {
-  align-items: center;
-  flex-wrap: wrap;
-  margin: 15px 0 0;
-  visibility: hidden;
-  display: none;
-}
-
-.contributor-list-box.show {
-  visibility: visible;
-}
-
-.contributor-list-box span {
-  font-size: 0.875rem;
-  line-height: 1;
-  color: var(--color-brand-gray3);
-  position: relative;
-  padding-right: 15px;
-}
-
-.contributor-list-box .last-commit-date::after {
-  content: "";
-  width: 1px;
-  height: 100%;
-  background: var(--color-brand-gray3);
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-#otherContributor {
-  margin-left: 5px;
-}
-
-.contributor-list-box ul {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 10px;
-}
-
-.contributor-list-box ul::before {
-  content: none;
-}
-
-.contributor-list-box ul li {
-  margin-right: 10px;
-  width: 22px;
-  height: 22px;
-  list-style: none;
-}
-
-.contributor-list-box ul li:last-child {
-  margin-right: 0;
-}
-
-.contributor-list-box ul li img {
-  max-width: 100%;
-  border-radius: 50%;
-}
-
-@media only screen and (max-width: 767px) {
-  .contributor-list-box span {
-    padding-right: 10px;
-  }
-
-  #otherContributor {
-    padding-right: 0;
-  }
-}
diff --git a/src/css/site.css b/src/css/site.css
index f1101dee..ed23ad8d 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -28,7 +28,6 @@
 @import "clipboard.css";
 @import "table.css";
 @import "landing-page.css";
-@import "contributor.css";
 @import "terminal.css";
 @import "external-link-icon.css";
 @import "disable-callouts.css";
diff --git a/src/js/08-contributor-bot.js b/src/js/08-contributor-bot.js
deleted file mode 100644
index 9304e27a..00000000
--- a/src/js/08-contributor-bot.js
+++ /dev/null
@@ -1,87 +0,0 @@
-;(function () {
-  'use strict'
-  var showData = false
-  var contributors
-  if (document.getElementById('contributorList')) {
-    var contributorList = document.getElementById('contributorList')
-    var commitdateTag = document.getElementById('commitdate')
-    var otherContributor = document.getElementById('otherContributor')
-    var contributorListBox = document.querySelector('.contributor-list-box')
-    var apiURL = 'https://api.github.com'
-    var githubRepo = '/couchbase/docs-ui'
-    // var url = 'https://api.github.com/repos/couchbase/docs-ui/stats/contributors'
-    // var contributorEveryDayURL = 'repos/couchbase/docs-ui/stats/contributors'
-    // Call the fetch function passing the url of the API as a parameter
-    // eslint-disable-next-line no-undef
-    fetch(apiURL + '/repos' + githubRepo + '/stats/contributors')
-      .then(function (resp) {
-        var data = resp.json()
-        return data
-      })
-      .then(function (data) {
-        showData = true
-        contributors = data
-        var otherContributorData = contributors.length - 5
-        var maxCommitLength = contributors.length - 1
-        var maxCommitAuthor = contributors[maxCommitLength]
-        // get last commit date
-        var totalWeek = maxCommitAuthor.weeks
-        var totaltWeekLength = totalWeek.length - 1 // array
-        var lastCommitWeek = totalWeek[totaltWeekLength]
-        var lastCommitTimeStamp = lastCommitWeek.w // object
-        var lastCommitDate = new Date(lastCommitTimeStamp * 1000) // convert timestamp to date
-        var getDate = lastCommitDate.getDate()
-        var getYear = lastCommitDate.getFullYear()
-        // eslint-disable-next-line no-array-constructor
-        var month = new Array()
-        month[0] = 'January'
-        month[1] = 'February'
-        month[2] = 'March'
-        month[3] = 'April'
-        month[4] = 'May'
-        month[5] = 'June'
-        month[6] = 'July'
-        month[7] = 'August'
-        month[8] = 'September'
-        month[9] = 'October'
-        month[10] = 'November'
-        month[11] = 'December'
-        var getMonth = month[lastCommitDate.getMonth()]
-        var latestCommitDate = getMonth + ' ' + getDate + ', ' + getYear
-        commitdateTag.append(latestCommitDate)
-        otherContributor.append(otherContributorData)
-
-        // show html data
-        if (showData) {
-          contributorListBox.classList.add('show')
-        }
-        // map function
-
-        contributors
-          .slice(0)
-          .reverse()
-          .map(function (contributor, index, arrayobj) {
-            //show only top 5 contributor
-            if (index <= 4) {
-              var contributorAvtar = contributor.author.avatar_url
-              // var contributorTotalCommit = contributor.total
-              var authorURL = contributor.author.html_url
-              // append child in ul
-              var li = document.createElement('li')
-              var anchor = document.createElement('a')
-              var image = document.createElement('img')
-              image.setAttribute('src', contributorAvtar)
-              image.setAttribute('alt', '')
-              anchor.setAttribute('href', authorURL)
-              anchor.setAttribute('target', '_blank')
-              li.appendChild(anchor)
-              anchor.appendChild(image)
-              contributorList.appendChild(li)
-            }
-          })
-      })
-      .catch(function (err) {
-        console.log(err, 13)
-      })
-  }
-})()
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 93616b4a..6cba7b6e 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -5,7 +5,6 @@
 {{> labels}}
 </div>
 {{/if}}
-{{> contributor-bot}}
 {{{page.contents}}}
 {{> pagination}}
 </article>
diff --git a/src/partials/contributor-bot.hbs b/src/partials/contributor-bot.hbs
deleted file mode 100644
index 77aae769..00000000
--- a/src/partials/contributor-bot.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="contributor-list-box">
-<span class="last-commit-date" id="commitdate">    </span>
-<ul id="contributorList"></ul>
-<span  id="otherContributor"> + </span>
-</div>
\ No newline at end of file

From f9f94f1bcf47557e175dd6665a843eadc7a706fd Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Wed, 21 Jun 2023 07:22:41 +0100
Subject: [PATCH 3/6] Reorganize site.css

Refactor callouts.css

base.css - document, purge tailwind

css-tidyup

Comments.
Merge toc.css and toolbar.css

css-tidyup minor components
---
 src/css/asciidoctor-external-callout.css |   5 -
 src/css/base.css                         | 233 +----------------------
 src/css/body.css                         |  13 +-
 src/css/callouts.css                     |  23 +++
 src/css/clipboard.css                    |   6 +
 src/css/component-frame.css              |   6 +
 src/css/crumbs.css                       |   5 +
 src/css/disable-callouts.css             |   3 -
 src/css/doc.css                          |   7 +
 src/css/external-link-icon.css           |   5 +
 src/css/feedback.css                     |   7 +-
 src/css/footer.css                       |   6 +
 src/css/header.css                       |   7 +-
 src/css/highlight.css                    |   3 +-
 src/css/home.css                         |  11 ++
 src/css/info-banner.css                  |  13 +-
 src/css/is-this-helpful.css              |   8 +-
 src/css/labels.css                       |   5 +
 src/css/landing-page.css                 |   5 +-
 src/css/main.css                         |  13 +-
 src/css/nav.css                          |   5 +
 src/css/optanon.css                      |   5 +
 src/css/pagination.css                   |   9 +
 src/css/site.css                         |  53 ++++--
 src/css/swagger-ui.css                   |   5 +
 src/css/table.css                        |   7 +-
 src/css/tabs.css                         |  11 +-
 src/css/terminal.css                     |   6 +
 src/css/toc.css                          |  78 ++++++--
 src/css/toolbar.css                      |  34 ----
 30 files changed, 275 insertions(+), 322 deletions(-)
 delete mode 100644 src/css/asciidoctor-external-callout.css
 create mode 100644 src/css/callouts.css
 delete mode 100644 src/css/disable-callouts.css
 delete mode 100644 src/css/toolbar.css

diff --git a/src/css/asciidoctor-external-callout.css b/src/css/asciidoctor-external-callout.css
deleted file mode 100644
index 74b356cf..00000000
--- a/src/css/asciidoctor-external-callout.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* Add some spacing between the externally-defined callouts in a source block */
-div.external-callout-block i.conum {
-  margin-left: 10px;
-  margin-right: 10px;
-}
diff --git a/src/css/base.css b/src/css/base.css
index 6dc246f3..cdb7c814 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,3 +1,8 @@
+/** base.css
+ * 
+ *  Resets and other basic CSS
+ */
+
 *,
 *::before,
 *::after {
@@ -91,7 +96,6 @@ i {
 .container,
 .container-fluid {
   margin: 0 auto;
-  /*  max-width: var(--width-container); */
   padding: 0 var(--width-container-gutter);
 }
 
@@ -119,16 +123,8 @@ i {
     padding-left: 0;
   }
 }
-/* .container-fluid {
-  max-width: var(--width-container-fluid);
-  padding: 0;
-  margin: 0 auto;
-} */
-
-/* checkbox css  */
-
-/* Base for label styling */
 
+/* Checkbox css  */
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
   position: absolute;
@@ -203,6 +199,7 @@ i {
   color: #aaa;
 }
 
+/* Labels */
 label:hover::before {
   border: 2px solid var(--color-brand-blue);
   outline: none;
@@ -216,219 +213,3 @@ label::after {
   outline: none;
   outline-width: 0;
 }
-
-
-/* Common margin padding css class */
-/* margin-top */
-.mt-0 {
-  margin-top: 0 !important;
-}
-
-.mt-1 {
-  margin-top: var(--base-extra-small-space) !important;  /* 8px */
-}
-
-.mt-2 {
-  margin-top: var(--base-small-space) !important;        /* 12px */
-}
-
-.mt-3 {
-  margin-top: var(--base-space) !important;             /* 16px */
-}
-
-.mt-4 {
-  margin-top: var(--base-medium-space) !important;    /* 24px */
-}
-
-.mt-5 {
-  margin-top: var(--base-large-space) !important;     /* 32px */
-}
-
-/* margin-bottom */
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-.mb-1 {
-  margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-}
-
-.mb-2 {
-  margin-bottom: var(--base-small-space) !important;     /* 12px */
-}
-
-.mb-3 {
-  margin-bottom: var(--base-space) !important;         /* 16px */
-}
-
-.mb-4 {
-  margin-bottom: var(--base-medium-space) !important;   /* 24px */
-}
-
-.mb-5 {
-  margin-bottom: var(--base-large-space) !important;   /* 32px */
-}
-
-/* Responsive css */
-/* For tablet,ipad Portrait view mode 1024px screen */
-@media screen and (min-width: 740px) {
-  /* Spacing media query */
-  .mt-sm-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-sm-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-sm-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-sm-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-sm-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-sm-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-sm-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-sm-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-sm-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-sm-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-sm-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-sm-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}
-/* For tablet,ipad landscape mode 1024px screen */
-@media screen and (min-width: 993px) {
-  .container-fluid {
-    /*  max-width: var(--width-container-fluid); */
-    padding: 0;
-    margin: 0 auto;
-  }
-
-  /* Spacing media query */
-  .mt-md-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-md-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-md-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-md-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-md-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-md-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-md-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-md-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-md-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-md-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-md-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-md-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}
-/* For large desktop to small desktop screen */
-@media screen and (min-width: 1200px) {
-  /* Spacing media query */
-  .mt-lg-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-lg-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-lg-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-lg-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-lg-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-lg-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-lg-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-lg-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-lg-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-lg-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-lg-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-lg-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}
diff --git a/src/css/body.css b/src/css/body.css
index 54311846..2e92fb9c 100644
--- a/src/css/body.css
+++ b/src/css/body.css
@@ -1,6 +1,10 @@
-/* NOTE
-  min-width of flex: 1 container = content-width to prevent wrapping by default; 
-  min-width: 0 lets content wrap */
+/** body.css
+ * 
+ *  Styles for body, main, and .nav
+ *  TODO: compare main.css and nav.css
+ */
+
+
   
 div.body {
   display: flex;
@@ -15,6 +19,9 @@ div.body {
   margin-top: var(--height-navbar);
 }
 
+/* NOTE
+  min-width of flex: 1 container = content-width to prevent wrapping by default; 
+  min-width: 0 lets content wrap */
 main {
   flex: 1;
   min-width: 0;
diff --git a/src/css/callouts.css b/src/css/callouts.css
new file mode 100644
index 00000000..ed2abcfd
--- /dev/null
+++ b/src/css/callouts.css
@@ -0,0 +1,23 @@
+/** callouts.css
+ *
+ *  Format code callouts https://docs.asciidoctor.org/asciidoc/latest/verbatim/callouts/
+ *  
+ *  Support for Ray's Externally defined callouts:
+ *      https://www.npmjs.com/package/asciidoctor-external-callout
+ *
+ *  Utility class `.no-callouts` lets you hide callouts in listing blocks.
+ *  Example:
+ *      [source.no-callouts,sqlpp]
+ *      --
+ *      SELECT foo from... <1>
+ *      --
+ */
+
+div.external-callout-block i.conum {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.no-callouts .conum {
+  display: none !important;
+}
diff --git a/src/css/clipboard.css b/src/css/clipboard.css
index f049e206..a3cf9de3 100644
--- a/src/css/clipboard.css
+++ b/src/css/clipboard.css
@@ -1,3 +1,9 @@
+/** clipboard.css
+ * 
+ *  Styles for View Source code button
+ *  and other listing block formatting
+ */
+
 .view-source-button,
 .copy-code-button {
   color: var(--color-brand-gray4);
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index 30945368..ddd2ee18 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -1,3 +1,9 @@
+/** component-frame.css
+ * 
+ *  .component-frame and .frame-body
+ *  NB: may be unused, deleted in 4d2db54746392090df7084978770f58f4709e56c ?
+ */
+
 .component-frame {
   background: var(--color-brand-gray6);
   padding: 0 15px 0 15px;
diff --git a/src/css/crumbs.css b/src/css/crumbs.css
index 62fa348f..85e17bba 100644
--- a/src/css/crumbs.css
+++ b/src/css/crumbs.css
@@ -1,3 +1,8 @@
+/** crumbs.css
+ * 
+ *  Format the breadcrumbs 
+ */
+
 .crumbs {
   color: var(--color-muted);
   font-weight: var(--weight-light);
diff --git a/src/css/disable-callouts.css b/src/css/disable-callouts.css
deleted file mode 100644
index c43050c9..00000000
--- a/src/css/disable-callouts.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.no-callouts .conum {
-  display: none !important;
-}
diff --git a/src/css/doc.css b/src/css/doc.css
index f551286f..b9440dfd 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,3 +1,10 @@
+/** doc.css
+ * 
+ *  Styles for <article class="doc">
+ *
+ *  Looks like base formatting for the Asciidoc content.
+ */
+
 .doc {
   padding-top: 1.25rem;
 }
diff --git a/src/css/external-link-icon.css b/src/css/external-link-icon.css
index 0bb97d2b..5536dc3c 100644
--- a/src/css/external-link-icon.css
+++ b/src/css/external-link-icon.css
@@ -1,3 +1,8 @@
+/** external-link-icon.css
+ * 
+ *  Add external link icon to links that aren't to couchbase.com
+ */
+
 .doc a[href^="https://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
 .doc a[href^="http://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
 a.add-ext-icon::after {
diff --git a/src/css/feedback.css b/src/css/feedback.css
index 0e7e289c..d6f2c9b9 100644
--- a/src/css/feedback.css
+++ b/src/css/feedback.css
@@ -1,4 +1,9 @@
-/* these elements are created by Jira Issue Collector script */
+/** feedback.css
+ * 
+ *  I believe these elements are created by 
+ *  Jira Issue Collector script.
+ *  e.g. we don't output these in docs-ui
+ */
 
 #atlwdg-trigger.atlwdg-trigger {
   display: none;
diff --git a/src/css/footer.css b/src/css/footer.css
index 96537445..db7fac7e 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,3 +1,9 @@
+/** footer.css
+ * 
+ *  Styles for footer
+ *  NB: we have a couple of 'float' declarations below, to investigate.
+ */
+
 .footer {
   background-color: var(--color-footer-bg);
   color: var(--color-footer-text);
diff --git a/src/css/header.css b/src/css/header.css
index 98789554..e0e5ad27 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,3 +1,8 @@
+/** header.css
+ * 
+ *  Styles for header
+ */
+
 .header-top-row {
   background: var(--color-brand-white);
   padding: 0 var(--width-container-gutter);
@@ -195,7 +200,7 @@
 }
 
 .navbar-dropdown li.current a.navbar-item::before {
-  content: "\2023";
+  content: "\2023"; /* ‣ */
   position: absolute;
   left: -0.75em;
 }
diff --git a/src/css/highlight.css b/src/css/highlight.css
index 50b8f7e5..a897ad15 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -1,4 +1,5 @@
-/**
+/** highlight.css
+
 Steps to change the highlight.js theme:
 
 1. View available themes on https://highlightjs.org/static/demo/
diff --git a/src/css/home.css b/src/css/home.css
index 0db15ea6..12240937 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -1,3 +1,14 @@
+/** home.css
+ * 
+ *  Styles for .home
+ *  NB: not sure where this is? Landing pages?
+ *  We can have body, div, main with class of .home
+ *  via layout: home
+ *  But grep suggests this may no longer be used.
+ *  
+ *  Also for .tutorials and .searchbar
+ */
+
 .home .paragraph {
   margin-top: 1.25rem;
 }
diff --git a/src/css/info-banner.css b/src/css/info-banner.css
index d8be62d5..bf868dbc 100644
--- a/src/css/info-banner.css
+++ b/src/css/info-banner.css
@@ -1,5 +1,14 @@
-/* styles include::home::partial$info-banner.adoc[]
-  which includes an `[.info-banner]` section */
+/** info-banner.css
+ * 
+ * Home pages all have
+ *
+ *    include::home::partial$info-banner.adoc[]
+ * 
+ * The partial itself may be switched off
+ * (e.g. commented out)
+ * to remove the element from all pages.
+ *
+ */
 
 .info-banner {
   display: block;
diff --git a/src/css/is-this-helpful.css b/src/css/is-this-helpful.css
index 521dd711..748cf59b 100644
--- a/src/css/is-this-helpful.css
+++ b/src/css/is-this-helpful.css
@@ -1,5 +1,8 @@
-
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap");
+/** is-this-helpful.css
+ * 
+ *  Style the Is this helpful? thumbs up/down feature
+ *  in the table of contents
+ */
 
 .is-this-helpful-box * {
   font-family: "Source Sans Pro", sans-serif;
@@ -9,7 +12,6 @@
   display: inline-block;
   width: 100%;
   margin-bottom: 25px;
-  /* border-top: 1px solid #ccc; */
   padding-top: 25px;
   font-family: "Source Sans Pro", sans-serif;
 }
diff --git a/src/css/labels.css b/src/css/labels.css
index 61579269..f83e10d9 100644
--- a/src/css/labels.css
+++ b/src/css/labels.css
@@ -1,3 +1,8 @@
+/** labels.css
+ * 
+ * doc .labels, .edition, .status
+ */
+
 .doc .labels ul,
 .doc .labels p {
   display: flex;
diff --git a/src/css/landing-page.css b/src/css/landing-page.css
index df151e6c..fad64361 100644
--- a/src/css/landing-page.css
+++ b/src/css/landing-page.css
@@ -1,4 +1,7 @@
-/* Landing Page CSS  */
+/** landing-page.css
+ * 
+ *  Styles for Landing Pages
+ */
 
 .doc.landing-page-doc h1 {
   color: var(--color-brand-gray1);
diff --git a/src/css/main.css b/src/css/main.css
index e2fb45ca..31b4c0c2 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,3 +1,13 @@
+/** main.css
+ * 
+ *  Styles for:
+
+  <main class="article" data-ceiling="topbar">
+    <div class="article-header">...
+    <article class="doc">...
+
+ */
+
 main {
   padding-bottom: 4rem;
 }
@@ -43,6 +53,7 @@ main p {
   hyphens: auto; /* NOTE in Chrome, hyphens: auto is only supported on macOS and Android */
 }
 
+/* The "You are viewing a pre-release" banner */
 .article-banner {
   align-items: center;
   background: transparent;
@@ -113,7 +124,7 @@ main p {
   min-width: 0;
 }
 
-/* color css  */
+/* color css  NB: unused? */
 .text-color-brand-blue {
   color: var(--color-brand-blue);
 }
diff --git a/src/css/nav.css b/src/css/nav.css
index 948b2f9c..fe45b676 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,3 +1,8 @@
+/** nav.css
+ * 
+ *  Styles for nav, left-sidebar, menus, and tutorials-filter
+ */
+
 .left-sidebar {
   width: 20rem;
 }
diff --git a/src/css/optanon.css b/src/css/optanon.css
index 0bd024f1..e77ae83e 100644
--- a/src/css/optanon.css
+++ b/src/css/optanon.css
@@ -1,3 +1,8 @@
+/** optanon.css
+ * 
+ * Style vendor popup from optanon (OneTrust Cookie)
+ */
+
 .optanon-alert-box-wrapper,
 #optanon-popup-wrapper {
   position: fixed;
diff --git a/src/css/pagination.css b/src/css/pagination.css
index 0abc24bb..078eedd2 100644
--- a/src/css/pagination.css
+++ b/src/css/pagination.css
@@ -1,3 +1,12 @@
+/** pagination.css
+ * 
+ *  Styles for Prev and Next navigation, enabled on some pages 
+ *  by e.g.:
+ *    :page-pagination: full
+ *  
+ *  See e.g. https://docs.couchbase.com/php-sdk/current/hello-world/platform-help.html
+ */
+
 nav.pagination {
   display: flex;
   border-top: 1px solid var(--color-border-table);
diff --git a/src/css/site.css b/src/css/site.css
index ed23ad8d..f4159f65 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,35 +1,48 @@
+/** site.css
+ *
+ *  Index of all CSS for site
+ */
+
+/* Font imports */
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');
-@import "common.css";
 @import "typeface-gotham.css";
 @import "typeface-roboto-mono.css";
-@import "vars.css";
+
+/* Foundation */
 @import "base.css";
+@import "common.css";
+@import "vars.css";
+
+/* Major structural components */
 @import "body.css";
 @import "nav.css";
-@import "toc.css";
-@import "main.css";
-@import "crumbs.css";
-@import "toolbar.css";
-@import "labels.css";
+
 @import "doc.css";
-@import "tabs.css";
+@import "footer.css";
+@import "header.css";
+@import "main.css";
 @import "pagination.css";
-@import "swagger-ui.css";
+@import "toc.css";
+
+/* Landing pages */
 @import "home.css";
-@import "header.css";
-@import "footer.css";
-@import "optanon.css";
-@import "highlight.css";
-@import "feedback.css";
+@import "landing-page.css";
+
+/* Other components */
+@import "callouts.css";
+@import "clipboard.css";
 @import "component-frame.css";
+@import "crumbs.css";
+@import "external-link-icon.css";
+@import "feedback.css";
+@import "highlight.css";
 @import "is-this-helpful.css";
-@import "clipboard.css";
+@import "info-banner.css";
+@import "labels.css";
+@import "optanon.css";
+@import "swagger-ui.css";
 @import "table.css";
-@import "landing-page.css";
+@import "tabs.css";
 @import "terminal.css";
-@import "external-link-icon.css";
-@import "disable-callouts.css";
-@import "asciidoctor-external-callout.css";
-@import "info-banner.css";
diff --git a/src/css/swagger-ui.css b/src/css/swagger-ui.css
index cdd55f43..22fe65e1 100644
--- a/src/css/swagger-ui.css
+++ b/src/css/swagger-ui.css
@@ -1,3 +1,8 @@
+/** swagger-ui.css
+ * 
+ * Style vendor css override for Swagger UI
+ */
+
 .doc .swagger-ui .topbar,
 .doc .swagger-ui .wrapper.information-container {
   display: none;
diff --git a/src/css/table.css b/src/css/table.css
index aaa5906a..963ec00d 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -1,6 +1,7 @@
-/* =============================================================================
-   Responsive Table CSS
-   ========================================================================== */
+/** table.css
+ * 
+ * Responsive table CSS
+ */
 
 table.tableblock,
 table.tableblock thead,
diff --git a/src/css/tabs.css b/src/css/tabs.css
index 84e938b9..997c8657 100644
--- a/src/css/tabs.css
+++ b/src/css/tabs.css
@@ -1,6 +1,11 @@
-/* Starting point:
- * Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License
- * Then hand-edited to match previous style as well as possible */
+/** tabs.css
+ * 
+ * Style vendor css for @asciidoctor/tabs
+ *
+ * NB: we currently do NOT
+ *   @import "@asciidoctor/tabs"
+ * so this defines the full CSS rather than overriding.
+ */
 
 .tabs {
   margin-top: 2em;
diff --git a/src/css/terminal.css b/src/css/terminal.css
index 86189062..99e32d57 100644
--- a/src/css/terminal.css
+++ b/src/css/terminal.css
@@ -1,3 +1,9 @@
+/** terminal.css
+ * 
+ * Style the Try It Now box 
+ * (source code to couchbase.live integration)
+ */
+
 .action-panel {
   display: none;
   position: absolute;
diff --git a/src/css/toc.css b/src/css/toc.css
index a68e58f3..7cb7a1c7 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -1,3 +1,12 @@
+/** toc.css
+ * 
+ *  Styles for Table of Contents
+ *  which also includes:
+ *   - Tools (edit on github)
+ *
+ *  See also: is-it-helpful.css
+ */
+
 .toc {
   font-size: 0.875rem;
 }
@@ -7,22 +16,7 @@
   line-height: 1;
 }
 
-.sidebar-box {
-  position: fixed; /* for IE */
-  width: inherit; /* for position: fixed */
-  position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-  top: var(--height-to-body);
-  max-height: var(--height-toc-sidebar);
-  overflow-y: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  padding-right: var(--base-space);
-  padding-left: var(--base-space);
-}
 
-.sidebar-box::-webkit-scrollbar {
-  width: 0;
-}
 
 .toc.embedded .toc-menu {
   margin-top: 1rem;
@@ -125,3 +119,57 @@
 .toc ul li[data-level="2"] a {
   padding-top: 2px;
 }
+
+/* Sidebar Box and Tools */
+
+.sidebar-box {
+  position: fixed; /* for IE */
+  width: inherit; /* for position: fixed */
+  position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+  top: var(--height-to-body);
+  max-height: var(--height-toc-sidebar);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-right: var(--base-space);
+  padding-left: var(--base-space);
+}
+
+.sidebar-box::-webkit-scrollbar {
+  width: 0;
+}
+
+/* Tools e.g. "Edit on Github" */
+
+.sidebar-box .tools {
+  padding-top: 1.25rem;
+  display: inline-block;
+  width: 100%;
+}
+
+.tools ul {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.tools .edit {
+  line-height: 1;
+  display: inline-block;
+  width: 100%;
+  list-style: none;
+}
+
+.tools .edit a {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  background: url(../img/edit.svg) no-repeat center left;
+  background-size: 15px;
+  vertical-align: top;
+  color: #999;
+  padding-left: 25px;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-family: "Source Sans Pro", sans-serif;
+}
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
deleted file mode 100644
index be159d82..00000000
--- a/src/css/toolbar.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/* e.g. "Edit on Github" */
-
-.tools ul {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-
-.tools .edit {
-  line-height: 1;
-  display: inline-block;
-  width: 100%;
-  list-style: none;
-}
-
-.tools .edit a {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  background: url(../img/edit.svg) no-repeat center left;
-  background-size: 15px;
-  vertical-align: top;
-  color: #999;
-  padding-left: 25px;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-family: "Source Sans Pro", sans-serif;
-}
-
-.sidebar-box .tools {
-  padding-top: 1.25rem;
-  display: inline-block;
-  width: 100%;
-}

From 7ca88e1d17a70c324d848755670b10cb491bfcd8 Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Wed, 21 Jun 2023 09:13:12 +0100
Subject: [PATCH 4/6] Appeasing css linter

---
 src/css/base.css               |  2 +-
 src/css/body.css               |  6 ++----
 src/css/callouts.css           |  2 +-
 src/css/clipboard.css          |  2 +-
 src/css/component-frame.css    |  2 +-
 src/css/crumbs.css             |  4 ++--
 src/css/doc.css                |  2 +-
 src/css/external-link-icon.css |  2 +-
 src/css/feedback.css           |  4 ++--
 src/css/footer.css             |  2 +-
 src/css/header.css             |  2 +-
 src/css/home.css               |  6 +++---
 src/css/info-banner.css        |  5 ++---
 src/css/is-this-helpful.css    |  2 +-
 src/css/labels.css             |  2 +-
 src/css/landing-page.css       |  2 +-
 src/css/main.css               |  4 ++--
 src/css/nav.css                |  2 +-
 src/css/optanon.css            |  2 +-
 src/css/pagination.css         |  6 +++---
 src/css/site.css               |  1 -
 src/css/swagger-ui.css         |  2 +-
 src/css/table.css              |  2 +-
 src/css/tabs.css               |  2 +-
 src/css/terminal.css           |  4 ++--
 src/css/toc.css                |  4 +---
 src/css/vars.css               | 16 ++++++++--------
 27 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index cdb7c814..70af9314 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,5 +1,5 @@
 /** base.css
- * 
+ *
  *  Resets and other basic CSS
  */
 
diff --git a/src/css/body.css b/src/css/body.css
index 2e92fb9c..ac861d42 100644
--- a/src/css/body.css
+++ b/src/css/body.css
@@ -1,11 +1,9 @@
 /** body.css
- * 
+ *
  *  Styles for body, main, and .nav
  *  TODO: compare main.css and nav.css
  */
 
-
-  
 div.body {
   display: flex;
   margin-top: var(--height-to-body);
@@ -20,7 +18,7 @@ div.body {
 }
 
 /* NOTE
-  min-width of flex: 1 container = content-width to prevent wrapping by default; 
+  min-width of flex: 1 container = content-width to prevent wrapping by default;
   min-width: 0 lets content wrap */
 main {
   flex: 1;
diff --git a/src/css/callouts.css b/src/css/callouts.css
index ed2abcfd..851c4154 100644
--- a/src/css/callouts.css
+++ b/src/css/callouts.css
@@ -1,7 +1,7 @@
 /** callouts.css
  *
  *  Format code callouts https://docs.asciidoctor.org/asciidoc/latest/verbatim/callouts/
- *  
+ *
  *  Support for Ray's Externally defined callouts:
  *      https://www.npmjs.com/package/asciidoctor-external-callout
  *
diff --git a/src/css/clipboard.css b/src/css/clipboard.css
index a3cf9de3..377d6ff4 100644
--- a/src/css/clipboard.css
+++ b/src/css/clipboard.css
@@ -1,5 +1,5 @@
 /** clipboard.css
- * 
+ *
  *  Styles for View Source code button
  *  and other listing block formatting
  */
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index ddd2ee18..1a9d29f1 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -1,5 +1,5 @@
 /** component-frame.css
- * 
+ *
  *  .component-frame and .frame-body
  *  NB: may be unused, deleted in 4d2db54746392090df7084978770f58f4709e56c ?
  */
diff --git a/src/css/crumbs.css b/src/css/crumbs.css
index 85e17bba..3f1d09df 100644
--- a/src/css/crumbs.css
+++ b/src/css/crumbs.css
@@ -1,6 +1,6 @@
 /** crumbs.css
- * 
- *  Format the breadcrumbs 
+ *
+ *  Format the breadcrumbs
  */
 
 .crumbs {
diff --git a/src/css/doc.css b/src/css/doc.css
index b9440dfd..24a928dd 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,5 +1,5 @@
 /** doc.css
- * 
+ *
  *  Styles for <article class="doc">
  *
  *  Looks like base formatting for the Asciidoc content.
diff --git a/src/css/external-link-icon.css b/src/css/external-link-icon.css
index 5536dc3c..8fc8824f 100644
--- a/src/css/external-link-icon.css
+++ b/src/css/external-link-icon.css
@@ -1,5 +1,5 @@
 /** external-link-icon.css
- * 
+ *
  *  Add external link icon to links that aren't to couchbase.com
  */
 
diff --git a/src/css/feedback.css b/src/css/feedback.css
index d6f2c9b9..e290ab50 100644
--- a/src/css/feedback.css
+++ b/src/css/feedback.css
@@ -1,6 +1,6 @@
 /** feedback.css
- * 
- *  I believe these elements are created by 
+ *
+ *  I believe these elements are created by
  *  Jira Issue Collector script.
  *  e.g. we don't output these in docs-ui
  */
diff --git a/src/css/footer.css b/src/css/footer.css
index db7fac7e..89b867ba 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,5 +1,5 @@
 /** footer.css
- * 
+ *
  *  Styles for footer
  *  NB: we have a couple of 'float' declarations below, to investigate.
  */
diff --git a/src/css/header.css b/src/css/header.css
index e0e5ad27..d956c10f 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,5 +1,5 @@
 /** header.css
- * 
+ *
  *  Styles for header
  */
 
diff --git a/src/css/home.css b/src/css/home.css
index 12240937..37f170c8 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -1,11 +1,11 @@
-/** home.css
- * 
+/** home.cs
+ *
  *  Styles for .home
  *  NB: not sure where this is? Landing pages?
  *  We can have body, div, main with class of .home
  *  via layout: home
  *  But grep suggests this may no longer be used.
- *  
+ *
  *  Also for .tutorials and .searchbar
  */
 
diff --git a/src/css/info-banner.css b/src/css/info-banner.css
index bf868dbc..83014b64 100644
--- a/src/css/info-banner.css
+++ b/src/css/info-banner.css
@@ -1,13 +1,12 @@
 /** info-banner.css
- * 
+ *
  * Home pages all have
  *
  *    include::home::partial$info-banner.adoc[]
- * 
+ *
  * The partial itself may be switched off
  * (e.g. commented out)
  * to remove the element from all pages.
- *
  */
 
 .info-banner {
diff --git a/src/css/is-this-helpful.css b/src/css/is-this-helpful.css
index 748cf59b..a26d73dd 100644
--- a/src/css/is-this-helpful.css
+++ b/src/css/is-this-helpful.css
@@ -1,5 +1,5 @@
 /** is-this-helpful.css
- * 
+ *
  *  Style the Is this helpful? thumbs up/down feature
  *  in the table of contents
  */
diff --git a/src/css/labels.css b/src/css/labels.css
index f83e10d9..bfb715b1 100644
--- a/src/css/labels.css
+++ b/src/css/labels.css
@@ -1,5 +1,5 @@
 /** labels.css
- * 
+ *
  * doc .labels, .edition, .status
  */
 
diff --git a/src/css/landing-page.css b/src/css/landing-page.css
index fad64361..a660c8a8 100644
--- a/src/css/landing-page.css
+++ b/src/css/landing-page.css
@@ -1,5 +1,5 @@
 /** landing-page.css
- * 
+ *
  *  Styles for Landing Pages
  */
 
diff --git a/src/css/main.css b/src/css/main.css
index 31b4c0c2..155b5b31 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,5 +1,5 @@
 /** main.css
- * 
+ *
  *  Styles for:
 
   <main class="article" data-ceiling="topbar">
@@ -12,7 +12,7 @@ main {
   padding-bottom: 4rem;
 }
 
-/* IMPORTANT for this to work, the element cannot be display: flex 
+/* IMPORTANT for this to work, the element cannot be display: flex
    and cannot have padding top or border top */
 main [id]::before {
   content: "";
diff --git a/src/css/nav.css b/src/css/nav.css
index fe45b676..993dfd26 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,5 +1,5 @@
 /** nav.css
- * 
+ *
  *  Styles for nav, left-sidebar, menus, and tutorials-filter
  */
 
diff --git a/src/css/optanon.css b/src/css/optanon.css
index e77ae83e..930a55d5 100644
--- a/src/css/optanon.css
+++ b/src/css/optanon.css
@@ -1,5 +1,5 @@
 /** optanon.css
- * 
+ *
  * Style vendor popup from optanon (OneTrust Cookie)
  */
 
diff --git a/src/css/pagination.css b/src/css/pagination.css
index 078eedd2..6685b22c 100644
--- a/src/css/pagination.css
+++ b/src/css/pagination.css
@@ -1,9 +1,9 @@
 /** pagination.css
- * 
- *  Styles for Prev and Next navigation, enabled on some pages 
+ *
+ *  Styles for Prev and Next navigation, enabled on some pages
  *  by e.g.:
  *    :page-pagination: full
- *  
+ *
  *  See e.g. https://docs.couchbase.com/php-sdk/current/hello-world/platform-help.html
  */
 
diff --git a/src/css/site.css b/src/css/site.css
index f4159f65..1abe68d6 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -18,7 +18,6 @@
 /* Major structural components */
 @import "body.css";
 @import "nav.css";
-
 @import "doc.css";
 @import "footer.css";
 @import "header.css";
diff --git a/src/css/swagger-ui.css b/src/css/swagger-ui.css
index 22fe65e1..12151a53 100644
--- a/src/css/swagger-ui.css
+++ b/src/css/swagger-ui.css
@@ -1,5 +1,5 @@
 /** swagger-ui.css
- * 
+ *
  * Style vendor css override for Swagger UI
  */
 
diff --git a/src/css/table.css b/src/css/table.css
index 963ec00d..377bdff1 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -1,5 +1,5 @@
 /** table.css
- * 
+ *
  * Responsive table CSS
  */
 
diff --git a/src/css/tabs.css b/src/css/tabs.css
index 997c8657..f32108fd 100644
--- a/src/css/tabs.css
+++ b/src/css/tabs.css
@@ -1,5 +1,5 @@
 /** tabs.css
- * 
+ *
  * Style vendor css for @asciidoctor/tabs
  *
  * NB: we currently do NOT
diff --git a/src/css/terminal.css b/src/css/terminal.css
index 99e32d57..0a6f8fc7 100644
--- a/src/css/terminal.css
+++ b/src/css/terminal.css
@@ -1,6 +1,6 @@
 /** terminal.css
- * 
- * Style the Try It Now box 
+ *
+ * Style the Try It Now box
  * (source code to couchbase.live integration)
  */
 
diff --git a/src/css/toc.css b/src/css/toc.css
index 7cb7a1c7..170d0816 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -1,5 +1,5 @@
 /** toc.css
- * 
+ *
  *  Styles for Table of Contents
  *  which also includes:
  *   - Tools (edit on github)
@@ -16,8 +16,6 @@
   line-height: 1;
 }
 
-
-
 .toc.embedded .toc-menu {
   margin-top: 1rem;
   display: none;
diff --git a/src/css/vars.css b/src/css/vars.css
index cf73e50b..5bd76608 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,14 +1,13 @@
 :root {
-    
   /* NOTE tint colors are 15% transparent */
-  
+
   /* primary */
   --color-brand-primary: #262626;
   --color-brand-black: #000;
   --color-brand-red: #ea2328;
   --color-brand-red-tint: #fcdedf;
   --color-brand-white: #fff;
-  
+
   /* secondary */
   --color-brand-secondary: #fff;
   --color-brand-blue: #4287d6;
@@ -24,7 +23,7 @@
   --color-brand-important: #b36cdb;
   --color-brand-warning: #ea2328;
   --color-brand-caution: #ff8f00;
-  
+
   /* tertiary */
   --color-gray-rgb: 115, 118, 138;
   --color-brand-gray1: #292b36;
@@ -44,7 +43,6 @@
   --color-brand-grey: #666;
   --color-brand-orange: #fc9c0c;
   --color-brand-orange-tint: #fff0da;
-  
   --color-muted: var(--color-brand-gray);
   --color-text: #333;
   --color-code: var(--color-brand-pink);
@@ -57,6 +55,7 @@
   --color-link-active: var(--color-brand-blue-secondary-light);
   --color-link-hover: var(--color-brand-blue-secondary-extra-light);
 
+  /* other colors */
   --color-border-table: #dadada;
   --color-shade: #f3f3f3;
   --color-navbar-bg: var(--color-brand-black);
@@ -69,11 +68,11 @@
   --hljs-attr: #407787;
   --hljs-string: #295d1e;
   --hljs-number: #0711ba;
-  
+
   /* Color brand tabsets */
   --color-active-tabset: #57a1ff;
 
-  /* heights and widths */
+  /* heights */
   --height-spacer: 1.1rem;
   --height-navbar: 6rem;
   --height-version-control: 4.5rem;
@@ -87,6 +86,7 @@
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
   --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
 
+  /* widths */
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;
   --width-container-fluid: 100%;
@@ -101,7 +101,7 @@
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
-  
+
   /* Z-index  */
   --z-index-feedback: 8;
   --z-index-nav-toggle: 7;

From 2d0cbc1dda1d6393bca91d96c4edb566d657ecd3 Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Fri, 4 Aug 2023 11:25:29 +0100
Subject: [PATCH 5/6] Fix table captions

Glitch reported by @malarky.
Removed special display/position handling.
---
 src/css/table.css | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/css/table.css b/src/css/table.css
index 377bdff1..b8a3773c 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -79,10 +79,14 @@ table.tableblock tbody td.tableblock p.tableblock {
 }
 
 table.tableblock .title {
-  display: inline-block;
+  /* display: table-caption;
+    compresses caption on e.g.
+    https://docs.couchbase.com/server/current/backup-restore/enterprise-backup-restore.html
+    into single cell at width < 768px.
+    */
   width: 100%;
   padding: 10px 0 0;
-  margin-bottom: 10px;
+  margin: 10px 0;
 }
 
 .doc .admonitionblock td.icon {
@@ -131,12 +135,6 @@ table.table-tutorial tr td:last-child {
     position: relative;
   }
 
-  table.tableblock caption.title {
-    position: absolute;
-    left: 0;
-    top: -30px;
-  }
-
   table.tableblock.caption-table,
   div.ulist + table.tableblock,
   table.tableblock + table.tableblock {

From 2d83b0b39370f42343dbe3616d49f0386cd207f7 Mon Sep 17 00:00:00 2001
From: Hakim Cassimally <hakim.cassimally@couchbase.com>
Date: Tue, 8 Aug 2023 15:30:45 +0100
Subject: [PATCH 6/6] Sticky article-banner

Make article-banner ("A newer version of this document is available")
sticky.
This requires updating the scroll-top, otherwise when clicking on a link
it would be hidden behind the banner.
The existing handling already accounts for the same issue, but with the
height (7.1rem) of the top nav.
We use a dynamic css `var(--scroll-margin-top-space)` which can be
overridden in the case that we have a banner.
---
 gulp.d/tasks/build.js |  2 +-
 src/css/main.css      | 32 ++++++++++++++++++++++++++------
 src/css/vars.css      |  3 ++-
 src/partials/main.hbs |  5 ++++-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js
index 326a4ad9..b036d8b2 100644
--- a/gulp.d/tasks/build.js
+++ b/gulp.d/tasks/build.js
@@ -47,7 +47,7 @@ module.exports = (src, dest, preview) => () => {
       },
     ]),
     // NOTE importFrom is for use in supplemental CSS files
-    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
+    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: true }),
     preview ? postcssCalc : () => {},
     autoprefixer,
     preview ? () => {} : cssnano({ preset: 'default' }),
diff --git a/src/css/main.css b/src/css/main.css
index 155b5b31..dde6441e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -12,17 +12,32 @@ main {
   padding-bottom: 4rem;
 }
 
-/* IMPORTANT for this to work, the element cannot be display: flex
-   and cannot have padding top or border top */
+/* This pseudo-element appears to be a home-brewed scroll-padding-top,
+  e.g. is to prevent navigation anchor links from being hidden behind the Menu bar.
+
+  For this to work, the element cannot be display: flex
+  and cannot have padding top or border top.
+
+  By default the var(--scroll-margin-top-space) is set to 7.1em
+  (e.g. the height of the navbar).
+  When a banner ("A newer version of this documentation is available")
+  is shown, this variable is dynamically replaced to account for the
+  banner height.
+  */
+
 main [id]::before {
   content: "";
   display: inherit;
-  height: var(--h2-heading-top-space);
-  margin-top: calc(-1 * var(--h2-heading-top-space));
+  height: var(--scroll-margin-top-space);
+  margin-top: calc(-1 * var(--scroll-margin-top-space));
   visibility: hidden;
   width: 0;
 }
 
+main.with-banner {
+  --scroll-margin-top-space: var(--scroll-margin-top-space-plus-banner);
+}
+
 main table[id]::before {
   display: block;
 }
@@ -56,18 +71,23 @@ main p {
 /* The "You are viewing a pre-release" banner */
 .article-banner {
   align-items: center;
-  background: transparent;
+  background: white;
   border: 1px solid #1174e0;
   color: var(--color-brand-blue-secondary);
   display: flex;
   line-height: 1;
   margin: 1.25rem 0 0;
-  /* margin: calc(-1 * var(--height-spacer)) calc(-1 * var(--width-container-gutter)) var(--height-spacer); */
   padding: var(--base-space);
   border-radius: 3px;
   font-family: "Open Sans", sans-serif;
   font-weight: var(--weight-normal);
   flex-wrap: wrap;
+  /* sticky, 2px from the top menu.
+  Add a white shadow to top to avoid flashing moire as the text scrolls past. */
+  position: sticky;
+  z-index: 9;
+  top: calc(7.1rem + 2px);
+  box-shadow: 0 -2px white;
 }
 
 .article-banner p {
diff --git a/src/css/vars.css b/src/css/vars.css
index 5bd76608..2c853141 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -84,7 +84,8 @@
   --height-nav: calc(var(--height-min-body) + var(--height-spacer) - var(--height-footer));
   --height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
-  --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
+  --scroll-margin-top-space: calc(var(--height-to-body) + 0.5rem);
+  --scroll-margin-top-space-plus-banner: calc(var(--height-to-body) + 0.5rem + 5rem);
 
   /* widths */
   --width-main-gutter: 2.5rem;
diff --git a/src/partials/main.hbs b/src/partials/main.hbs
index e0a3e041..ebb5d077 100644
--- a/src/partials/main.hbs
+++ b/src/partials/main.hbs
@@ -1,4 +1,7 @@
-<main class="article" data-ceiling="topbar">
+<main
+    class="article {{#unless (or (ne page.attributes.hide-view-latest undefined) (eq page.componentVersion page.component.latest))}}with-banner{{/unless}}" 
+    data-ceiling="topbar">
+
 {{#unless (or (ne page.attributes.hide-view-latest undefined) (eq page.componentVersion page.component.latest))}}
 {{#with page.latest}}
 {{#if ./missing}}