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`.
author: Mark D. Blackwell <markdblackwell01@gmail.com> 2016-10-01 22:19:22 -0400
committer: Mark D. Blackwell <markdblackwell01@gmail.com> 2016-10-01 22:19:22 -0400
commit: 88ec7d88d1b77a407fd1050d107f3c58ab1804da (patch)
tree: d99c892f5fe2a7222fd8c0a2ce0e4b745059e9e0
parent: ffbf3dd31978b96a15452edc2823fc2f6fce8601 (diff)
31 files changed, 661 insertions, 352 deletions
diff --git a/docs/layouts/index.html b/docs/layouts/index.html
index 54739159a..293dd71e2 100644
--- a/docs/layouts/index.html
+++ b/docs/layouts/index.html
@@ -5,155 +5,198 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Hugo, a fast and flexible static site generator built with love by spf13 and friends in Go">
     <meta name="author" content="Steve Francia (spf13) and friends">
-
     <title>Hugo :: A fast and modern static website engine</title>
 
-    <!-- Bootstrap core CSS -->
-    <link href="/css/bootstrap-gohugo.css" rel="stylesheet">
-
-    <link href='//fonts.googleapis.com/css?family=Arbutus+Slab%7CCabin:600%7CSource+Code+Pro' rel='stylesheet' type='text/css'>
-    <!-- Add custom CSS here -->
-    <link href="/css/HPstyles.css" rel="stylesheet">
-    <link href="/css/hugofont.css" rel="stylesheet">
-    <link href="/css/owl.carousel.min.css" rel="stylesheet">
-    <link href="/css/owl.theme.default.min.css" rel="stylesheet">
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <style type="text/css">
-      .callout {
-        table-layout: fixed;
-      }
-    </style>
-  </head>
+    {{ "<!--icon for browser shortcuts-->" | safeHTML }}
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+
+    {{ "<!--icon to represent this web page on Apple iOS-->" | safeHTML }}
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
+    {{ "<!--Bootstrap core CSS-->" | safeHTML }}
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-stripped-gohugo.css">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-changes-gohugo.css">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-additions-gohugo.css">
+
+    {{ "<!--non-Bootstrap CSS (keep below Bootstrap CSS)-->" | safeHTML }}
+    <link rel="stylesheet" type="text/css" href="/vendor/OwlCarousel2/css/owl.carousel.css">
+    <link rel="stylesheet" type="text/css" href="/vendor/OwlCarousel2/css/owl.theme.default.css">
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arbutus+Slab%7CCabin:600%7CSource+Code+Pro">
+    <link rel="stylesheet" type="text/css" href="/css/hugofont.css">
+    <link rel="stylesheet" type="text/css" href="/css/home-page-style.css">
+    <link rel="stylesheet" type="text/css" href="/css/home-page-style-responsive.css">
+  </head>
   <body>
 
-    <!-- Full Page Image Header Area -->
+    {{ "<!--full page image header area start-->" | safeHTML }}
     <div id="top" class="header">
       <div class="vert-text">
-        <a href="#intro"><img src="/img/hugo.png" class="logo" alt="Hugo logo"> </a>
+        <a href="#intro">
+            <img class="logo" src="/img/hugo.png" alt="Hugo logo">
+        </a>
         <div class="buttonbox">
-        <a href="/overview/introduction/" class="btn btn-primary btn-lg">Docs <i class="icon-idea"></i></a>
-        <a href="#action" class="btn btn-success btn-lg">Install <i class="icon-arrow-down"></i></a>
-        <a href="http://discuss.gohugo.io/" class="btn btn-info btn-lg">Community <i class="icon-talking"></i></a>
-        <a href="https://github.com/spf13/hugo" class="btn btn-dark btn-lg">GitHub <i class="icon-circlestar"></i></a>
+            <a class="btn-primary btn btn-lg" href="/overview/introduction/">
+                Docs <i class="icon-idea"></i>
+            </a>
+            <a class="btn-success btn btn-lg" href="#action">
+                Install <i class="icon-arrow-down"></i>
+            </a>
+            <a class="btn-info btn btn-lg" href="http://discuss.gohugo.io/">
+                Community <i class="icon-talking"></i>
+            </a>
+            <a class="btn-repo btn btn-lg" href="https://github.com/spf13/hugo">
+                GitHub <i class="icon-circlestar"></i>
+            </a>
         </div>
       </div>
     </div>
-    <!-- /Full Page Image Header Area -->
+    {{ "<!--full page image header area end-->" | safeHTML }}
 
+    {{ "<!--main start-->" | safeHTML }}
     <div id="main">
-        <!-- Intro -->
+
+        {{ "<!--intro start-->" | safeHTML }}
         <div id="intro" class="counterpoint">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="lead-icon icon-pacman"></i>
                 <h2>Make the Web Fun Again</h2>
                 <p class="lead">
-                    Introducing Hugo, a new idea around making website creation simple again.
-                    Hugo flexibly works with many formats and is ideal for
+                    Introducing Hugo, a new idea for making website creation simple again.
+                    Hugo works flexibly with many formats, and is ideal for
                     blogs, docs, portfolios and much more.
                     Hugo’s speed fosters
-                    creativity and makes building a website fun again.
+                    creativity&mdash;it makes building a website fun again.
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Intro -->
+        {{ "<!--intro end-->" | safeHTML }}
 
-        <!-- Point -->
+        {{ "<!--point start-->" | safeHTML }}
         <div class="point">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="point-icon icon-tux"></i>
                   <i class="point-icon icon-apple"></i>
                   <i class="point-icon icon-windows8"></i>
                 <h2>Run Anywhere</h2>
                 <p class="lead">
-                Hugo is quite possibly the easiest to install software you’ve ever used,
-                simply download and run. <b>Hugo doesn’t depend on administrative privileges, databases, runtimes, interpreters
-                    or external libraries</b>. Sites built with Hugo can be deployed on S3, GitHub Pages, Dropbox or any web host.
+                Hugo is quite possibly the easiest software to install you’ve ever used:
+                simply download and run!
+                <b>
+                Hugo doesn’t depend on administrative privileges, databases, runtimes,
+                interpreters or external libraries.
+                </b>
+                Sites built with Hugo can be deployed on S3, GitHub Pages, Dropbox or any web host.
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--point end-->" | safeHTML }}
 
-        <!-- Point -->
+        {{ "<!--counterpoint start-->" | safeHTML }}
         <div class="counterpoint">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="lead-icon icon-rocket"></i>
                 <h2>Fast &amp; Powerful</h2>
                 <p class="lead">
-
-                Hugo is written for speed and performance. Great care has been
-                taken to ensure that Hugo build time is as short as possible.
-                We’re talking milliseconds to build your entire site for most setups.
-
+                Hugo is designed for speed and performance. Great care has been
+                taken to ensure build time with Hugo is as short as possible.
+                We’re talking milliseconds to build your entire site&mdash;for most setups!
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--counterpoint end-->" | safeHTML }}
 
-        <!-- Point -->
+        {{ "<!--point start-->" | safeHTML }}
         <div class="point">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="point-icon icon-fork"></i>
                 <h2>Flexible</h2>
                 <p class="lead">
-
-                Hugo is designed to work how you do.
+                Hugo is designed to work the way you do.
                 Organize your content however you want with any URL structure.
-                Declare your own content types.
-                Define your own meta data in YAML, TOML or JSON.
-                Use indexes to group your content however you want.
-                Best of all this is all done with virtually no configuration, Hugo
+                Group your content using your own indexes and categories.
+                Define your own metadata in any format: YAML, TOML or JSON.
+                Best of all, Hugo handles all these variations
+                with virtually no configuration. Hugo
                 just works.
-
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--point end-->" | safeHTML }}
 
 
+        {{ "<!--quote carousel start-->" | safeHTML }}
         <div class="callout">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-12 text-center">
+              <div class="text-center col-md-12">
                   <i class="callout-icon icon-circlestar"></i>
                   <p></p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-12 text-center">
-                  <!-- Wrapper for slides -->
+              <div class="text-center col-md-12">
+
+                  {{ "<!--wrapper for slides start-->" | safeHTML }}
                   <div class="carousel-inner owl-carousel">
-                      {{ partial "quotes.html" ((where $.Site.Data.references.quotes "date" "ge" ($.Now.AddDate -2 0 0) | shuffle )) }}
+{{ partial "quotes.html" ((where $.Site.Data.references.quotes "date" "ge" ($.Now.AddDate -2 0 0) | shuffle )) }}
                   </div>
+                  {{ "<!--wrapper for slides end-->" | safeHTML }}
+
               </div>
             </div>
-            </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--quote carousel end-->" | safeHTML }}
+
+    </div>
+    {{ "<!--main end-->" | safeHTML }}
 
-        <!-- Point -->
+        {{ "<!--counterpoint start-->" | safeHTML }}
         <div class="counterpoint">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="lead-icon icon-octocat"></i>
                 <h2>Open and Free</h2>
                 <p class="lead">
@@ -161,70 +204,96 @@
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--counterpoint end-->" | safeHTML }}
 
-        <!-- Point -->
+        {{ "<!--point start-->" | safeHTML }}
         <div class="point">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                   <i class="point-icon icon-beaker-alt"></i>
                   <i class="point-icon icon-heart"></i>
                   <i class="point-icon icon-spf13"></i>
-                  <h2>Built with <i class="icon-heart" style="color:#FF4088;"></i></h2>
+                  <h2>Built with <i class="icon-heart"></i></h2>
                 <p class="lead">
                 Hugo is developed with love by <a href="http://spf13.com">spf13</a> and friends.
                 We welcome all contributions.
-                    New to Go? Not a problem, we will help you.
-                    Not a developer? Help with <a href="/overview/introduction/">docs</a>, testing and <a href="https://github.com/spf13/hugoThemes/">themes</a>.
+                    New to Go? We’ll help you.
+                    Not a developer? No problem! Help
+                with <a href="/overview/introduction/">docs,</a> testing
+                and <a href="https://github.com/spf13/hugoThemes/">themes.</a>
                 </p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Point -->
+        {{ "<!--counterpoint end-->" | safeHTML }}
 
-        <!-- Call to Action -->
+        {{ "<!--call to action start-->" | safeHTML }}
         <div id="action" class="call-to-action">
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-10 col-md-offset-1 text-center">
-                <h1 style="padding-bottom:.5em;">Getting Started</h1>
-                <a href="https://github.com/spf13/hugo/releases" class="btn btn-lg btn-primary">Download <i class="icon-arrow-down"></i></a>
-                <a href="/overview/quickstart/" style="color:white;font-weight:300;">Quickstart Guide</a>
+              <div class="text-center col-md-10 col-md-offset-1">
+                <h1>Getting Started</h1>
+                <a class="btn-primary btn btn-lg" href="https://github.com/spf13/hugo/releases">
+                    Download
+                    <i class="icon-arrow-down"></i>
+                </a>
+                <a class="quickstart" href="/overview/quickstart/">
+                    Quickstart Guide
+                </a>
                 <p>&nbsp;</p>
                 <h4>Using Homebrew?</h4>
                 <pre><code>brew update &amp;&amp; brew install hugo</code></pre>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </div>
-        <!-- /Call to Action -->
+        {{ "<!--call to action end-->" | safeHTML }}
 
-        <!-- Footer -->
-        <footer id="footer">
+        {{ "<!--footer start-->" | safeHTML }}
+        <footer>
           <div class="container">
+
+            {{ "<!--row start-->" | safeHTML }}
             <div class="row">
-              <div class="col-md-6 col-md-offset-3 text-center">
+              <div class="text-center col-md-6 col-md-offset-3">
                 <ul class="list-inline">
-                    <li><a href="https://twitter.com/spf13" class="icon-twitter icon-2x"></a></li>
-                    <li><a href="https://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>
+                    <li><a class="icon-twitter icon-2x" href="https://twitter.com/spf13"></a></li>
+                    <li><a class="icon-octocat icon-2x" href="https://github.com/spf13/hugo"></a></li>
                 </ul>
                 <hr>
                 <p>Copyright &copy; Steve Francia 2013&ndash;{{ .Now.Format "2006" }}</p>
               </div>
             </div>
+            {{ "<!--row end-->" | safeHTML }}
+
           </div>
         </footer>
-    <!-- /Footer -->
+        {{ "<!--footer end-->" | safeHTML }}
+
+  {{ "<!--JavaScript: Keep at the end of the document so the page loads faster-->" | safeHTML }}
+  <script src="/vendor/jquery/js/jquery-2.1.4.min.js"></script>
 
-  <!-- Bootstrap core JavaScript -->
-  <!-- Placed at the end of the document so the pages load faster -->
-  <script src="/js/jquery-2.1.4.min.js"></script>
-  <script src="/js/owl.carousel.min.js"></script>
-  <!--<script src="/js/bootstrap.min.js"></script>-->
+  {{ "<!--Bootstrap core JavaScript here-->" | safeHTML }}
+  {{ `<!--<script src="/vendor/twitter/js/bootstrap.min.js"></script>-->` | safeHTML }}
+
+  <script src="/vendor/OwlCarousel2/js/owl.carousel.min.js"></script>
+  <script src="/js/owl.carousel-custom.js"></script>
+
+  {{ "<!--custom JavaScript-->" | safeHTML }}
   <script>
     $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
@@ -242,25 +311,9 @@
           }
         });
       });
-    $('.owl-carousel').owlCarousel({
-        loop:true,
-        margin:10,
-        nav:true,
-        autoplay:true,
-        autoplayHoverPause:true,
-        autoplayTimeout:3000,
-        responsive:{
-            0:{
-                items:1
-            },
-            1000:{
-                items:3
-            },
-        }
-    })
-    </script>
-
-    {{ template "partials/analytics.html" . }}
-  </body>
+  </script>
 
+{{ "<!--Google analytics-->" | safeHTML }}
+{{ template "partials/analytics.html" . }}
+  </body>
 </html>
diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
index d13c101ff..6756e57cf 100644
--- a/docs/layouts/partials/footer.html
+++ b/docs/layouts/partials/footer.html
@@ -27,12 +27,13 @@
      <!--main content end-->
   </section>
   <!-- container section end -->
+
     <!-- javascripts -->
-    <script src="/js/jquery-2.1.4.min.js"></script>
-    <script src="/js/jquery.scrollTo.min.js"></script>
-    <script src="/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="/vendor/jquery/js/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="/vendor/flesler/js/jquery.scrollTo.min.js"></script>
+    <script type="text/javascript" src="/vendor/twitter/js/bootstrap.min.js"></script>
     <!--custom script for all page-->
-    <script src="/js/highlight.pack.js"></script>
+    <script type="text/javascript" src="/vendor/highlightjs/js/highlight.pack.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <script src="/js/scripts.js"></script>
     <!-- Algolia search -->
diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
index ff386eae4..f9b10d843 100644
--- a/docs/layouts/partials/header.html
+++ b/docs/layouts/partials/header.html
@@ -10,13 +10,16 @@
 {{ .Scratch.Add "title" "" }}{{ if isset .Site.Data.titles .Title }}{{ .Scratch.Set "title" (index .Site.Data.titles .Title).title }}{{ else }}{{ .Scratch.Set "title" .Title}}{{end}}
     <title>Hugo - {{ .Scratch.Get "title" }}</title>
 
-    <link href="/css/bootstrap-gohugo.css" rel="stylesheet">
-    <link href="/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-stripped-gohugo.css">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-changes-gohugo.
author	Mark D. Blackwell <markdblackwell01@gmail.com>	2016-10-01 22:19:22 -0400
committer	Mark D. Blackwell <markdblackwell01@gmail.com>	2016-10-01 22:19:22 -0400
commit	88ec7d88d1b77a407fd1050d107f3c58ab1804da (patch)
tree	d99c892f5fe2a7222fd8c0a2ce0e4b745059e9e0
parent	ffbf3dd31978b96a15452edc2823fc2f6fce8601 (diff)