From fb34e7a2f7426ce13b0e3e5a7f7aa0f7de0bb421 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Sun, 21 Apr 2024 23:23:00 -0700
Subject: [PATCH] Fix Nextra margin-top in nested lists (#2686)

Before:

<img width="846" alt="image"
src="https://github.com/WATonomous/infra-config/assets/5977478/965bf0bb-d26b-40fa-a9ac-4a959b78b4f8">


After:

<img width="845" alt="image"
src="https://github.com/WATonomous/infra-config/assets/5977478/d7dcc120-e891-4a2a-aa6d-28a70a705717">


The problem is that by default, Nextra applies `first:nx-mt-0` on
`:first-child`. But in some cases (as shown above), the nested list is
not the first child. In the example above, the first child is the `a`
tag:

<img width="1413" alt="image"
src="https://github.com/WATonomous/infra-config/assets/5977478/e3e326b2-f8c1-47bb-8678-808b61262b03">

The fix is to use `:first-of-type` instead.

Related: https://github.com/shuding/nextra/issues/863
---
 styles/global.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/styles/global.css b/styles/global.css
index 7ce75b2..d0cebf5 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -123,3 +123,10 @@ select:focus,
 textarea {
   font-size: 16px;
 }
+
+
+/* Fix margin issue for nested lists: https://github.com/shuding/nextra/issues/863#issuecomment-2068517369 */
+li > ul.first\:nx-mt-0:first-of-type,
+li > ol.first\:nx-mt-0:first-of-type {
+  margin-top: 0;
+}