Add quotes to homepage

data/references.toml

@@ -1,17 +1,3 @@
-[[quotes]]
-name = "Execute‏‏"
-twitter_handle = "@executerun"
-quote = "Hah, #gohugo. I was working with #gohugo on #linux but now I realised how easy is to set-up it on #windows. Just need to add binary to #path!"
-link = "https://twitter.com/executerun/status/809753145270272005"
-date = 2016-12-16T00:00:00Z
-
-[[quotes]]
-name = "Janez Čadež‏"
-twitter_handle = "@jamziSLO"
-quote = "Building @garazaFRI website in #hugo. This static site generator is soooo damn fast!"
-link = "https://twitter.com/jamziSLO/status/817720283977183234"
-date = 2017-01-07T00:00:00Z
-
 [[quotes]]
 name = "Hans Beck"
 twitter_handle = "@EnrichedGamesHB"
@@ -26,6 +12,20 @@ quote = "I migrated the <a href='https://twitter.com/BlackOpsTesting'> @BlackOps
 link = "https://twitter.com/eviltester/status/553520335115808768"
 date = 2015-01-09T00:00:00Z
 
+[[quotes]]
+name = "Janez Čadež‏"
+twitter_handle = "@jamziSLO"
+quote = "Building @garazaFRI website in #hugo. This static site generator is soooo damn fast!"
+link = "https://twitter.com/jamziSLO/status/817720283977183234"
+date = 2017-01-07T00:00:00Z
+
+[[quotes]]
+name = "Execute‏‏"
+twitter_handle = "@executerun"
+quote = "Hah, #gohugo. I was working with #gohugo on #linux but now I realised how easy is to set-up it on #windows. Just need to add binary to #path!"
+link = "https://twitter.com/executerun/status/809753145270272005"
+date = 2016-12-16T00:00:00Z
+
 [[quotes]]
 name = "Baron Schwartz"
 twitter_handle = "@xaprb"

layouts/partials/homepage/homepage-content.html

@@ -14,23 +14,19 @@
       <div class="half">
         <div class="svgs">
           {{partial "svg-icons/gopher-small.svg" .}}
-          <!-- <div class="img-wrapper">
-            <img id="gme" src="/images/homepage/gme.png" alt="">
-          </div> -->
           {{partial "svg-icons/md.svg" .}}
         </div>
         <div class="homepage-terminal">
           $ brew update
           <br> $ brew install hugo
         </div>
-        <!-- <div class="cool-gopher">
-          <img src="/images/homepage/gme2.png" alt="" id="gme-2">
-        </div> -->
       </div>
       <div class="half half-content">
         <h2>You only have so much time...</h2>
         <hr class="hr">
-        <p>Hugo let's you focus your energy on creating great content rather than databases, caching layers, security updates, and staring at your screen waiting for your site to rebuild.</p>
+        <p>Forget databases, security updates, and cofee breaks spent waiting for your site to rebuild.</p>
+        <p>Focus on content. Focus on design.</p>
+        <p>Hugo's the first static site generator fast enough to keep up with your creativiy.</p>
       </div>
     </div>
   </div>
@@ -38,6 +34,7 @@
     <h2>What makes Hugo different?</h2>
   </div>
   <div class="home-row references">
-    <h2>References</h2> {{ partial "homepage/homepage-references.html" . }}
+    <h2>See what others are saying about Hugo</h2>
+    {{ partial "homepage/homepage-references.html" . }}
   </div>
 </main>

layouts/partials/homepage/homepage-references.html

@@ -0,0 +1,12 @@
+{{ range last 8 (sort $.Site.Data.references.quotes "date" )  }}
+<div class="item">
+	<blockquote>
+		<p>
+     {{.quote | safeHTML}}
+		</p>
+		<cite>&#9472; {{ .name }} ({{ .twitter_handle }}) <a href="{{ .link }}">
+            {{ dateFormat "January 2, 2006" .date }}
+        </a></cite>
+	</blockquote>
+</div>
+{{ end }}

pipeline/scss/components/_code.scss

@@ -10,6 +10,7 @@
   }
   > pre {
     position: relative;
+    margin-bottom: 1.5em;
   }
   pre > code,
   .code {
@@ -43,6 +44,7 @@
   overflow: hidden;
   padding: .5em;
   overflow-y: visible;
+  margin-bottom: 1.5em;
 }
 
 code[class^="language-"] {
@@ -190,7 +192,6 @@ code.language-markdown:after {
   display: none!important;
 }
 
-
 .tooltipped {
   position: absolute;
   // background-color: $code-tooltip-bg-color;

pipeline/scss/pages/_homepage.scss

@@ -139,7 +139,7 @@
 .half.half-content {
   align-items: flex-start;
   justify-content: space-between;
-  padding-top:30px;
+  padding-top: 30px;
   h2 {
     width: 100%;
     font-size: 22px;
@@ -147,19 +147,22 @@
     font-weight: 500;
   }
   p {
-    text-align:center;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-hr,.hr {
+hr,
+.hr {
   border: 0;
   height: 1px;
-  opacity:1;
+  opacity: 1;
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-  width:100%;
+  width: 100%;
   margin: {
-    bottom:2.5em;
-    top:2.5em;
+    bottom: 2.5em;
+    top: 2.5em;
   }
 }
 
@@ -216,6 +219,9 @@ hr,.hr {
       margin-top: 30px;
     }
   }
+  @include MQ(L) {
+    margin-top: 3.5em;
+  }
 }
 
 #hugopher-front {