Some mobile and other fixes for docs

docs/layouts/chrome/analytics.html

@@ -0,0 +1,10 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-7131036-4', 'spf13.com');
+  ga('send', 'pageview');
+
+</script>

docs/layouts/chrome/footer.html

@@ -12,6 +12,7 @@
       </div>
       <script src="/static/js/jquery.js"></script>
       <script src="/static/js/bootstrap.min.js"></script>
+    {{ template "chrome/analytics.html" . }}
   </body>
 
 </html>

docs/layouts/index.html

@@ -24,9 +24,8 @@
         <h1>Hugo</h1>
         <h3>The <em>Fast and Flexible</em> Static Site Generator</h3>
         <br>
-        <a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</a>&nbsp; &nbsp;
+        <a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</a>
         <a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">DOWNLOAD <i class="icon-arrow-down"></i></a><br>
-        <br>
         <a href="/overview/quickstart/" class="btn btn-info btn-lg">DOCUMENTATION</a>
       </div>
     </div>
@@ -161,8 +160,8 @@
             <div class="row">
               <div class="col-md-6 col-md-offset-3 text-center">
                 <h3>Get Started Today!</h3>
-                <a href="/overview/quickstart" class="btn btn-md btn-default">Documentation</a>
                 <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;">Documentation</a>
               </div>
             </div>
           </div>
@@ -211,6 +210,7 @@
       });
     </script>
 
+    {{ template "chrome/analytics.html" . }}
   </body>
 
 </html>

docs/static/static/css/HPstyles.css

@@ -24,8 +24,9 @@ body {
 
 .header {
     display: table;
-    height: 85%;
+    height: 70%;
     width: 100%;
+    min-height: 70%;
     position: relative;
     background: url(../img/converse-fields.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
@@ -36,6 +37,43 @@ body {
     background-color: black;
 }
 
+@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/converse-fields-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/converse-fields-long.jpg) no-repeat;
+        background-size: 100% 100%;
+        z-index: 99999;
+        background-color: black;
+    }
+}
+
+.header .btn {
+    margin: 10px;
+}
+
 #main {
     z-index: 99999;
     position: relative;
@@ -136,7 +174,7 @@ i.service-icon:hover {
     display: table;
     height: 400px;
     width: 100%;
-    background: url(../img/section-two.JPG) no-repeat center center fixed; 
+    background: url(/static/img/section-two.JPG) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
@@ -168,7 +206,7 @@ i.service-icon:hover {
 }
 
 #action {
-    background: url(../img/gray.png);
+    background: url(/static/img/gray.png);
     padding: 50px 0px 30px;
     position: fixed;
     bottom: 130px;
@@ -219,8 +257,8 @@ div.point a {
 
 
 .btn-clear {
-    color: #FFF;
-    background-color: rgba(255, 255, 255, 0.19);
+    color: #444;
+    background-color: rgba(255, 255, 255, 0.5);
     border-color: #FFF;
 }