Improve display of AsciiDoc examples with titles (mmistakes#944)

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

@@ -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;