add CSS and sample content for article

- add sample content for testing article styles
- add CSS to style article

diff --git a/preview-site-src/index.html b/preview-site-src/index.html
index be17d40..e149f2f 100644 (file)
--- a/preview-site-src/index.html
+++ b/preview-site-src/index.html
@@ -1 +1,289 @@
-<p>Write me.</p>
+<div id="preamble">
+<div class="sectionbody">
+<div class="paragraph">
+<p>Platonem complectitur mediocritatem ea eos.
+Ei nonumy deseruisse ius.
+Mel id omnes verear.
+Vis no velit audiam, sonet <a href="#dependencies">praesent</a> eum ne.
+<strong>Prompta eripuit</strong> nec ad.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="cu-solet"><a class="anchor" href="#cu-solet"></a>Cu solet</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Nominavi luptatum eos, an vim hinc philosophia intellegebat.
+Lorem <code>expetenda</code> pertinacia et nec, wisi illud sonet qui ea.
+Eum an doctus <a href="#">maiestatis efficiantur</a>.
+Eu mea inani iriure.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
+  "name": "module-name",
+  "version": "10.0.1",
+  "description": "An example module to illustrate the usage of package.json",
+  "author": "Author Name &lt;author@example.com&gt;",
+  "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="paragraph">
+<p>How about some code?</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">const gulp = require('gulp')
+const browserify = require('browserify')
+const buffer = require('vinyl-buffer')
+const uglify = require('gulp-uglify')
+const tap = require('gulp-tap')
+
+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>
+</div>
+</div>
+<div class="paragraph">
+<p>Cum dicat putant ne.
+Est in reque homero principes, meis deleniti mediocrem ad has.
+Altera atomorum his ex, has cu elitr melius propriae.
+Eos suscipit scaevola at.</p>
+</div>
+<div class="literalblock">
+<div class="content">
+<pre>pom.xml
+src/
+  main/
+    java/
+      HelloWorld.java
+  test/
+    java/
+      HelloWorldTest.java</pre>
+</div>
+</div>
+<div class="paragraph">
+<p>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>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="liber-recusabo"><a class="anchor" href="#liber-recusabo"></a>Liber recusabo</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>No sea, at invenire voluptaria mnesarchum has.
+Ex nam suas nemore dignissim, vel apeirian democritum et.
+Natum facilisis theophrastus an duo.
+At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>potenti donec cubilia tincidunt</p>
+</li>
+<li>
+<p>etiam pulvinar inceptos velit quisque aptent himenaeos</p>
+</li>
+<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">
+<p>Eu sed antiopam gloriatur.
+Ea mea agam graeci philosophia.
+Vis veri graeci legimus ad.</p>
+</div>
+<table id="dependencies" class="tableblock frame-all grid-all">
+<colgroup>
+<col>
+<col>
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Library</th>
+<th class="tableblock halign-left valign-top">Version</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">eslint</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">^1.7.3</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">eslint-config-gulp</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">^2.0.0</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">expect</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">^1.20.2</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">istanbul</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">^0.4.3</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">istanbul-coveralls</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">^1.0.3</p></td>
+</tr>
+<tr>
+<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">
+<p>Cum dicat putant ne.
+Est in reque homero principes, meis deleniti mediocrem ad has.
+Altera atomorum his ex, has cu elitr melius propriae.
+Eos suscipit scaevola at.</p>
+</div>
+<div class="admonitionblock tip">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-tip" title="Tip"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>This oughta do it!</p>
+</div>
+</td>
+</tr>
+</table>
+</div>
+<div class="paragraph">
+<p>Cum dicat putant ne.
+Est in reque homero principes, meis deleniti mediocrem ad has.
+Altera atomorum his ex, has cu elitr melius propriae.
+Eos suscipit scaevola at.</p>
+</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>You&#8217;ve been down <em>this</em> road before.</p>
+</div>
+</td>
+</tr>
+</table>
+</div>
+<div class="paragraph">
+<p>Cum dicat putant ne.
+Est in reque homero principes, meis deleniti mediocrem ad has.
+Altera atomorum his ex, has cu elitr melius propriae.
+Eos suscipit scaevola at.</p>
+</div>
+<div class="admonitionblock warning">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-warning" title="Warning"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>Watch out!</p>
+</div>
+</td>
+</tr>
+</table>
+</div>
+<div class="admonitionblock caution">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-caution" title="Caution"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>I wouldn&#8217;t try that if I were you.</p>
+</div>
+</td>
+</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>
+<td class="icon">
+<i class="fa icon-important" title="Important"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>Don&#8217;t forget this step!</p>
+</div>
+</td>
+</tr>
+</table>
+</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>
+<h2 id="voluptua-singulis" class="discrete">Voluptua singulis</h2>
+<div class="paragraph">
+<p>Cum dicat putant ne.
+Est in reque homero principes, meis deleniti mediocrem ad has.
+Altera atomorum his ex, has cu elitr melius propriae.
+Eos suscipit scaevola at.</p>
+</div>
+</div>
+</div>
\ No newline at end of file

diff --git a/src/css/article.css b/src/css/article.css
deleted file mode 100644 (file)
index 166b9c2..0000000
--- a/src/css/article.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.doc {
-  margin: 0 auto;
-  max-width: 40rem;
-}
-
-@media (min-width: 1024px) {
-  .doc {
-    margin: 0 2rem;
-    max-width: 54rem;
-  }
-}

diff --git a/src/css/doc.css b/src/css/doc.css
new file mode 100644 (file)
index 0000000..cc955bc
--- /dev/null
+++ b/src/css/doc.css
@@ -0,0 +1,448 @@
+.doc {
+  margin: 0 auto;
+  max-width: 40rem;
+  padding: 0 1rem 2rem;
+  color: #333;
+}
+
+@media (min-width: 1024px) {
+  .doc {
+    margin: 0 2rem;
+    max-width: 54rem;
+  }
+}
+
+.doc h1,
+.doc h2,
+.doc h3,
+.doc h4,
+.doc h5,
+.doc h6 {
+  color: #191919;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+}
+
+.doc h1 > a.anchor,
+.doc h2 > a.anchor,
+.doc h3 > a.anchor,
+.doc h4 > a.anchor,
+.doc h5 > a.anchor,
+.doc h6 > a.anchor {
+  position: absolute;
+  text-decoration: none;
+  width: 1.75ex;
+  margin-left: -1.5ex;
+  visibility: hidden;
+  font-size: 0.8em;
+  padding-top: 0.025em;
+}
+
+.doc h1 > a.anchor::before,
+.doc h2 > a.anchor::before,
+.doc h3 > a.anchor::before,
+.doc h4 > a.anchor::before,
+.doc h5 > a.anchor::before,
+.doc h6 > a.anchor::before {
+  content: "\00a7";
+}
+
+.doc h1:hover > a.anchor,
+.doc h2:hover > a.anchor,
+.doc h3:hover > a.anchor,
+.doc h4:hover > a.anchor,
+.doc h5:hover > a.anchor,
+.doc h6:hover > a.anchor {
+  visibility: visible;
+}
+
+.doc a,
+.doc a:visited {
+  color: #1565c0;
+}
+
+.doc a {
+  text-decoration: none;
+}
+
+.doc a:hover {
+  color: #104d92;
+  text-decoration: underline;
+}
+
+.doc b,
+.doc dt,
+.doc strong,
+.doc th {
+  font-weight: 500;
+}
+
+/* what about td/th code? */
+.doc p code {
+  font-size: 0.85em;
+  background-color: #fafafa;
+  padding: 0.075rem 0.25rem 0.125rem;
+  border-radius: 0.2rem;
+  /* font-weight: 300; */
+}
+
+.doc pre {
+  font-size: 0.85rem;
+  /* color: #000; */
+  line-height: 1.5;
+}
+
+.doc pre:not(.highlight),
+.doc pre.highlight code {
+  display: block;
+  background-color: #fafafa;
+  padding: 0.75rem;
+  overflow-x: auto;
+  box-shadow: inset 0 0 2px #ddd;
+}
+
+.doc .paragraph,
+.doc .colist,
+.doc .dlist,
+.doc .olist,
+.doc .ulist,
+.doc .exampleblock,
+.doc .imageblock,
+.doc .listingblock,
+.doc .literalblock,
+.doc .sidebarblock {
+  margin: 1rem 0 0;
+}
+
+.doc table.tableblock {
+  border-collapse: collapse;
+  font-size: 0.8em;
+  margin: 2rem 0;
+  /* enable table-layout: fixed if you want the table width to be enforced strictly */
+  /* alternative is to wrap table in div and set overflow-x: auto on the wrapper */
+  /* table-layout: fixed; */
+}
+
+.doc table.spread {
+  width: 100%;
+}
+
+.doc table.tableblock th,
+.doc table.tableblock td {
+  padding: 0.5rem;
+}
+
+.doc table.tableblock th {
+  border-bottom: 2.5px solid #ddd;
+}
+
+.doc table.tableblock td {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.doc .halign-left {
+  text-align: left;
+}
+
+.doc .valign-top {
+  vertical-align: top;
+}
+
+.doc .tableblock p {
+  font-size: inherit;
+}
+
+.doc .admonitionblock {
+  margin: 1.4rem 0 0;
+  position: relative;
+}
+
+.doc .admonitionblock p,
+.doc .admonitionblock td.content {
+  font-size: 0.8rem;
+}
+
+.doc .admonitionblock table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.doc .admonitionblock td.content {
+  padding: 1rem 1rem 0.75rem;
+  background-color: #fafafa;
+  width: 100%;
+}
+
+.doc .admonitionblock .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 0.75rem;
+  padding: 0 0.5rem;
+  height: 1.25rem;
+  line-height: 1;
+  font-weight: 500;
+  text-transform: uppercase;
+  border-radius: 0.45rem;
+  color: #fff;
+  transform: translate(-0.5rem, -50%);
+}
+
+.doc .admonitionblock.caution .icon {
+  background-color: #a0439c;
+}
+
+.doc .admonitionblock.important .icon {
+  background-color: #d32f2f;
+}
+
+.doc .admonitionblock.note .icon {
+  background-color: #217ee7;
+}
+
+.doc .admonitionblock.tip .icon {
+  background-color: #41af46;
+}
+
+.doc .admonitionblock.warning .icon {
+  background-color: #e18114;
+}
+
+.doc .admonitionblock .icon i {
+  font-style: normal;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+.doc .admonitionblock .icon i::after {
+  content: attr(title);
+  hyphens: none;
+}
+
+.doc .imageblock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.doc .imageblock img {
+  display: block;
+}
+
+.doc .imageblock .title {
+  color: #4a4a4a;
+  font-style: italic;
+  margin-top: 0.5rem;
+}
+
+.doc .imageblock .content {
+  max-width: 100%;
+}
+
+.doc .imageblock img,
+.doc .paragraph .image img {
+  height: auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.doc > h1 {
+  font-size: 2rem;
+  margin: 2rem 0 1.5rem;
+}
+
+#preamble + .sect1,
+.doc .sect1 + .sect1 {
+  margin-top: 2.5rem;
+}
+
+.doc h2:not(.discrete) {
+  border-bottom: 1px solid #ddd;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding: 0.4rem 1rem 0.1rem;
+}
+
+.doc p {
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.doc p,
+.doc .tableblock,
+.doc .content {
+  hyphens: auto;
+}
+
+.doc .ulist .paragraph,
+.doc .olist .paragraph {
+  margin: 0;
+  padding: 0;
+}
+
+#preamble .abstract blockquote {
+  background-color: #f0f0f0;
+  border-left: 5px solid #ddd;
+  color: #4a4a4a;
+  font-size: 0.9em;
+  margin: 0;
+  padding: 0.75em 1em;
+}
+
+.doc .admonitionblock td.content > div[class] {
+  margin: 0;
+}
+
+.doc table.tableblock .paragraph {
+  margin: 0;
+  padding: 0;
+}
+
+.doc table.tableblock .admonitionblock,
+.doc .ulist .admonitionblock,
+.doc .olist .admonitionblock {
+  padding: 0;
+}
+
+.doc ul {
+  margin: 0;
+  padding: 0 0 0 1.5rem;
+}
+
+.doc ol {
+  margin: 0;
+  padding: 0 0 0 2rem;
+  list-style: none;
+  counter-reset: ordered-list;
+}
+
+.doc ol > li {
+  counter-increment: ordered-list;
+}
+
+.doc ol > li::before {
+  /* use counter(ordered-list, lower-alpha) to make letters */
+  content: "." counter(ordered-list);
+  font-weight: 500;
+  display: inline-block;
+  width: 1em;
+  direction: rtl;
+  margin: 0 0.5em 0 -1.5em;
+  text-align: right;
+  position: absolute;
+}
+
+.doc .olist .olist,
+.doc .olist .ulist,
+.doc .olist .dlist,
+.doc .ulist .olist,
+.doc .ulist .ulist,
+.doc .ulist .dlist,
+.doc .dlist .ulist,
+.doc .dlist .olist,
+.doc .dlist .dlist {
+  padding: 0;
+}
+
+.doc .olist li,
+.doc .ulist li {
+  margin-bottom: 0.5rem;
+}
+
+.doc .ulist .listingblock,
+.doc .olist .listingblock,
+.doc .admonitionblock .listingblock {
+  padding: 0;
+}
+
+.doc .exampleblock .title,
+.doc .literalblock .title,
+.doc .listingblock .title {
+  color: #4a4a4a;
+  padding-bottom: 0.15rem;
+  font-size: 0.85rem;
+}
+
+/* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
+.doc .tableblock pre,
+.doc .listingblock.wrap pre {
+  white-space: pre-wrap;
+}
+
+.doc .listingblock code[data-lang] {
+  position: relative;
+}
+
+.doc .listingblock code[data-lang]::before {
+  content: attr(data-lang);
+  display: none;
+  color: #8e8e8e;
+  font-size: 0.75em;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.doc .listingblock:hover code[data-lang]::before {
+  display: block;
+}
+
+.doc .dlist dt {
+  color: #4a4a4a;
+  font-style: italic;
+}
+
+.doc .dlist dt::after {
+  content: ":";
+}
+
+.doc .dlist dd {
+  margin: 0 0 0.3rem 1.5rem;
+}
+
+.doc .conum[data-value] {
+  /* border: 1px solid #989898; */
+  border: 1px solid #404040;
+  border-radius: 100%;
+  display: inline-block;
+  font-family: "Roboto", sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  height: 1.25em;
+  line-height: 1.2;
+  text-align: center;
+  width: 1.25em;
+  letter-spacing: -0.25ex;
+  text-indent: -0.25ex;
+}
+
+.doc .conum[data-value]::after {
+  content: attr(data-value);
+}
+
+.doc .conum[data-value] + b {
+  display: none;
+}
+
+.doc .colist {
+  font-size: 0.95rem;
+}
+
+.doc .colist > table tr > td:first-of-type {
+  padding: 0 0.75em;
+  line-height: 1;
+}
+
+.menuseq i.caret::before {
+  content: ">";
+  font-style: normal;
+  font-weight: 500;
+}

diff --git a/src/css/site.css b/src/css/site.css
index ab3a32e..b6cbd2e 100644 (file)
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -8,6 +8,6 @@
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
-@import "article.css";
+@import "doc.css";
 @import "header.css";
 @import "footer.css";