From 9ff0e8e950b593324f0744218b5ed3af9d2b0d79 Mon Sep 17 00:00:00 2001
From: Neil Dewhurst <neil.dewhurst@neo4j.com>
Date: Mon, 28 Oct 2024 12:51:08 +0000
Subject: [PATCH] Tweak icon and list spacing (#275)

Adjusts padding and alignment for the highlights widget, bringing better
symmetry between the two layouts.
---
 src/css/docs-ndl.css | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 88526834..39476835 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -207,8 +207,14 @@ body.docs-ndl .widget .sectionbody {
   border-radius: 1rem;
   border: none;
   padding: 1rem;
+  column-gap: 0;
   row-gap: 0;
-  column-gap: 2rem;
+  justify-content: center;
+  align-content: center;
+}
+
+body.docs-ndl .widget.lists .sectionbody {
+  justify-content: space-between;
 }
 
 body.docs-ndl .widget.banner .sectionbody {
@@ -498,25 +504,21 @@ body.docs-ndl .banner .button {
 
 /* highlights */
 
-body.docs-ndl .highlights .sectionbody > div.openblock {
-  flex: 1 1 40%;
-}
-
-body.docs-ndl .highlights .sectionbody > div.icon {
-  flex: 0 1 52%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 4rem;
-  padding-right: 5.438rem;
+body.docs-ndl .highlights .sectionbody > div {
+  flex: 0 1 50%;
+  justify-content: center;
   align-self: center;
+  padding: 1rem 2rem 1rem;
 }
 
 body.docs-ndl .highlights .sectionbody > div.icon span.image {
   display: flex;
+  justify-content: center;
 }
 
-body.docs-ndl .highlights .list {
-  padding-left: 1rem;
+body.docs-ndl .highlights .list,
+body.docs-ndl .highlights .caption {
+  padding-left: 0;
 }
 
 body.docs-ndl .highlights .list ul li {
@@ -689,7 +691,7 @@ body.docs-ndl .cards .sect2 a > div {
 body.docs-ndl .highlights .sectionbody > div,
 body.docs-ndl .sect2 a > div,
 body.docs-ndl .sect2 a > h3 {
-  display: flex;
+  display: flow;
 }
 
 body.docs-ndl .cards .sect2 .icon,
@@ -724,19 +726,15 @@ body.docs-ndl .cards .icon span {
   display: flex;
 }
 
-body.docs-ndl .widget.highlights .icon {
-  padding: 2rem;
-}
-
 /* For the 1st, 3rd etc highlights, move the image to the right */
 body.docs-ndl .widget.highlights:nth-of-type(odd) .icon {
   order: 1;
 }
 
 /* We can use this rule to apply styles to the 2nd, 4th highlights etc widget */
-body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
-  /* margin-right:40px; */
-}
+/* body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
+  margin-right:40px;
+} */
 
 body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
   width: 4rem;