docs: Improve home page

Organize CSS and Javascript files into directories, separating vendor
source code from home-grown.

Separate new properties and selectors in Bootstrap CSS (already edited
for Hugo) from:
1. Original property values; and
2. Changed property values.

For the home page:

1. Clarify the English text;
2. Add some element names to classes in CSS selectors (to speed loading);
3. Document the Owl Carousel and Highlight.js versions;
4. Add Owl Carousel's license;
5. Restore HTML comments to browser source views;
6. Make the beginning GitHub button transparent on focus (like the others);

7. For the final, colored Twitter and Github buttons:
  a. Remove the dotted box on focus; and
  b. Color them green on active.

8. To increase (layout/) source readability:
  a. Place `class` attributes before `href` attributes;
  b. In `class` attributes, place more-specific class names before
     less-specific; and
  c. Comment the beginnings and ends of Bootstrap rows.

9. To increase understandability during development:
  a. Document the meaning of CSS file, `HPstyles` by renaming it to
     `home-page-style`;
  b. Move inline styling to CSS stylesheets;
  c. Separate @media queries to a file;
  d. Separate the inline Owl Carousel custom Javascript to a file;
  e. Use regular Owl Carousel CSS files instead of minified ones; and
  f. Rename the wide, landscape desk background image filename from
     `desk-long` to `desk-wide`.

28 files changed, 490 insertions, 238 deletions

diff --git a/docs/static/css/bootstrap-additions-gohugo.css b/docs/static/css/bootstrap-additions-gohugo.css
new file mode 100644
index 000000000..4128f3b8c
--- /dev/null
+++ b/docs/static/css/bootstrap-additions-gohugo.css
@@ -0,0 +1,65 @@
+/*!
+ * Bootstrap for http://gohugo.io/
+ * additional property-value pairs, for selectors already in Bootstrap;
+ * also, additional Bootstrap-like selectors
+ *
+ * Keep all such property additions to Bootstrap v3.3.6 here.
+ *
+ * Here, maintain the same order as the original Bootstrap file.
+ *
+ * Keep any additional Bootstrap-like selectors at the bottom.
+ *
+ * Copyright 2013-2016 Steve Francia and the Hugo Authors
+ *
+ * Based on 'dist/css/bootstrap.css' from:
+ *
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.btn {
+  -webkit-transition: all 0.15s;
+     -moz-transition: all 0.15s;
+          transition: all 0.15s;
+}
+.btn-primary:focus,
+.btn-primary:active,
+.btn-success:focus,
+.btn-success:active,
+.btn-info:focus,
+.btn-info:active {
+  background-color: transparent;
+}
+.btn-default:hover,
+.btn-default:active,
+.btn-primary:hover,
+.btn-primary:active,
+.btn-success:hover,
+.btn-success:active,
+.btn-info:hover,
+.btn-info:active {
+  outline: none;
+}
+
+/* additional Bootstrap-like selectors */
+
+.btn-repo {
+  border-color: black;
+  background-color: rgba(30, 30, 30, 0.8);
+  color: white;
+}
+.btn-repo:focus,
+.btn-repo:active {
+  color: black;
+}
+.btn-repo:hover {
+  background-color: aliceblue;
+}
+.btn-repo:focus,
+.btn-repo:active {
+  background-color: transparent;
+}
+.btn-repo:hover,
+.btn-repo:active {
+  outline: none;
+}
diff --git a/docs/static/css/bootstrap-changes-gohugo.css b/docs/static/css/bootstrap-changes-gohugo.css
new file mode 100644
index 000000000..d4ef99bcc
--- /dev/null
+++ b/docs/static/css/bootstrap-changes-gohugo.css
@@ -0,0 +1,136 @@
+/*!
+ * Bootstrap for http://gohugo.io/
+ * value changes to properties in Bootstrap selectors;
+ * Bootstrap must already have the same properties in the same selectors.
+ *
+ * Keep all such value changes to Bootstrap v3.3.6 here.
+ *
+ * Here, maintain the same order as the original Bootstrap file.
+ *
+ * Keep all new properties, for new or existing selectors,
+ * in other stylesheets.
+ *
+ * Copyright 2013-2016 Steve Francia and the Hugo Authors
+ *
+ * Based on 'dist/css/bootstrap.css' from:
+ *
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+body {
+  font-family: Lato;
+  color: #2b2b2b;
+}
+a {
+  color: #ff4088;
+}
+a:hover,
+a:focus {
+  color: #ff4088;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: Lato;
+  font-weight: 400;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: Menlo, Consolas, 'DejaVu Sans Mono',
+              'Bitstream Vera Sans Mono', 'Lucida Console', Monaco,
+              'Droid Sans Mono', monospace;
+}
+legend {
+  color: #2b2b2b;
+  border-bottom: 1px solid #c7c7cc;
+}
+.btn:focus {
+  /*outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;*/
+  outline: none;
+}
+.btn:hover,
+.btn:focus {
+  color: #2b2b2b;
+}
+.btn-default:focus {
+  color: #fff;
+  background-color: #9e9e9e;
+  border-color: #9e9e9e;
+}
+.btn-default:hover {
+  color: #fff;
+  background-color: #9e9e9e;
+  border-color: #9e9e9e;
+}
+.btn-default:active {
+  color: #fff;
+  background-color: #9e9e9e;
+  border-color: #9e9e9e;
+}
+.btn-primary {
+  background-color: #007aff;
+  border-color: #007aff;
+}
+.btn-primary:focus {
+  color: #007aff;
+  border-color: #007aff;
+}
+.btn-primary:hover {
+  color: #007aff;
+  background-color: aliceblue;
+  border-color: #007aff;
+}
+.btn-primary:active {
+  color: #007aff;
+  border-color: #007aff;
+}
+.btn-success {
+  background-color: #4cd964;
+  border-color: #4cd964;
+}
+.btn-success:focus {
+  color: #4cd964;
+  border-color: #4cd964;
+}
+.btn-success:hover {
+  color: #4cd964;
+  background-color: aliceblue;
+  border-color: #4cd964;
+}
+.btn-success:active {
+  color: #4cd964;
+  border-color: #4cd964;
+}
+.btn-info {
+  background-color: #34aadc;
+  border-color: #34aadc;
+}
+.btn-info:focus {
+  color: #34aadc;
+  border-color: #34aadc;
+}
+.btn-info:hover {
+  color: #34aadc;
+  background-color: aliceblue;
+  border-color: #34aadc;
+}
+.btn-info:active {
+  color: #34aadc;
+  border-color: #34aadc;
+}
+.panel {
+  border: 0px solid transparent;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.panel-body {
+  padding: 15px 15px 0px 15px;
+}
diff --git a/docs/static/css/bootstrap-gohugo.css b/docs/static/css/bootstrap-stripped-gohugo.css
index 1a929cfe8..aafb0df53 100644
--- a/docs/static/css/bootstrap-gohugo.css
+++ b/docs/static/css/bootstrap-stripped-gohugo.css
@@ -1,9 +1,10 @@
 /*!
  * Bootstrap for http://gohugo.io/
- * with some customizations and with many unused selectors removed
- * Copyright 2013-2015 Steve Francis and the Hugo Authors
+ * with many unused property-value pairs, as well as selectors, removed
  *
- * Based on:
+ * Copyright 2013-2016 Steve Francia and the Hugo Authors
+ *
+ * Based on 'dist/css/bootstrap.css' from:
  *
  * Bootstrap v3.3.6 (http://getbootstrap.com)
  * Copyright 2011-2015 Twitter, Inc.
@@ -227,10 +228,10 @@ html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
-  font-family: Lato;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
-  color: #2b2b2b;
+  color: #333;
   background-color: #fff;
 }
 input,
@@ -242,12 +243,12 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #ff4088;
+  color: #337ab7;
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #ff4088;
+  color: #23527c;
   text-decoration: underline;
 }
 a:focus {
@@ -273,8 +274,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Lato;
-  font-weight: 400;
+  font-family: inherit;
+  font-weight: 500;
   line-height: 1.1;
   color: inherit;
 }
@@ -381,7 +382,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', Monaco, 'Droid Sans Mono', monospace;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 code {
   padding: 2px 4px;
@@ -1097,9 +1098,9 @@ legend {
   margin-bottom: 20px;
   font-size: 21px;
   line-height: inherit;
-  color: #2b2b2b;
+  color: #333;
   border: 0;
-  border-bottom: 1px solid #c7c7cc;
+  border-bottom: 1px solid #e5e5e5;
 }
 label {
   display: inline-block;
@@ -1137,81 +1138,102 @@ label {
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
-  -webkit-transition: all 0.15s;
-     -moz-transition: all 0.15s;
-          transition: all 0.15s;
 }
 .btn:focus {
-  /*outline: thin dotted;
+  outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;*/
-  outline: none;
+  outline-offset: -2px;
 }
 .btn:hover,
 .btn:focus {
-  color: #2b2b2b;
+  color: #333;
   text-decoration: none;
 }
+.btn:active {
+  outline: 0;
+}
 .btn-default {
   color: #333;
   background-color: #fff;
   border-color: #ccc;
 }
-.btn-default:hover,
-.btn-default:focus,
+.btn-default:focus {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #8c8c8c;
+}
+.btn-default:hover {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
 .btn-default:active {
-  color: #fff;
-  background-color: #9e9e9e;
-  border-color: #9e9e9e;
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
 }
 .btn-default:active {
   background-image: none;
 }
 .btn-primary {
   color: #fff;
-  background-color: #007aff;
-  border-color: #007aff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+.btn-primary:focus {
+  color: #fff;
+  border-color: #122b40;
+}
+.btn-primary:hover {
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
 }
-.btn-primary:hover,
-.btn-primary:focus,
 .btn-primary:active {
-  color: #007aff;
-  border-color: #007aff;
-  background: transparent;
+  color: #fff;
+  border-color: #204d74;
 }
 .btn-primary:active {
   background-image: none;
 }
 .btn-success {
   color: #fff;
-  background-color: #4cd964;
-  border-color: #4cd964;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.btn-success:focus {
+  color: #fff;
+  border-color: #255625;
+}
+.btn-success:hover {
+  color: #fff;
+  background-color: #449d44;
+  border-color: #398439;
 }
-.btn-success:hover,
-.btn-success:focus,
 .btn-success:active {
-  color: #4cd964;
-  background: transparent;
-  border-color: #4cd964;
+  color: #fff;
+  border-color: #398439;
 }
 .btn-success:active {
   background-image: none;
-  outline: none;
 }
 .btn-info {
   color: #fff;
-  background-color: #34aadc;
-  border-color: #34aadc;
+  background-color: #5bc0de;
+  border-color: #46b8da;
 }
-.btn-info:hover,
-.btn-info:focus,
-.btn-info:active {
-  color: #34aadc;
-  background: transparent;
-  border-color: #34aadc;
+.btn-info:focus {
+  color: #fff;
+  border-color: #1b6d85;
+}
+.btn-info:hover {
+  color: #fff;
+  background-color: #31b0d5;
+  border-color: #269abc;
 }
 .btn-info:active {
-  background-image: none;
+  color: #fff;
+  border-color: #269abc;
 }
 .btn-lg,
 .btn-group-lg > .btn {
@@ -1266,12 +1288,12 @@ label {
 .panel {
   margin-bottom: 20px;
   background-color: #fff;
-  border: 0px solid transparent;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 }
 .panel-body {
-  padding: 15px 15px 0px 15px;
+  padding: 15px;
 }
 .carousel {
   position: relative;
diff --git a/docs/static/css/home-page-style-responsive.css b/docs/static/css/home-page-style-responsive.css
new file mode 100644
index 000000000..46ce3eb43
--- /dev/null
+++ b/docs/static/css/home-page-style-responsive.css
@@ -0,0 +1,44 @@
+/* full page image header area */
+
+@media (min-width: 1024.1px) {
+    .header {
+        background-image: url('../img/desk.jpg');
+    }
+}
+@media (max-width: 319.9px) {
+    .header {
+        background-image: url('../img/desk-sm.jpg');
+    }
+}
+@media (max-width: 319.9px), (min-width: 1024.1px) {
+    .header {
+        background-position: center center;
+        -webkit-background-size: cover;
+           -moz-background-size: cover;
+             -o-background-size: cover;
+                background-size: cover;
+        background-attachment: fixed;
+    }
+}
+@media (min-width: 320px) and (max-width: 1024px) {
+    .header {
+        background-position: 0% 0%;
+        -webkit-background-size: 100% 100%;
+           -moz-background-size: 100% 100%;
+             -o-background-size: 100% 100%;
+                background-size: 100% 100%;
+        background-attachment: scroll;
+        background-clip: border-box;
+        background-origin: padding-box;
+    }
+}
+@media (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) {
+    .header {
+        background-image: url('../img/desk-mini.jpg');
+    }
+}
+@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) {
+    .header {
+        background-image: url('../img/desk-wide.jpg');
+    }
+}
diff --git a/docs/static/css/HPstyles.css b/docs/static/css/home-page-style.css
index f8526d9dd..4ff3bc815 100644
--- a/docs/static/css/HPstyles.css
+++ b/docs/static/css/home-page-style.css
@@ -1,270 +1,194 @@
-/* Global Styles */
+/* global styles */
 
-html,
-body {
+html {
+    width: 100%;
     height: 100%;
+    letter-spacing: 0.5px;
+}
+body {
     width: 100%;
+    height: 100%;
     letter-spacing: 0.5px;
+    line-height: 1.6;
+    font-family: 'Arbutus Slab', "Helvetica Neue", "Helvetica", sans-serif !important;
 }
-
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Cabin', "Helvetica Neue", "Helvetica", sans-serif;
 }
-
-body {
-
-    font-family: 'Arbutus Slab', "Helvetica Neue", "Helvetica", sans-serif !important;
-    line-height: 1.6;
-}
-
-.vert-text {
+div.vert-text {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
 }
 
+/* full page image header area */
 
-/* Full Page Image Header Area */
-
+div.buttonbox {
+    margin: 2em 0 4em;
+}
+img.logo {
+    padding: 2em;
+    width: 100%;
+    max-width: 35em;
+}
+div#main {
+    position: relative;
+    z-index: 99999;
+    background: rgb(255, 255, 255);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
 .header {
     display: table;
-    height: 70%;
+    position: relative;
     width: 100%;
+    height: 70%;
     min-height: 70%;
-    position: relative;
-    background: url(../img/desk.jpg) no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
     z-index: 99999;
     background-color: black;
+    background-repeat: no-repeat;
 }
-
-.logo {
-    max-width: 35em;
-    width: 100%;
-    padding: 2em;
-}
-
-.buttonbox {
-    margin: 2em 0 4em;
-}
-
-@media only screen
-and (min-device-width : 320px)
-and (max-device-width : 1024px)
-and (orientation : portrait)
-{
-    .header {
-        display: table;
-        height: 70%;
-        width: 100%;
-        position: relative;
-        background: url(../img/desk-mini.jpg) no-repeat;
-        background-size: 100% 100%;
-        z-index: 99999;
-        background-color: black;
-    }
-}
-
-@media only screen
-and (min-device-width : 320px)
-and (max-device-width : 1024px)
-and (orientation : landscape) {
-    .header {
-        display: table;
-        height: 70%;
-        width: 100%;
-        position: relative;
-        background: url(../img/desk-long.jpg) no-repeat;
-        background-size: 100% 100%;
-        z-index: 99999;
-        background-color: black;
-    }
-}
-
-.header .btn {
+.header a.btn {
     margin: 10px;
-}
-
-#main {
-    z-index: 99999;
-    position: relative;
-    background: rgb(255, 255, 255);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-.header .btn {
     font-weight: 100;
 }
 
-/* Intro */
-
-.counterpoint {
-    padding: 50px 0;
-    background-color: rgb(255, 252, 244);
-}
+/* intro */
 
-.point {
-    background: rgb(96,210,211);
-    padding: 50px 0;
-    color: #ffffff;
-}
-
-
-.point h2, .counterpoint h2 {
-    font-size: 32pt;
-    line-height: 1.7;
+a:hover {
+    color: rgb(52, 73, 94);
 }
-
-i.callout-icon, i.point-icon, i.lead-icon {
-    border-radius: 50%;
+i.callout-icon, i.lead-icon, i.point-icon {
     display: inline-block;
-    font-size: 56px;
+    vertical-align: middle;
+    text-align: center;
     width: 140px;
     height: 140px;
+    font-size: 56px;
     line-height: 136px;
-    vertical-align: middle;
-    text-align: center;
+    border-radius: 50%;
     -webkit-transition: box-shadow 0.2s;
     -moz-transition: box-shadow 0.2s;
     transition: box-shadow 0.2s;
 }
-
-i.lead-icon {
-    border: 3px solid #222;
+div.counterpoint {
+    background-color: rgb(255, 252, 244);
 }
-
-i.point-icon, i.callout-icon {
-    border: 3px solid #ffffff;
+div.counterpoint, div.point {
+    padding: 50px 0;
+}
+div.counterpoint a, div.point a {
+    color: rgb(7,162,166);
+}
+div.counterpoint h2, div.point h2 {
+    line-height: 1.7;
+    font-size: 32pt;
+}
+a.icon-2x {
+    font-size: 200%;
+}
+i.lead-icon {
+    border: 3px solid #222222;
 }
-
 i.lead-icon:hover {
-    color: #fff;
     border: 3px solid black;
     background: black;
+    color: #ffffff;
 }
-
-i.point-icon:hover {
-    color: rgb(22, 203, 230);
-    border: 3px solid #fff;
-    background: #fff;
+div.point {
+    background: rgb(96,210,211);
+    color: #ffffff;
 }
-
-a:hover {
-    color: rgb(52, 73, 94);
+div.point h2 > i {
+    color:#FF4088;
 }
-
-
-
-.icon-2x {
-    font-size: 200%;
+i.point-icon {
+    border: 3px solid #ffffff;
+}
+i.point-icon:hover {
+    background: #ffffff;
+    color: rgb(22, 203, 230);
 }
 
-/* Callout */
+/* callout */
 
-.callout {
-    color: #ffffff;
+div.callout {
     display: table;
     table-layout: fixed;
-    height: 420px;
     wi