fix: remove whitespace shortcode

assets/scss/components/_details.scss

@@ -2,51 +2,54 @@ details {
   display: block;
   border: 1px solid $gray-300;
   border-radius: 4px;
-  padding: 0.5rem 0.5rem 0;
+  padding: 0.5rem 1rem 0;
   margin: 0.5rem 0;
 }
 
-summary {
+/*
+details summary {
   &::marker {
     content: "";
   }
 }
+*/
 
-details summary {
-  display: inline-block;
-  width: calc(100% + 1rem);
-  margin: -0.5rem -0.5rem 0;
-  padding: 0.5rem;
+summary {
+  list-style: none;
+  display: inline;
+  width: calc(100% + 2rem);
+  margin: -0.5rem -1rem 0;
+  padding: 0.5rem 0.75rem;
 }
 
-details summary:hover {
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:hover {
   background: $gray-100;
 }
 
-/*
-details > summary:first-of-type {
-  display: inline-block;
-}
-*/
-
 details summary::before {
   display: inline-block;
   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform 0.35s ease;
   transform-origin: center center;
-  margin-right: 0.125rem;
+  margin-right: 0.375rem;
 }
 
 details[open] > summary::before {
   transform: rotate(90deg);
 }
 
+/*
 details summary > * {
-  display: inline;
+  display: inline-block;
 }
+*/
 
 details[open] {
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
 }
 
 details[open] > summary {
@@ -57,7 +60,7 @@ details[open] > summary {
 details h2,
 details h3,
 details h4 {
-  margin: 0 0 1rem;
+  margin: 1rem 0 0.5rem;
 }
 
 details p:last-child {

config/postcss.config.js

@@ -26,7 +26,6 @@ module.exports = {
           './assets/scss/components/_alerts.scss',
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
-          './assets/scss/components/_details.scss',
           './assets/scss/components/_diagrams.scss',
           './assets/scss/components/_syntax.scss',
           './assets/scss/components/_search.scss',

content/en/docs/prologue/introduction.md

@@ -50,6 +50,8 @@ Doks is a Hugo theme for building secure, fast, and SEO-ready documentation webs
 
 {{< details "Headings" >}}
 
+Paragraph before heading.
+
 ## Heading 2
 
 Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.

layouts/shortcodes/details.html

@@ -1,6 +1,4 @@
 <details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
-  <summary>
-    {{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }}
-  </summary>
+  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
   {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
 </details>