From 4e4ea9583f08c7f2fdd9fa1e8a37d0321e841aa5 Mon Sep 17 00:00:00 2001
From: Alex Dunn <dunn.alex@gmail.com>
Date: Mon, 22 Sep 2014 16:58:30 -0700
Subject: [PATCH] instructions for Homebrew installation

updated installation page of documentation, and changed "Download" button on index.html to scroll to bottom where multiple installation options are featured

getting the scrolldown to work required removing the fixed positioning on #action and on the footer
---
 docs/content/overview/installing.md |  5 ++++-
 docs/layouts/index.html             |  8 +++----
 docs/static/css/HPstyles.css        | 34 ++++++++++++++---------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/docs/content/overview/installing.md b/docs/content/overview/installing.md
index 825ff76e0..1ae80682d 100644
--- a/docs/content/overview/installing.md
+++ b/docs/content/overview/installing.md
@@ -25,9 +25,12 @@ Once downloaded it can be run from anywhere. You don't need to install
 it into a global location. This works well for shared hosts and other systems
 where you don't have a privileged account.
 
-Ideally you should install it somewhere in your path for easy use. `/usr/local/bin` 
+Ideally you should install it somewhere in your path for easy use. `/usr/local/bin`
 is the most probable location.
 
+If you have [Homebrew](http://brew.sh), installation is even easier.  Just run
+`brew install hugo`.
+
 ### Installing Pygments (optional)
 
 The Hugo executable has one *optional* external dependency for source code highlighting (Pygments).
diff --git a/docs/layouts/index.html b/docs/layouts/index.html
index 23367cf04..83bb72e8c 100755
--- a/docs/layouts/index.html
+++ b/docs/layouts/index.html
@@ -29,7 +29,7 @@
         <a href="#intro"><img src="/img/hugo.png" class="logo"> </a>
         <div class="buttonbox">
         <a href="/overview/introduction" class="btn btn-primary btn-lg">Docs <i class="icon-idea"></i></a>
-        <a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">Download <i class="icon-arrow-down"></i></a>
+        <a href="#action" class="btn btn-success btn-lg">Download <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>
         </div>
@@ -111,7 +111,7 @@
                 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. 
+                Use indexes to group your content however you want.
                 Best of all this is all done with virtually no configuration, Hugo
                 just works.
 
@@ -211,6 +211,7 @@
             <div class="row">
               <div class="col-md-10 col-md-offset-1 text-center">
                 <h3>Get Started Today!</h3>
+                <pre><code>brew install hugo</code></pre>
                 <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/introduction" style="color:white;font-weight:300;">Documentation</a>
               </div>
@@ -218,7 +219,6 @@
           </div>
         </div>
         <!-- /Call to Action -->
-        <div id="footerSpacer"></div>
 
         <!-- Footer -->
         <footer id="footer">
@@ -245,7 +245,7 @@
   <script>
     $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
-          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
+          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
               || location.hostname == this.hostname) {
 
             var target = $(this.hash);
diff --git a/docs/static/css/HPstyles.css b/docs/static/css/HPstyles.css
index 85afa322e..8c7f88e14 100755
--- a/docs/static/css/HPstyles.css
+++ b/docs/static/css/HPstyles.css
@@ -42,7 +42,7 @@ body {
 }
 
 .logo {
-    max-width: 35em; 
+    max-width: 35em;
     width: 100%;
     padding: 2em;
 }
@@ -51,7 +51,7 @@ body {
     margin: 2em 0 4em;
 }
 
-@media only screen 
+@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
@@ -68,7 +68,7 @@ and (orientation : portrait)
     }
 }
 
-@media only screen 
+@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 1024px)
 and (orientation : landscape) {
@@ -192,27 +192,25 @@ i.callout-icon:hover {
 
 #action {
     background: url(../img/gray.png);
-    padding: 50px 0px 30px;
-    position: fixed;
-    bottom: 130px;
-    z-index: 99998;
+    padding: 30px 0px 40px;
     width: 100%;
 }
-
-#footerSpacer {
-    display: block;
-    min-height: 310px;
-    background-color: rgba(0, 0, 0, 0);
+#action pre {
+    background-color: #545454;
+    color: #f9f2f4;
+}
+#action pre:hover {
+    background-color: #f9f2f4;
+    color: #545454;
+}
+#action code {
+    font-family: Lato, monospace;
+    font-size: 14pt;
 }
 
 #footer {
-    bottom: 0px;
-    left: 0px;
-    padding: 10px 0px;
-    position: fixed;
-    width: 100%;
     font-size: 14px;
-    z-index: 99998;
+    padding: 50px 0px 25px 0px;
     background: rgb(255, 255, 255);
 }