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 <[email protected]>

Author: robobario

_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">

_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;
+}