All landing page UI styling completed

package.json

@@ -39,7 +39,7 @@
     "gulp-vinyl-zip": "~2.2",
     "handlebars": "~4.4",
     "highlight.js": "~9.15",
-    "jquery": "~3.4",
+    "jquery": "^3.4.1",
     "js-yaml": "~3.13",
     "mark.js": "~8.11",
     "merge-stream": "~2.0",
@@ -57,5 +57,8 @@
     "typeface-roboto-mono": "0.0.54",
     "vinyl-buffer": "~1.0",
     "vinyl-fs": "~3.0"
+  },
+  "dependencies": {
+    "jsdom": "^16.2.2"
   }
 }

preview-src/landing-page-core-concept.adoc

@@ -1,4 +1,4 @@
-= Couchbase Tutorials
+= Couchbase Core Concept
 :page-layout: landing-page-core-concept
 :page-role: tiles
 :!sectids:

preview-src/landing-page-sdk.adoc

@@ -0,0 +1,4 @@
+= Couchbase SDK
+:page-layout: landing-page-sdk
+:page-role: tiles
+:!sectids:

preview-src/landing-page-tutorials.adoc

@@ -0,0 +1,264 @@
+= Couchbase Tutorials
+:page-layout: landing-page-tutorials
+:page-role: tiles
+:!sectids:
+
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+<div data-level="advanced" data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
+<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+<div class="filter-info">
+<h5 >
+<img src="_/img/landing-page-icon/advanced-icon.svg" alt="" />
+Advanced</h5>
+<span data-role="advanced">Developer</span>
+</div>
+</div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+[.link]
+
+* xref:#[Lorem ipsum]
+* xref:#[Lorem ipsum]
+* xref:#[Lorem ipsum]
+
+[.box]
+[.component]
+
+.Component
+* Lorem ipsum
+* Lorem ipsum
+* Lorem ipsum
+
+[.box]
+[.languages]
+
+.Languages
+* Java
+* Swift
+* Javascript
+
+++++
+</div>
+++++
+
+
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+    <div data-level="intermediate" data-category="intermediate c# node Python devOps"  class="sub-heading two-column-heading">
+        <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+        <div class="filter-info">
+        <h5 >
+        <img src="_/img/landing-page-icon/intermediate-icon.svg" alt="" />
+        Intermediate</h5>
+        <span>DevOps</span>
+        </div>
+    </div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+
+* xref:#[Lorem ipsum]
+* xref:#[Lorem ipsum]
+
+
+[.box]
+.Component
+* Lorem ipsum
+
+[.box]
+.Languages
+* C#
+* Node
+* Python
+
+++++
+</div>
+++++
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+    <div data-level="intermediate" data-category="intermediate .net developer" class="sub-heading two-column-heading">
+        <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+        <div class="filter-info">
+        <h5 >
+        <img src="_/img/landing-page-icon/intermediate-icon.svg" alt="" />
+        Intermediate</h5>
+        <span>Developer</span>
+        </div>
+    </div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+
+* xref:#[Lorem ipsum]
+* xref:#[Lorem ipsum]
+
+
+[.box]
+.Component
+* Lorem ipsum
+* Lorem ipsum
+
+[.box]
+.Languages
+* .NET
+
+++++
+</div>
+++++
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+    <div data-level="beginner" data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
+        <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+        <div class="filter-info">
+        <h5 >
+        <img src="_/img/landing-page-icon/beginner-icon.svg" alt="" />
+        Beginner</h5>
+        <span>Architect</span>
+        </div>
+    </div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+
+* xref:#[Lorem ipsum]
+
+[.box]
+.Component
+* Lorem ipsum
+* Lorem ipsum
+* Lorem ipsum
+
+[.box]
+.Languages
+* AsciiDoc
+* Java
+* PHP
+
+++++
+</div>
+++++
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+    <div data-level="intermediate" data-category="intermediate react developer" class="sub-heading two-column-heading">
+        <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+        <div class="filter-info">
+        <h5 >
+        <img src="_/img/landing-page-icon/intermediate-icon.svg" alt="" />
+        Intermediate</h5>
+        <span>Developer</span>
+        </div>
+    </div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+
+* xref:#[Lorem ipsum]
+* xref:#[Lorem ipsum]
+
+[.box]
+.Component
+* Lorem ipsum
+* Lorem ipsum
+* Lorem ipsum
+
+[.box]
+.Languages
+* React
+
+++++
+</div>
+++++
+
+[.column]
+[.data-filter-column]
+====== {empty}
+++++
+    <div data-level="advanced" data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
+        <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
+        <div class="filter-info">
+        <h5 >
+        <img src="_/img/landing-page-icon/advanced-icon.svg" alt="" />
+        Advanced</h5>
+        <span>Architect</span>
+        </div>
+    </div>
+++++
+[.content]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligula imperdiet, et cursus lectus bibendum. Etiam metus magna, dapibus vitae ipsum vel, sollicitudin interdum metus. Phasellus quis rutrum enim. Vivamus euismod sem nec posuere accumsan. Praesent elementum lectus vitae magna pellentesque, a facilisis risus pulvinar. Donec scelerisque porttitor aliquet.
+
+++++
+<div class="other-info-list">
+++++
+
+[.box]
+
+* xref:#[Lorem ipsum]
+
+[.box]
+.Component
+* Lorem ipsum
+* Lorem ipsum
+* Lorem ipsum
+
+[.box]
+.Languages
+* Angular
+* React
+* Vue
+
+++++
+</div>
+++++

preview-src/landing-page.adoc

@@ -1,4 +1,4 @@
-= Couchbase Tutorials
+= Couchbase Adoc
 :page-layout: landing-page
 :page-role: tiles
 :!sectids:

src/css/body.css

@@ -3,7 +3,8 @@ 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 */
+  word-wrap: break-word;
+  /* IE only supports word-wrap, which is an alias of overflow-wrap */
 }
 
 /* A selector that could possibly be re-used */
@@ -55,3 +56,9 @@ aside.toc.sidebar {
     display: block;
   }
 }
+
+@media screen and (max-width: 767px) {
+  div.body {
+    margin-top: 5rem;
+  }
+}

src/css/doc.css

@@ -8,7 +8,7 @@
 .doc h4,
 .doc h5,
 .doc h6 {
-  font-weight: var(--weight-medium);
+  font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: 1.2;
   margin: 1.5rem 0 -0.25rem;
@@ -27,7 +27,7 @@
 }
 
 .doc h2 {
-  font-size: 1.875rem;
+  font-size: 2rem;
   margin: 2.25rem 0 2.5rem;
   max-width: fit-content;
   /* NOTE used to restrict width of key line */

src/css/is-this-helpful.css

@@ -21,14 +21,14 @@
   margin: 15px 0;
 }
 
-.is-this-helpful-box .btn-row .helpfull-btn {
+.is-this-helpful-box .btn-row .helpful-btn {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: var(--color-brand-gray4);
 }
 
-.is-this-helpful-box .btn-row .helpfull-btn:hover,
-.is-this-helpful-box .btn-row .helpfull-btn.active {
+.is-this-helpful-box .btn-row .helpful-btn:hover,
+.is-this-helpful-box .btn-row .helpful-btn.active {
   color: var(--color-brand-blue);
   text-decoration: none;
 }
@@ -44,7 +44,7 @@
   border-radius: 5px;
   border: 1px solid var(--color-brand-gray5);
   resize: vertical;
-  font-size: 1rem;
+  font-size: 0.875rem;
   color: var(--color-brand-gray4);
   font-family: "Source Sans Pro", sans-serif;
 }
@@ -98,6 +98,17 @@
   color: var(--color-brand-blue);
 }
 
+.toc .any-feedback a {
+  font-size: 0.875rem;
+  line-height: 20px;
+  text-decoration: none;
+  color: var(--color-brand-blue);
+  font-weight: var(--weight-normal);
+  margin-bottom: 15px;
+  display: inline-block;
+  width: 100%;
+}
+
 .is-this-helpful-box .action-btn-row .info-btn {
   font-size: 0.75rem;
   line-height: 0.75rem;