Add a dark background card for eg NODES promo

Author: recrwplay

preview-src/docs-ndl.adoc

@@ -9,6 +9,18 @@
 [.cards.icon-l]
 == CTA cards
 
+[.dark.nodes.selectable]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
 
 [.featured.label--featured]
 === Deployment options

preview-src/docs-sub-hub.adoc

@@ -24,6 +24,20 @@ endif::[]
 This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph.
 
 
+[.dark.nodes]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
+
+
 [role=label--new-5.12]
 === `LOAD CSV`
 [.icon]

src/css/docs-ndl.css

@@ -478,7 +478,7 @@ body.docs-ndl .cards .sect2 > a,
 body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
 body.docs-ndl .lists .sect2 {
-  overflow: hidden;
+  /* overflow: hidden; */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -487,8 +487,21 @@ body.docs-ndl .lists .sect2 {
   /* justify-content: space-between; */
   gap: 1rem;
   /* min-width: 30%; */
-  padding: 1rem;
+  /* padding: 1rem; */
   /* margin: 0 1rem 1rem 0; */
+  /* background: var(--color-white); */
+}
+
+body.docs-ndl .cards .sect2.selectable > a,
+body.docs-ndl .cards .sect2.not-selectable,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.selectable),
+body.docs-ndl .lists .sect2 {
+  padding: 1rem;
+}
+
+body.docs-ndl .cards .sect2.not-selectable:not(.dark),
+body.docs-ndl .cards .sect2:not(.dark) a,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.dark) {
   background: var(--color-white);
 }
 
@@ -498,6 +511,24 @@ body.docs-ndl .lists .sect2 {
 - graph-academy
 */
 
+body.docs-ndl .cards .sectionbody > div.sect2.dark a {
+  background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg);
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-color: var(--color-black);
+  color: var(--color-white);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+body.docs-ndl .cards .sect2.dark h3 {
+  color: var(--color-white);
+}
+
+body.docs-ndl .cards .sect2.nodes .icon img {
+  width: 12rem;
+}
+
 /* this would give a background image on cards marked with [.ga-promo] */
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy > a,
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy:not(.selectable) {

src/js/70-docs-ndl.js

@@ -7,8 +7,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  var makeClickable = function (card) {
-    var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+  var makeClickable = function (cards) {
+    var links
+    if (cards.classList.contains('selectable')) {
+      links = cards.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+    } else {
+      links = cards.querySelectorAll('div.sect2.selectable div.link')
+    }
+
     links.forEach(function (link) {
       var target = link.querySelector('a').getAttribute('href')
       var card = link.parentElement
@@ -44,7 +50,7 @@ document.addEventListener('DOMContentLoaded', function () {
   })
 
   // Add links to cards
-  document.querySelectorAll('.cards.selectable')
+  document.querySelectorAll('.cards')
     .forEach(makeClickable)
 
   // Move labels to the icon div to position them