From: Sarah White <graphitefriction@gmail.com>
Date: Fri, 9 Feb 2018 20:12:36 +0000 (-0700)
Subject: improve listing, admonition, example block titles
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=559ccf368d3aa9c6e41944cf363f26777ddd05b4;p=eg-antora.git

improve listing, admonition, example block titles

- set margin to 0 on pre
- add example block content styles
---

diff --git a/preview-site-src/index.html b/preview-site-src/index.html
index 099aa71..d3a10cf 100644
--- a/preview-site-src/index.html
+++ b/preview-site-src/index.html
@@ -28,16 +28,23 @@ Eu mea inani iriure.</p>
   "scripts": {
     "test": "mocha",
     "lint": "eslint"
-  },
-  "main": "index.js",
-  "devDependencies": {
-    "eslint": "^4.7.2",
-    "mocha": "^3.5.3"
-  },
-  "license": "ISC"
 }</code></pre>
 </div>
 </div>
+<div class="listingblock">
+<div class="title">Example paragraph syntax</div>
+<div class="content">
+<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">.Optional title
+[example]
+This is an #example paragraph#.</code></pre>
+</div>
+</div>
+<div class="exampleblock">
+<div class="title">Optional title</div>
+<div class="content">
+This is an example paragraph.
+</div>
+</div>
 <div class="paragraph">
 <p>How about some code?</p>
 </div>
@@ -48,19 +55,7 @@ const browserify = require('browserify')
 const buffer = require('vinyl-buffer')
 const uglify = require('gulp-uglify')
 const tap = require('gulp-tap') <i class="conum" data-value="1"></i><b>(1)</b>
-
-gulp.task('js', () =&gt;
-  gulp
-    .src('js/vendor/*.js', { cwd: 'src', base: 'src', read: false })
-    .pipe(
-      tap((file) =&gt; {
-        file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
-      })
-    )
-    .pipe(buffer())
-    .pipe(uglify())
-    .pipe(gulp.dest('build'))
-)</code></pre>
+</code></pre>
 </div>
 </div>
 <div class="colist arabic">
@@ -92,14 +87,12 @@ src/
 <div class="paragraph">
 <p>Select <span class="menuseq"><b class="menu">File</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Open Project</b></span> to open the project in your IDE.
 Per ea solet civibus inimicus.
-Ferri tacimates constituam sed ex, eu mea munere vituperata constituam.
-No vel quem admodum, etiam possim voluptatum sed ei.
-Voluptua singulis pro ei, melius constituto consequuntur eos in, ei ius blandit albucius.</p>
+Ferri tacimates constituam sed ex, eu mea munere vituperata constituam.</p>
 </div>
 </div>
 </div>
-<div class="sect1">
-<h2 id="liber-recusabo"><a class="anchor" href="#liber-recusabo"></a>Liber recusabo</h2>
+<div class="sect2">
+<h3 id="liber-recusabo"><a class="anchor" href="#liber-recusabo"></a>Liber recusabo</h3>
 <div class="sectionbody">
 <div class="paragraph">
 <p>No sea, at invenire voluptaria mnesarchum has.
@@ -117,12 +110,6 @@ At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus
 <li>
 <p>lacus volutpat semper porttitor aliquet ornare primis nulla enim</p>
 </li>
-<li>
-<p>ultricies sociosqu tristique integer</p>
-</li>
-<li>
-<p>posuere curae pharetra rutrum adipiscing lectus est praesent</p>
-</li>
 </ol>
 </div>
 <div class="paragraph">
@@ -195,18 +182,6 @@ Ea mea agam graeci philosophia.</p>
 <td class="tableblock halign-left valign-top"><p class="tableblock">jscs</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">^2.3.5</p></td>
 </tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">jscs-preset-gulp</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">^1.0.0</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">mississippi</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">^1.2.0</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">mocha</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">^2.4.5</p></td>
-</tr>
 </tbody>
 </table>
 <div class="paragraph">
@@ -283,18 +258,6 @@ Eos suscipit scaevola at.</p>
 </tr>
 </table>
 </div>
-<div class="admonitionblock caution">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-caution" title="Caution"></i>
-</td>
-<td class="content">
-I wouldn&#8217;t try that either.
-</td>
-</tr>
-</table>
-</div>
 <div class="admonitionblock important">
 <table>
 <tr>
@@ -320,9 +283,9 @@ I wouldn&#8217;t try that either.
 <div class="paragraph">
 <p>If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command.</p>
 </div>
-<div class="literalblock">
+<div class="listingblock">
 <div class="content">
-<pre>$ npm i -g @antora/cli @antora/site-generator-default</pre>
+<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ npm i -g @antora/cli @antora/site-generator-default</code></pre>
 </div>
 </div>
 </td>
@@ -331,10 +294,9 @@ I wouldn&#8217;t try that either.
 </div>
 <div class="paragraph">
 <p>Nominavi luptatum eos, an vim hinc philosophia intellegebat.
-Lorem expetenda pertinacia et nec, wisi illud sonet qui ea.
-Eum an doctus maiestatis efficiantur.
 Eu mea inani iriure.</p>
 </div>
+<div class="sect1">
 <h2 id="voluptua-singulis" class="discrete">Voluptua singulis</h2>
 <div class="paragraph">
 <p>Cum dicat putant ne.
diff --git a/src/css/doc.css b/src/css/doc.css
index 10a28cd..60736a4 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -83,6 +83,7 @@
   font-size: 0.9rem;
   /* color: #000; */
   line-height: 1.5;
+  margin: 0;
 }
 
 .doc pre:not(.highlight),
@@ -283,7 +284,7 @@
   padding: 0.75em 1em;
 }
 
-.doc .admonitionblock td.content > div[class] {
+.doc .admonitionblock td.content > :first-child {
   margin: 0;
 }
 
@@ -375,8 +376,20 @@
 .doc .literalblock .title,
 .doc .listingblock .title {
   color: #4a4a4a;
-  padding-bottom: 0.15rem;
-  font-size: 0.85rem;
+  padding-bottom: 0.08rem;
+  font-size: 0.92rem;
+  font-style: italic;
+}
+
+.doc .admonitionblock .title + .paragraph {
+  margin-top: 0;
+}
+
+/* Other possible colors #248232 (dark green) #2ba84a (brighter green), #f7ef99 (soft yellow), #f78e69 (orangey-grayish) */
+.doc .exampleblock > .content {
+  background-color: #fff;
+  box-shadow: inset 0 0 2px #2ba84a;
+  padding: 0.75rem;
 }
 
 /* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */