From e03483d8eda6f9ecc0d0b9b3c75fc77a99def32b Mon Sep 17 00:00:00 2001
From: Alyssa Ross <hi@alyssa.is>
Date: Wed, 7 Sep 2022 05:15:05 +0000
Subject: [PATCH] Improve display of AsciiDoc examples with titles (#944)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The jekyll-asciidoc plugin will take AsciiDoc markup like this:

	.A method that returns the string "Hello, world"
	[example]
	[source,ruby]
	----
	def hello
	  "Hello, world"
	end
	----

And produce HTML like this (syntax highlighting disabled):

	<div class="listingblock">
	  <div class="title">A method that returns the string "Hello, world"</div>
	  <div class="content">
	    <pre class="highlight"><code class="language-ruby" data-lang="ruby">def hello
	  "Hello, world"
	end</code></pre>
	  </div>
	</div>

Previously, because we were applying code block styling to the whole
listingblock, the title would be rendered as normal body text, inside
the code block, which did not look good.  With this change, it will
instead be rendered similarly to a Just The Docs rendered example —
the title will appear where the rendered example usually would.

Co-authored-by: Matt Wang <matt@matthewwang.me>
---
 _sass/code.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index acbade5e..384ef97f 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -48,7 +48,7 @@ a:visited code {
 
 // ```[LANG]...```
 div.highlighter-rouge,
-div.listingblock {
+div.listingblock > div.content {
   padding: $sp-3;
   margin-top: 0;
   margin-bottom: $sp-3;
@@ -119,7 +119,8 @@ figure.highlight {
 // Code examples (rendered)
 //
 
-.code-example {
+.code-example,
+.listingblock > .title {
   padding: $sp-3;
   margin-bottom: $sp-3;
   overflow: auto;
@@ -128,6 +129,7 @@ figure.highlight {
 
   + .highlighter-rouge,
   + .sectionbody .listingblock,
+  + .content,
   + figure.highlight {
     position: relative;
     margin-top: -$sp-4;
-- 
GitLab