From 4a749c9b51f078b5a08ff28c52d9eb72ffdfb071 Mon Sep 17 00:00:00 2001
From: Robert Young <robertyoungnz@gmail.com>
Date: Thu, 14 Aug 2025 16:39:46 +1200
Subject: [PATCH] Improve guide style

Aligns it more with the standalone asciidoc style, which has much nicer
margins/padding and a single pixel top border for main sections

Signed-off-by: Robert Young <robertyoungnz@gmail.com>
---
 _layouts/guide.html     |  2 +-
 _sass/kroxylicious.scss | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/_layouts/guide.html b/_layouts/guide.html
index 9496d40d..0c6921df 100644
--- a/_layouts/guide.html
+++ b/_layouts/guide.html
@@ -8,7 +8,7 @@
     This documentation covers a non-current version of Kroxylicious. The latest version is {{ site.data.kroxylicious.latestRelease }}.
 </div>
 {%- endif -%}
-<div class="row justify-content-center gx-0">
+<div class="row justify-content-center gx-0 kroxylicious-guide">
   <div class="col-lg-3">
     <div class="card shadow my-lg-5 ms-lg-5 me-1">
       <div class="card-body mx-2" role="navigation" aria-label="{{ page.title }} page navigation">
diff --git a/_sass/kroxylicious.scss b/_sass/kroxylicious.scss
index 5f42c0d0..5d7f70e9 100644
--- a/_sass/kroxylicious.scss
+++ b/_sass/kroxylicious.scss
@@ -161,7 +161,7 @@ a {
 // ensure padding for code blocks
 .highlight {
   text-wrap: wrap;
-  padding: 0.5em;
+  padding: 1rem;
   border-radius: 4px;
   margin-bottom: 0;
 }
@@ -307,10 +307,30 @@ b.conum * {
   pointer-events: none; /* Clicks will "pass through" the watermark */
 }
 
-.imageblock img {
+
+/* Kroxylicious Guide CSS Specializations */
+
+.kroxylicious-guide .imageblock img {
   max-width: 100%;
 }
 
-.listingblock {
+.kroxylicious-guide .listingblock {
+  margin-bottom: 0.75rem;
+}
+
+.kroxylicious-guide h2,h3,h4 {
+  margin-top: 1rem;
   margin-bottom: 0.75rem;
 }
+
+.kroxylicious-guide p, summary {
+  margin-bottom: 0.625rem;
+}
+
+.kroxylicious-guide .sect1 {
+  padding-bottom: 1.25rem;
+}
+
+.kroxylicious-guide .sect1+.sect1 {
+  border-top: 1px solid $kroxy-light;
+}