Adding Neils changes to the PR

Author: lidiazuin

preview-src/docs-ndl.adoc

@@ -199,7 +199,7 @@ xref:tutorials:index.adoc[All tutorials]
 --
 
 
-[.bottom-cards]
+[.cards.bottom-cards]
 == Other resources
 
 === Join forums and discussions

src/css/docs-ndl.css

@@ -352,7 +352,7 @@ body.docs-ndl .next-steps .sectionbody ul li div.paragraph {
 
 /* explainer */
 
-body.docs-ndl .bottom-cards .sectionbody > div.paragraph body.docs-ndl .cards .sectionbody > div.paragraph {
+body.docs-ndl .cards .sectionbody > div.paragraph {
   display: flex;
   flex: 0 1 100%;
 }
@@ -415,24 +415,20 @@ 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;
 }
@@ -587,23 +583,20 @@ 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; */
 }
 
+body.docs-ndl .cards.bottom-cards .sectionbody > div.sect2 {
+  flex: 0 1 49%;
+}
+  /* margin-right: 1rem; */
+
 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,
@@ -654,9 +647,6 @@ 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,
@@ -666,7 +656,6 @@ 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);
@@ -678,14 +667,11 @@ 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;
 }
@@ -694,8 +680,6 @@ 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;
@@ -708,15 +692,13 @@ 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;
   margin: 0;
   width: 100%;
 }
 
-body.docs-ndl .bottom-cards .sect2 .icon,
 body.docs-ndl .cards .sect2 .icon,
 body.docs-ndl .widget.banner .icon {
   order: 1;
@@ -725,22 +707,19 @@ 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;
   gap: 0.25rem;
   height: min-content;
 }
 
-body.docs-ndl .bottom-cards .icon span,
 body.docs-ndl .cards .icon span {
   display: flex;
 }
@@ -759,14 +738,12 @@ body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
   /* margin-right:40px; */
 }
 
-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;
@@ -784,7 +761,6 @@ 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; */
@@ -794,12 +770,10 @@ 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;
@@ -817,24 +791,20 @@ 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;
 }
@@ -852,7 +822,6 @@ 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: "→";
@@ -868,7 +837,6 @@ 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;
@@ -878,12 +846,10 @@ 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;
@@ -910,12 +876,10 @@ 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;
   }
@@ -981,18 +945,16 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     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.bottom-cards .sectionbody > div.sect2,
   body.docs-ndl .cards .sectionbody > div.sect2 {
     /* min-width: 90%; */
     flex: 1 1 100%;