Leftnav fixes, dark mode improvements, hero banner (#71)

* Left Nav Improvements

This should fix a visual issue when using some new types of nav elements

* Dark mode cards improvements

Also, this includes styles for the new Hero blocks

* Added identation to a specific type of link

* Hero block background updates

The hero backgrounds has been replaced with SVG files.

Also, the params has been changed, instead of using numbers, you can now use:

* default
* alternative
* astra
* dse
* luna

* Fix cards (box shadow)

* Add Hero block instructions

* Fix card shadow

* Fix card text color

* Remove toolbar and title when heroBlock

* Fix heroBlock error in firefox

* clean up repo

---------

Co-authored-by: Kenni Martínez <57879404+KenniM@users.noreply.github.com>
Co-authored-by: Francisco Suarez <3216883330506@ingenieria.usac.edu.gt>
Co-authored-by: Eric Schneider <37347760+eric-schneider@users.noreply.github.com>

.gitignore

@@ -1,4 +1,5 @@
 build/
+gcx/build/
 node_modules/
 public/
-
+.DS_store

README.adoc

@@ -400,6 +400,65 @@ CAUTION: If you do not check this box, then the release is immediately promoted
 
 . Update the `:current-release:` attribute in the header of this README to reference the tag of the latest bundle (if it is not pre-release), then commit that update to the repository.
 
+== Hero block
+There are two files that need to be updated in order to include the hero block in a page
+
+* helios-gcs-heroBlock.css
+* The .adoc file you want to add the hero block
+
+=== Define Background css
+
+. To define the hero block background, it needs to be done in the `helios-gcs-heroBlock.css` file located under /gcx/styles/src/css/  path
+. It requires to set the class identifier name/value and the path to the background image which can be an svg file.
+. The class identifier name/value would be any meaningful value you would like to use to identify the background image.
+.. The identifier name will be used to reference the background image in the .adoc where the hero will be setup.
+.. If the identifier name is not defined, it will use the default setup image.
+
+For the below code portion .dsHeroBlock, .dsHeroBlock[data-banner="default"] would be the default image to set in case no identifier or "default" identifier is set
+-----
+.dsHeroBlock,
+.dsHeroBlock[data-banner="default"] {
+    background-image: url('../img/hero-banner-1.svg');
+    background-size: cover;
+    color: white;
+    font-family: 'Roboto', sans-serif;
+  }
+-----
+
+To set a specific background image, it will be done by setting the identifier value and the image path
+----
+.dsHeroBlock[data-banner="alternative"]{
+  background-image: url('../img/hero-banner-2.svg');
+}
+----
+
+=== Define the hero block in a .adoc file
+The structure to set a hero block in an `.adoc` file is as shown in the code block below. This will add the hero block to the top of the page which will have a background, title, content.
+
+. Hero Block background (class="dsHeroBlock")
+.. This is set by adding `<div class="dsHeroBlock" data-banner="alternative">` where the "data-banner identifier will be the name especified for the image in the `helios-gcs-heroBlock.css`  file.
+. [.hero.title]
+.. This tag is used to set the hero banner title
+. [.hero.content]
+.. This tag is used to set the hero banner content under the title.
+
+----
+++++
+<div class="dsHeroBlock" data-banner="alternative">
+++++
+
+[.hero.title]
+Documentation Home
+
+[.hero.content]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
+
+++++
+</div>
+++++
+----
+
+
 == Copyright and license
 
 === Antora Default UI

gcx/styles/src/css/helios-gcx-body.css

@@ -44,7 +44,7 @@
 }
 
 .dark-mode .landing-card .content {
-    color: var(--color-black)
+    color: var(--color-white)
 }
 
 .full-articles {
@@ -141,6 +141,10 @@
     width: 100%;
 }
 
+.dark-mode .doc .sidebarblock {
+    background: var(--color-purple-700);
+}
+
 .doc {
     color: var(--color-black);
 }
@@ -226,7 +230,7 @@ main > .content {
         max-width: 43%!important;
     }
 }
-    
+
 @media screen and (max-width: 767px) {
     article.doc .center{
         max-width: 100%!important;

gcx/styles/src/css/helios-gcx-heroBlock.css

@@ -0,0 +1,49 @@
+.dsHeroBlock,
+.dsHeroBlock[data-banner="default"] {
+    background-image: url('../img/hero-banner-1.svg');
+    background-size: cover;
+    color: white;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  .dsHeroBlock[data-banner="alternative"]{
+    background-image: url('../img/hero-banner-2.svg');
+  }
+
+  .dsHeroBlock[data-banner="astra"]{
+    background-image: url('../img/hero-banner-3-Astra.svg');
+  }
+
+  .dsHeroBlock[data-banner="dse"]{
+    background-image: url('../img/hero-banner-4-DSE.svg');
+  }
+
+  .dsHeroBlock[data-banner="luna"]{
+    background-image: url('../img/hero-banner-5-Luna.svg');
+  }
+
+
+  .toolbar:has(~ .content .dsHeroBlock),
+  h1.page:has(~ #preamble .dsHeroBlock) {
+    visibility: hidden;
+  }
+
+  .toolbar:has(~ .dsHeroBlock),
+  .dsHeroBlock + .content h1.page {
+    display: none;
+  }  
+
+  .dsHeroContent {
+    padding: 72px 60px;
+    width: 50%;
+  }
+
+  .dsHeroTitle h1 {
+    font-weight: 400;
+  }
+
+  @media screen and (max-width: 820px) {
+    .dsHeroContent {
+        width: 100%;
+      }
+  }

gcx/styles/src/css/helios-gcx-links.css

@@ -40,11 +40,11 @@
 }
 
 .dark-mode .sidebarblock a.xref.page{
-    color: var(--black);
+    color: var(--color-white);
 }
 
 .dark-mode .sidebarblock a{
-    color: var(--black)!important;
+    color: var(--color-white)!important;
 }
 
 .doc .admonitionblock.caution a {

gcx/styles/src/css/helios-gcx-sidebar.css

@@ -446,6 +446,9 @@ label.collapse_label:after {
     color: #fff;
 }
 
+li.nav-item.toggler.is-active[data-depth="1"] .nav-text{
+    padding: 8px 0px 8px 90px;
+}
 
 .dark-mode li.nav-item.toggler.is-active[data-depth="1"] .nav-text {
     color: var(--white);
@@ -495,7 +498,7 @@ label.collapse_label:after {
 
 
 .dark-mode li.nav-item.toggler.is-active[data-depth="2"] .nav-text {
-    color: #fff;
+    color: #fff; 
 }
 
 

gcx/styles/src/css/helios-gcx-titles.css

@@ -59,7 +59,7 @@
 }
 
 .dark-mode .doc .sidebarblock>.content>.title{
-    color: var(--black);
+    color: var(--white);
 }
 
 

gcx/styles/src/js/08-gcx-helios.js

@@ -134,4 +134,29 @@ document.querySelectorAll(".nav-item> span.nav-text").forEach(function (item) {
   item.addEventListener("click", function (event) {
     item.parentElement.classList.toggle("is-active");
   })
-})
+})
+
+var heroBlock = document.querySelector('.dsHeroBlock')
+var heroTitle = document.querySelector('.paragraph.hero.title p').innerHTML
+var heroContent = document.querySelector('.paragraph.hero.content p').innerHTML
+
+var heroHTML = `<div class="dsHeroContent">
+  <div class="dsHeroTitle">
+    <h1> ${heroTitle} </h1>
+  </div>
+  <div class="dsHeroDescription">
+    <p> ${heroContent} </p>
+  </div>
+</div>`
+
+document.querySelector('.dsHeroBlock').remove()
+
+if (heroBlock) {
+  var target = document.querySelector('main.article')
+  target.insertBefore(heroBlock, target.children[1])
+
+  /* fallback for firefox :has pseudo-class */
+  document.querySelector('.dsHeroBlock').innerHTML = heroHTML
+  document.querySelector('.toolbar').style.display = 'none'
+  document.querySelector('h1.page').style.display = 'none'
+}