Final changes to templates, CSS

Modifies the templates to produce markup for flexbox, and modifies the
CSS to setup flexbox for displaying the component list.

Author: weierophinney

docs/book/css/site.css

@@ -8,11 +8,36 @@
   border-bottom: 0;
 }
 
+.components {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.component {
+  min-height: 200px;
+  flex-basis: 48%;
+  border: 1px solid #CCCCCC;
+  border-radius: 10px;
+  margin-bottom: 1em;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
 .component h4 {
   color: #018D74;
   font-size: 1.5em;
 }
 
+.component h4 a {
+  color: #018D74;
+}
+
 .package {
   margin-top: -0.5em;
   padding-top: 0;

docs/scripts/prepare_component_list.php

@@ -3,19 +3,19 @@
 const TEMPLATE = <<< 'EOT'
 <div class="row">
   <h2>Components</h2>
+</div>
 
+<div class="components">
   %components%
 </div>
-
 EOT;
 
 const PACKAGE_TEMPLATE = <<< 'EOT'
-  <div class="component col-xs-12 col-md-6">
+  <div class="component">
     <h4><a href="%href%">%name%</a></h4>
     <p class="package">%package%</p>
     <p>%description%</p>
   </div>
-
 EOT;
 
 $root      = realpath(getcwd());