Add illustrations

Author: tmcw

Diff for: illustrations/integrated.jpg

@@ -35,62 +35,77 @@
 </header>
 <section class='container'>
 
-<div class='px2'>
-  <div class='h2 mt4 mb0'>
-    <span class='caps bold'>
-      Output
-    </span>
-    <span>
-      HTML +
-      Markdown +
-      JSON
-    </span>
+<div class='px2 mt4 clearfix mxn2'>
+  <div class='sm-col sm-col-4 px2'>
+    <img src='illustrations/output.jpg' />
+  </div>
+  <div class='sm-col sm-col-8 px2'>
+    <div class='h2 mb0 mt2'>
+      <span class='caps bold'>
+        Output
+      </span>
+      <span>
+        HTML +
+        Markdown +
+        JSON
+      </span>
+    </div>
+    <p class='py2'>
+      documentation.js has pluggable output formats: you can get raw
+      documentation as JSON, beautiful, customizable HTML, or Markdown
+      that fits perfectly into an API.md or README.md file in a Github
+      repository
+    </p>
   </div>
-  <p class='py2'>
-    documentation.js has pluggable output formats: you can get raw
-    documentation as JSON, beautiful, customizable HTML, or Markdown
-    that fits perfectly into an API.md or README.md file in a Github
-    repository
-  </p>
 </div>
 
-<div class='px2'>
-  <div class='h2 mt4 mb0'>
-    <span class='caps bold'>
-      Universal
-    </span>
-    <span>
-      JavaScript +
-      ES6 Syntax +
-      CommonJS +
-      C/C++
-    </span>
+<div class='px2 mt4 clearfix mxn2'>
+  <div class='sm-col sm-col-4 px2'>
+    <img src='illustrations/universal.jpg' />
+  </div>
+  <div class='sm-col sm-col-8 px2'>
+    <div class='h2 mb0 mt1'>
+      <span class='caps bold'>
+        Universal
+      </span>
+      <span>
+        JavaScript +
+        ES6 Syntax +
+        CommonJS +
+        C/C++
+      </span>
+    </div>
+    <p class='py2'>
+      documentation.js aims to cover all flavors of modern JavaScript:
+      everything from client-side libraries to native node.js modules
+      with logic in C++.
+    </p>
   </div>
-  <p class='py2'>
-    documentation.js aims to cover all flavors of modern JavaScript:
-    everything from client-side libraries to native node.js modules
-    with logic in C++.
-  </p>
 </div>
 
-<div class='px2'>
-  <div class='h2 mt4 mb0'>
-    <span class='caps bold'>
-      Integrated
-    </span>
-    <span>
-      <a href='https://github.com/documentationjs/documentation#user-guide'>CLI</a>
-      + Node.js</li>
-      + <a href='https://github.com/documentationjs/gulp-documentation'>Gulp</a>
-      + <a href='https://github.com/documentationjs/dev-documentation'>Developer Tools</a>
-    </span>
+<div class='px2 mt4 clearfix mxn2'>
+  <div class='sm-col sm-col-4 px2'>
+    <img src='illustrations/integrated.jpg' />
+  </div>
+  <div class='sm-col sm-col-8 px2'>
+    <div class='h2 mb0'>
+      <span class='caps bold'>
+        Integrated
+      </span>
+      <span>
+        <a href='https://github.com/documentationjs/documentation#user-guide'>CLI</a>
+        + Node.js</li>
+        + <a href='https://github.com/documentationjs/gulp-documentation'>Gulp</a>
+        + <a href='https://github.com/documentationjs/dev-documentation'>Developer Tools</a>
+      </span>
+    </div>
+    <p class='py2'>
+      documentation.js works in your workflow, whether you just want a command-line
+      utility that generates documentation from your code,
+      you use Gulp to publish websites, or you're building
+      a new system and want low-level JavaScript methods.
+    </p>
   </div>
-  <p class='py2'>
-    documentation.js works in your workflow, whether you just want a command-line
-    utility that generates documentation from your code,
-    you use Gulp to publish websites, or you're building
-    a new system and want low-level JavaScript methods.
-  </p>
 </div>
 </section>