From 1a219abbe64c88096c5b9d44fe26ab8b99f911a8 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Thu, 24 Oct 2024 12:04:31 +0200
Subject: [PATCH] New class .bottom-cards

---
 preview-src/docs-ndl.adoc |  2 +-
 src/css/docs-ndl.css      | 52 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc
index 86a1699b..76610b16 100644
--- a/preview-src/docs-ndl.adoc
+++ b/preview-src/docs-ndl.adoc
@@ -199,7 +199,7 @@ xref:tutorials:index.adoc[All tutorials]
 --
 
 
-[.cards.icon-s.align-center]
+[.bottom-cards]
 == Other resources
 
 === Join forums and discussions
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index c749173d..6aa57b3d 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -352,7 +352,7 @@ body.docs-ndl .next-steps .sectionbody ul li div.paragraph {
 
 /* explainer */
 
-body.docs-ndl .cards .sectionbody > div.paragraph {
+body.docs-ndl .bottom-cards .sectionbody > div.paragraph body.docs-ndl .cards .sectionbody > div.paragraph {
   display: flex;
   flex: 0 1 100%;
 }
@@ -415,20 +415,24 @@ body.docs-ndl .banner .paragraph.description {
 
 /* selectable cards */
 
+body.docs-ndl .bottom-cards .sect2.selectable,
 body.docs-ndl .cards .sect2.selectable {
   cursor: pointer;
 }
 
+body.docs-ndl .bottom-cards .sect2.selectable a,
 body.docs-ndl .cards .sect2.selectable a {
   text-decoration: none;
 }
 
+body.docs-ndl .bottom-cards .sect2.selectable a:hover,
 body.docs-ndl .cards .sect2.selectable a:hover {
   transform: scale(1.02);
   transition: 0.1s linear;
   box-shadow: 0 4px 8px 0 rgba(12, 26, 37, 0.08);
 }
 
+body.docs-ndl .bottom-cards .sect2.selectable:hover div.description,
 body.docs-ndl .cards .sect2.selectable:hover div.description {
   text-decoration: underline;
 }
@@ -583,6 +587,11 @@ body.docs-ndl .sect2 {
   flex-direction: column;
 }
 
+body.docs-ndl .bottom-cards .sectionbody > div.sect2 {
+  flex: 0 1 49%;
+  /* margin-right: 1rem; */
+}
+
 body.docs-ndl .cards .sectionbody > div.sect2 {
   flex: 0 1 32%;
   /* margin-right: 1rem; */
@@ -592,6 +601,9 @@ body.docs-ndl.explainer .sectionbody > div.sect2 {
   flex: 0 1 49%;
 }
 
+body.docs-ndl .bottom-cards .sect2 > a,
+body.docs-ndl .bottom-cards .sect2.not-selectable,
+body.docs-ndl .bottom-cards:not(.selectable) .sect2,
 body.docs-ndl .cards .sect2 > a,
 body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
@@ -642,6 +654,9 @@ body.docs-ndl .header-label-container > div.labels {
   margin-left: auto;
 }
 
+body.docs-ndl .bottom-cards .sect2 > a,
+body.docs-ndl .bottom-cards .sect2.not-selectable,
+body.docs-ndl .bottom-cards:not(.selectable) .sect2,
 body.docs-ndl .cards .sect2 > a,
 body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
@@ -651,6 +666,7 @@ body.docs-ndl .widget:not(.video) {
   border-radius: 1rem;
 }
 
+body.docs-ndl .bottom-cards .sect2 > a,
 body.docs-ndl .cards .sect2 > a {
   color: var(--neutral-color);
   font-weight: var(--font-weight-normal);
@@ -662,11 +678,14 @@ body.docs-ndl.color-docs .sect2 {
   background: var(--color-docs);
 }
 
+body.docs-ndl.color-docs .bottom-cards .sect2 h3,
+body.docs-ndl.color-docs .bottom-cards .sect2 .description,
 body.docs-ndl.color-docs .cards .sect2 h3,
 body.docs-ndl.color-docs .cards .sect2 .description {
   color: rgba(var(--colors-neutral-10));
 }
 
+body.docs-ndl .bottom-cards .sect2 .paragraph,
 body.docs-ndl .cards .sect2 .paragraph {
   margin: 0;
 }
@@ -675,6 +694,8 @@ body.docs-ndl .cards .sect2 .paragraph {
   min-height: 200px;
 } */
 
+body.docs-ndl .bottom-cards .sect2 a > h3,
+body.docs-ndl .bottom-cards .sect2 a > div,
 body.docs-ndl .cards .sect2 a > h3,
 body.docs-ndl .cards .sect2 a > div {
   margin: 0;
@@ -687,6 +708,7 @@ body.docs-ndl .sect2 a > h3 {
   display: flex;
 }
 
+body.docs-ndl .bottom-cards .sect2 .icon,
 body.docs-ndl .cards .sect2 .icon,
 body.docs-ndl .widget .icon {
   padding: 0;
@@ -694,6 +716,7 @@ body.docs-ndl .widget .icon {
   width: 100%;
 }
 
+body.docs-ndl .bottom-cards .sect2 .icon,
 body.docs-ndl .cards .sect2 .icon,
 body.docs-ndl .widget.banner .icon {
   order: 1;
@@ -702,12 +725,14 @@ body.docs-ndl .widget.banner .icon {
   width: 100%;
 }
 
+body.docs-ndl .bottom-cards .sect2 .icon p,
 body.docs-ndl .cards .sect2 .icon p {
   display: flex;
   width: -webkit-fill-available;
   justify-content: space-between;
 }
 
+body.docs-ndl .bottom-cards .sect2 .icon p div.labels,
 body.docs-ndl .cards .sect2 .icon p div.labels {
   display: flex;
   flex-direction: row;
@@ -715,6 +740,7 @@ body.docs-ndl .cards .sect2 .icon p div.labels {
   height: min-content;
 }
 
+body.docs-ndl .bottom-cards .icon span,
 body.docs-ndl .cards .icon span {
   display: flex;
 }
@@ -733,17 +759,14 @@ body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
   /* margin-right:40px; */
 }
 
-/* For the bottom cards */
-body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody>div.sect2 {
-  flex: 0 0 49%;
-}
-
+body.docs-ndl body.docs-ndl .bottom-cards .sect2 .icon img,
 body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
   width: 4rem;
   height: 4rem;
   padding: 0;
 }
 
+body.docs-ndl .bottom-cards.icon-l .sect2 .icon img,
 body.docs-ndl .cards.icon-l .sect2 .icon img {
   width: 6rem;
   height: 6rem;
@@ -761,6 +784,7 @@ body.docs-ndl .lists .sect2 .icon img path {
   fill: rgba(var(--colors-baltic-30));
 }
 
+body.docs-ndl .bottom-cards .sect2 h3,
 body.docs-ndl .cards .sect2 h3,
 body.docs-ndl .lists .sect2 h3 {
   /* flex-grow: 1; */
@@ -770,10 +794,12 @@ body.docs-ndl .lists .sect2 h3 {
   width: -webkit-fill-available;
 }
 
+body.docs-ndl .bottom-cards .sect2 h3 .anchor::before,
 body.docs-ndl .cards .sect2 h3 .anchor::before {
   display: none;
 }
 
+body.docs-ndl .bottom-cards .sect2 .paragraph:not(.icon),
 body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
   font-size: var(--font-size-body-medium);
   line-height: 1.5;
@@ -791,20 +817,24 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
   /* flex-grow: 1; */
 }
 
+body.docs-ndl .bottom-cards .sect2.selectable .paragraph.link,
 body.docs-ndl .cards .sect2.selectable .paragraph.link {
   display: none;
 }
 
+body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link,
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
   margin-top: auto;
 }
 
+body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link a,
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link a {
   font-weight: 500;
   margin-right: 1rem;
   /* text-decoration: none; */
 }
 
+body.docs-ndl .bottom-cards .sect2 .paragraph.category,
 body.docs-ndl .cards .sect2 .paragraph.category {
   display: none;
 }
@@ -822,6 +852,7 @@ body.docs-ndl .highlights a {
 }
 
 body.docs-ndl .highlights a::after,
+body.docs-ndl .bottom-cards .link a::after,
 body.docs-ndl .cards .link a::after {
   margin-left: 0.5rem;
   content: "→";
@@ -837,6 +868,7 @@ body.docs-ndl .highlights a::after {
   float: right;
 }
 
+body.docs-ndl .bottom-cards .sect2 .ulist,
 body.docs-ndl .cards .sect2 .ulist {
   display: inline-flex;
   order: 4;
@@ -846,10 +878,12 @@ body.docs-ndl .cards .sect2 .ulist {
   text-align: left;
 }
 
+body.docs-ndl .bottom-cards .sect2 .ulist ul,
 body.docs-ndl .cards .sect2 .ulist ul {
   padding: 0;
 }
 
+body.docs-ndl .bottom-cards .sect2 .ulist ul li,
 body.docs-ndl .cards .sect2 .ulist ul li {
   list-style-type: none;
   margin: 0.5rem 0 0;
@@ -876,10 +910,12 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     z-index: 30;
   }
 
+  body.docs-ndl .bottom-cards .sectionbody > div.sect2,
   body.docs-ndl .cards .sectionbody > div.sect2 {
     flex: 0 1 49%;
   }
 
+  body.docs-ndl.explainer .bottom-cards .sect2 h3,
   body.docs-ndl.explainer .cards .sect2 h3 {
     text-align: left;
   }
@@ -940,19 +976,23 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     margin: 1rem auto;
   }
 
+  body.docs-ndl .bottom-cards .sect2 > a,
   body.docs-ndl .cards .sect2 > a {
     align-items: center;
   }
 
+  body.docs-ndl.explainer .bottom-cards .sect2 > a,
   body.docs-ndl.explainer .cards .sect2 > a {
     align-items: flex-start;
     padding: 1rem;
   }
 
+  body.docs-ndl.explainer .bottom-cards .sect2 .paragraph:not(.icon),
   body.docs-ndl.explainer .cards .sect2 .paragraph:not(.icon) {
     text-align: left;
   }
 
+  body.docs-ndl .bottom-cards .sectionbody > div.sect2,
   body.docs-ndl .cards .sectionbody > div.sect2 {
     /* min-width: 90%; */
     flex: 1 1 100%;