Fixes to links alignment and clickable area of selectable cards

Author: lidiazuin

preview-src/docs-ndl.adoc

@@ -24,21 +24,24 @@ Learn more about graph databases and start working with your data using Neo4j to
 xref:tutorials:index.adoc[Get started]
 --
 
-[.cards.icon-l]
+[.cards.selectable]
 == CTA cards
 
 [.featured.label--featured]
 === Deployment options
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/deployment-options.svg[]
 
 [.description]
-Choose from self-managed local and cloud deployments, or fully-managed options. See how to run Neo4j on Docker or Kubernetes.
+Choose from self-managed local and cloud deployments, or fully-managed options.
+
+[.link]
+link:https://www.neo4j.com/docs/deployment-options[Get a Neo4j instance]
 
 === Cypher
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/cypher-manual.svg[]
 
 [.description]
@@ -49,18 +52,18 @@ link:https://www.neo4j.com/docs/cypher-manual/[Query your data]
 
 === Neo4j Tools
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/neo4j-tools.svg[]
 
 [.description]
 Use Neo4j's tools to explore, visualize, manage, monitor, and import data to your graph.
 
 [.link]
-xref:tools:index.adoc[Discover the products]
+link:https://www.neo4j.com/docs/tools[Discover the products]
 
 === Graph Data Science
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/data-science.svg[]
 
 [.description]
@@ -71,7 +74,7 @@ xref:gds:index.adoc[Unlock insights from data]
 
 === Create applications
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/create-applications.svg[]
 
 [.description]
@@ -82,7 +85,7 @@ xref:create-applications:index.adoc[Start developing]
 
 === Connect data sources
 
-[.icon]
+[.icon.icon-l]
 image:icons/ndl/connectors.svg[]
 
 [.description]
@@ -217,7 +220,7 @@ link:https://discord.com/invite/neo4j[Discord]
 image:icons/ndl/icon-developercenter.svg[]
 
 [.link]
-link:https://neo4j.com/developer-blog/[Developer blog] link:https://www.neo4.com/docs/reference/resources[Other resources]
+link:https://neo4j.com/developer-blog/[Developer blog] link:https://www.neo4j.com/docs/reference/resources[Other resources]
 
 
 

src/css/doc.css

@@ -174,7 +174,7 @@ body {
 
 .doc a,
 .tooltip-body a {
-  font-weight: 600;
+  font-weight: 400;
   color: var(--link-font-color);
 }
 

src/css/docs-ndl.css

@@ -219,7 +219,6 @@ body.docs-ndl .widget .sectionbody {
   row-gap: 0;
   justify-content: center;
   align-content: center;
-  border: 1px solid var(--panel-border-color);
 }
 
 body.docs-ndl .widget.lists .sectionbody {
@@ -405,6 +404,7 @@ body.docs-ndl .paragraph.caption {
   font-family: var(--header-font-family);
   font-size: var(--doc-font-size-h2);
   font-weight: var(--font-weight-normal);
+  letter-spacing: 0.25px;
 }
 
 body.docs-ndl .paragraph.footer-link {
@@ -435,18 +435,17 @@ body.docs-ndl .cards .sect2.selectable {
   cursor: pointer;
 }
 
-body.docs-ndl .cards .sect2.selectable a {
-  text-decoration: none;
+body.docs-ndl .cards .sect2.selectable .description {
+  color: var(--doc-font-color);
+  font-weight: 200;
 }
 
-body.docs-ndl .cards .sect2.selectable a:hover {
-  transition: 0.1s linear;
-  border: 1px solid var(--page-version-missing-font-color);
-  box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
+body.docs-ndl .cards .sect2.selectable a {
+  text-decoration: solid;
 }
 
 body.docs-ndl .cards .sect2.selectable:hover div.description {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 /* banner */
@@ -609,22 +608,12 @@ body.docs-ndl .lists .sect2 {
   /* justify-content: space-between; */
   gap: 8px;
   /* min-width: 30%; */
-  padding: 1rem;
+  padding: 24px;
   background: var(--color-white);
   line-height: 2rem;
 }
 
-body.docs-ndl .cards .sect2 a::before,
-body.docs-ndl .cards:not(.selectable) .sect2 a::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-body.docs-ndl .cards:not(.selectable) .sect2:hover {
+body.docs-ndl .cards.selectable .sect2:hover {
   transition: 0.1s linear;
   border: 1px solid var(--page-version-missing-font-color);
   box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
@@ -651,11 +640,12 @@ body.docs-ndl .cards .sectionbody > div.sect2.labs:not(.selectable) {
 }
 
 body.docs-ndl .cards .sectionbody > div.sect2.featured > a,
+body.docs-ndl .cards .sectionbody > div.sect2.featured,
+body.docs-ndl .cards.selectable .sectionbody > div.sect2.featured,
 body.docs-ndl .cards .sectionbody > div.sect2.featured:not(.selectable) {
   border: 1px solid var(--success-color);
   box-shadow: 0 2px 4px 0 rgba(63, 120, 36, 0.5), 0 1px 2px 0 rgba(63, 120, 36, 0.2);
 }
-
 /* add a labs label to a title in a card */
 body.docs-ndl .header-label-container > div.labels {
   display: inline-flex;
@@ -754,7 +744,7 @@ body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
   padding: 0;
 }
 
-body.docs-ndl .cards.icon-l .sect2 .icon img {
+body.docs-ndl .cards .sect2 .icon.icon-l img {
   width: 6rem;
   height: 6rem;
   margin-bottom: 9px;
@@ -803,13 +793,14 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
 }
 
 body.docs-ndl .cards .sect2.selectable .paragraph.link {
-  display: none;
+  display: flex;
 }
 
+body.docs-ndl .cards.selectable .sect2 .paragraph.link,
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
   box-sizing: border-box;
-  margin-top: 30px;
-  margin-bottom: 9px;
+  padding-top: 30px;
+  margin-top: auto;
 }
 
 body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link {
@@ -818,7 +809,7 @@ body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link {
 }
 
 body.docs-ndl .cards .sect2 .paragraph.category {
-  display: none;
+  display: flex;
 }
 
 body.docs-ndl .plain-links a.external::after {