style checklists

- hide default bullet
- add list marker using CSS
- add checklist to example
- reset font style for all i.fa elements

diff --git a/preview-site-src/index.html b/preview-site-src/index.html
index 8866334..dd7df65 100644 (file)
--- a/preview-site-src/index.html
+++ b/preview-site-src/index.html
@@ -47,7 +47,7 @@ Eu mea inani iriure.</p>
 const browserify = require('browserify')
 const buffer = require('vinyl-buffer')
 const uglify = require('gulp-uglify')
-const tap = require('gulp-tap')
+const tap = require('gulp-tap') <i class="conum" data-value="1"></i><b>(1)</b>
 
 gulp.task('js', () =&gt;
   gulp
@@ -63,6 +63,14 @@ gulp.task('js', () =&gt;
 )</code></pre>
 </div>
 </div>
+<div class="colist arabic">
+<table>
+<tr>
+<td><i class="conum" data-value="1"></i><b>1</b></td>
+<td>Used to wiretap the data in the pipe.</td>
+</tr>
+</table>
+</div>
 <div class="paragraph">
 <p>Cum dicat putant ne.
 Est in <a href="#inline">reque</a> homero principes, meis deleniti mediocrem ad has.
@@ -82,7 +90,8 @@ src/
 </div>
 </div>
 <div class="paragraph">
-<p>Per ea solet civibus inimicus.
+<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>
@@ -95,7 +104,6 @@ Voluptua singulis pro ei, melius constituto consequuntur eos in, ei ius blandit
 <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">
@@ -118,9 +126,38 @@ At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus
 </ol>
 </div>
 <div class="paragraph">
+<p>Natum facilisis theophrastus an duo.
+No sea, at invenire voluptaria mnesarchum has.</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p>ultricies sociosqu tristique integer</p>
+</li>
+<li>
+<p>lacus volutpat semper porttitor aliquet ornare primis nulla enim</p>
+</li>
+<li>
+<p>etiam pulvinar inceptos velit quisque aptent himenaeos</p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
 <p>Eu sed antiopam gloriatur.
-Ea mea agam graeci philosophia.
-Vis veri graeci legimus ad.</p>
+Ea mea agam graeci philosophia.</p>
+</div>
+<div class="ulist checklist">
+<ul class="checklist">
+<li>
+<p><i class="fa fa-square-o"></i> todo</p>
+</li>
+<li>
+<p><i class="fa fa-check-square-o"></i> done!</p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Vis veri graeci legimus ad.</p>
 </div>
 <table id="dependencies" class="tableblock frame-all grid-all">
 <colgroup>
@@ -240,7 +277,7 @@ Eos suscipit scaevola at.</p>
 </td>
 <td class="content">
 <div class="paragraph">
-<p id="inline">I wouldn&#8217;t try that if I were you.</p>
+<p><span id="inline">I wouldn&#8217;t try that if I were you.</span></p>
 </div>
 </td>
 </tr>
@@ -286,4 +323,4 @@ Altera atomorum his ex, has cu elitr melius propriae.
 Eos suscipit scaevola at.</p>
 </div>
 </div>
-</div>
+</div>
\ No newline at end of file

diff --git a/src/css/doc.css b/src/css/doc.css
index cc955bc..ec7f88d 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -78,6 +78,10 @@
   font-weight: 500;
 }
 
+.doc i.fa {
+  font-style: normal;
+}
+
 /* what about td/th code? */
 .doc p code {
   font-size: 0.85em;
@@ -212,7 +216,6 @@
 }
 
 .doc .admonitionblock .icon i {
-  font-style: normal;
   display: inline-flex;
   align-items: center;
   height: 100%;
@@ -336,6 +339,27 @@
   position: absolute;
 }
 
+.doc ul.checklist {
+  padding-left: 0.5rem;
+  list-style: none;
+}
+
+.doc ul.checklist p > i.fa-check-square-o:first-child,
+.doc ul.checklist p > i.fa-square-o:first-child {
+  display: inline-flex;
+  justify-content: center;
+  width: 1rem;
+  margin-right: 0.25rem;
+}
+
+.doc ul.checklist i.fa-check-square-o::before {
+  content: "\2713";
+}
+
+.doc ul.checklist i.fa-square-o::before {
+  content: "\274f";
+}
+
 .doc .olist .olist,
 .doc .olist .ulist,
 .doc .olist .dlist,
@@ -443,6 +467,5 @@
 
 .menuseq i.caret::before {
   content: ">";
-  font-style: normal;
   font-weight: 500;
 }