From 2ac87dd368db34f7ad825ec0361f827da69bd4db Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 24 Apr 2025 09:22:00 -0700
Subject: [PATCH 1/4] feat: Add styling to details tag

---
 assets/css/v2/style.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1f4694af..fc5a1852 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1014,6 +1014,21 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   align-items: flex-start;
 }
 
+/* Details/Summary */
+details summary {
+  color: oklch(var(--color-brand));
+  transition: text-decoration-color 0.15s ease-in-out;
+
+  & ~ * {
+    margin-top: 1rem;
+  }
+}
+
+details:hover {
+  cursor: pointer;
+  text-decoration-color: oklch(var(--color-brand) / 0.8);
+}
+
 /* Table of Contents */
 #TableOfContents {
   /* Close all TOC on sidebar */
@@ -1096,7 +1111,7 @@ h3:target,
 h4:target,
 h5:target,
 h6:target {
-  color: var(--color-brand);
+  color: oklch(var(--color-brand));
 
   .headerlink::before {
     display: block !important;

From 0f04985a0eb93babc404fc72feac21ed2f812de2 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Fri, 25 Apr 2025 08:05:44 -0700
Subject: [PATCH 2/4] feat: Added underline + example

---
 assets/css/v2/style.css                        | 2 ++
 exampleSite/content/test-product/everything.md | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index fc5a1852..935bdff0 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1018,6 +1018,8 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 details summary {
   color: oklch(var(--color-brand));
   transition: text-decoration-color 0.15s ease-in-out;
+  text-decoration: underline;
+  text-decoration-color: oklch(var(--color-brand) / 0.3);
 
   & ~ * {
     margin-top: 1rem;
diff --git a/exampleSite/content/test-product/everything.md b/exampleSite/content/test-product/everything.md
index 62d6d389..7ae34a05 100644
--- a/exampleSite/content/test-product/everything.md
+++ b/exampleSite/content/test-product/everything.md
@@ -64,3 +64,9 @@ This won't render anything.
 
 {{< see-also >}}See also!{{< /see-also >}}
 
+
+## details
+<details open>
+    <summary style="font-weight:bold;">Learn how to pin NGINX Plus to a specific version</summary>
+    And this is the content on how to do so.
+</details>
\ No newline at end of file

From 1ef1b3827f3994554de03535fa2e29c1542d40f5 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Mon, 28 Apr 2025 08:30:25 -0700
Subject: [PATCH 3/4] feat: Removed inline style in example

---
 exampleSite/content/test-product/everything.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/exampleSite/content/test-product/everything.md b/exampleSite/content/test-product/everything.md
index 7ae34a05..fd2e9467 100644
--- a/exampleSite/content/test-product/everything.md
+++ b/exampleSite/content/test-product/everything.md
@@ -67,6 +67,6 @@ This won't render anything.
 
 ## details
 <details open>
-    <summary style="font-weight:bold;">Learn how to pin NGINX Plus to a specific version</summary>
+    <summary>Learn how to pin NGINX Plus to a specific version</summary>
     And this is the content on how to do so.
 </details>
\ No newline at end of file

From b331dc79124ebc93a6fc26a50a6f99549bc0ddf7 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Mon, 28 Apr 2025 09:21:46 -0700
Subject: [PATCH 4/4] feat: Fixed hover color transition

---
 assets/css/v2/style.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 935bdff0..5d735812 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1026,9 +1026,12 @@ details summary {
   }
 }
 
+details summary:hover {
+  text-decoration-color: oklch(var(--color-brand) / 0.8);
+}
+
 details:hover {
   cursor: pointer;
-  text-decoration-color: oklch(var(--color-brand) / 0.8);
 }
 
 /* Table of Contents */