Adding a bunch of new quotes to the front page and switching to Owl Carousel

docs/layouts/index.html

@@ -15,6 +15,8 @@
     <!-- Add custom CSS here -->
     <link href="/css/HPstyles.css" rel="stylesheet">
     <link href="/css/hugofont.css" rel="stylesheet">
+    <link href="/css/owl.carousel.css" rel="stylesheet">
+    <link href="/css/owl.theme.default.css" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
   </head>
@@ -131,22 +133,8 @@
             </div>
             <div class="row">
               <div class="col-md-12 text-center">
-
-                <div id="carousel-quotes" class="carousel slide" data-ride="carousel">
-                  <!-- Indicators -->
-                  <ol class="carousel-indicators">
-                    <li data-target="#carousel-quotes" data-slide-to="0" class="active"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="1"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="2"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="3"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="4"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="5"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="6"></li>
-                    <li data-target="#carousel-quotes" data-slide-to="7"></li>
-                  </ol>
-
                   <!-- Wrapper for slides -->
-                  <div class="carousel-inner">
+                  <div class="carousel-inner owl-carousel">
                       <div class="item active"> <blockquote><p>Hugo is super-rad. </p>&mdash; David Gay (@oddshocks) <a href="https://twitter.com/oddshocks/statuses/405083217893421056">November 25, 2013</a></blockquote> </div>
                       <div class="item"> <blockquote><p>I had a play with Hugo and it was good, uses Markdown files for content</p>&mdash; David Caunt (@dcaunt) <a href="https://twitter.com/dcaunt/statuses/406466996277374976">November 29, 2013</a></blockquote> </div>
                       <div class="item"> <blockquote><p>Even as a long-time Octopress fan, I’ve gotta admit that this project Hugo looks very very cool</p>&mdash; Douglas Stephen (@DougStephenJr) <a href="https://twitter.com/DougStephenJr/statuses/364512471660249088">August 5, 2013</a></blockquote> </div>
@@ -155,6 +143,21 @@
                       <div class="item"> <blockquote><p>I’m loving the static site generator renaissance we are currently enjoying. Hugo is new, looks great, written in Go</p>&mdash; Jim Biancolo (@jimbiancolo) <a href="https://twitter.com/jimbiancolo/statuses/408678420348813314">December 5, 2013</a></blockquote> </div>
                       <div class="item"> <blockquote><p>Good work on Hugo, I’m impressed with the speed!</p>&mdash; Ludovic Chabant (@ludovicchabant) <a href="https://twitter.com/ludovicchabant/statuses/408806199602053120">December 6, 2013</a></blockquote> </div>
                       <div class="item"> <blockquote><p>Checking out Hugo; Loving it so far. Like Jekyll but not so blog-oriented and written in go</p>&mdash; Jose Gonzalvo (@jgonzalvo) <a href="https://twitter.com/jgonzalvo/statuses/408177855819173888">December 4, 2013</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Building a personal website in Hugo. Works like a charm. And written in @golang!</p>&mdash; Jip J. Dekker (@jipjdekker) <a href="https://twitter.com/jipjdekker/status/413783548735152131">December 19, 2013</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>I love Hugo! My site is generated with it now http://rjrbt.io </p>&mdash; Nathan Toups (@rojoroboto) <a href="https://twitter.com/rojoroboto/status/423439915620106242">January 15, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>this is AWESOME. a single little executable and so fast.</p>&mdash; Luke Holder (@lukeholder) <a href="https://twitter.com/lukeholder/status/430352287936946176">February 3, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>OK, so in today's speed battle of static site generators, @spf13's hugo is kicking everyone's ass, by miles.</p>&mdash; Kieran Healy (@kjhealy) <a href="https://twitter.com/kjhealy/status/437349384809115648">February 22, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>I think I'm going to level up and try @spf13 's Hugo for my next project.</p>Dave Cheney (@davecheney ) <a href="https://twitter.com/davecheney/status/448036906740097024">March 24, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>I just fell in love with #hugo, a static site/blog engine written by @spf13 in #golang  + stellar docs</p>&mdash; Dave Cottlehuber (@dch__) <a href="https://twitter.com/dch__/status/460158115498176512">April 26, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Another site generated with Hugo here! I'm getting in love with it. </p>&mdash; Javier Segura (@jsegura) <a href="https://twitter.com/jsegura/status/465978434154659841">May 12, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>One more satisfied #Hugo blogger. Thanks @spf13 and friends!</p>&mdash; Michael Whatcott (@mdwhatcott) <a href="https://twitter.com/mdwhatcott/status/469980686531571712">May 23, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>The dev version of Hugo is AWESOME! <3 I promise, I will try to learn go ASAP and help contribute to the project! Just too great!</p>&mdash; Diti (@DitiPengi) <a href="https://twitter.com/DitiPengi/status/472470974051676160">May 30, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>#Hugo is the new @jekyllrb / @middlemanapp! Faster, easier and runs everywhere.</p>&mdash; Ruben Solvang (@messo85) <a href="https://twitter.com/messo85/status/472825062027182081">May 31, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Jekyll is dead to me these days though... long live Hugo! Hugo is *by far* the best in its field. Thanks for making it happen.</p>&mdash; The Lone Cuber (@TheLoneCuber) <a href="https://twitter.com/TheLoneCuber/status/495716684456398848">August 2, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Finally, a publishing platform that's a joy to use. #NoMoreBarriers</p>&mdash; The Lone Cuber (@TheLoneCuber) <a href="https://twitter.com/TheLoneCuber/status/495731334711488512">August 2, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Hugo: Makes the Web Fun Again</p>&mdash; mercime (@mercime_one) <a href="https://twitter.com/mercime_one/status/500547145087205377">August 16, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Hugo is fast, dead simple to setup and well documented</p>&mdash; Markus Eliasson (@markuseliasson) <a href="https://twitter.com/markuseliasson/status/501594865877008384">August 19, 2014</a></blockquote> </div>
+                      <div class="item"> <blockquote><p>Finally the answer to the question my parents have been asking: What does Hugo do?</p>&mdash; Hugo Roy (@hugoroyd) <a href="https://twitter.com/hugoroyd/status/501704796727173120">August 19, 2014</a></blockquote> </div>
                   </div>
 
                 </div>
@@ -237,7 +240,8 @@
   <!-- Bootstrap core JavaScript -->
   <!-- Placed at the end of the document so the pages load faster -->
   <script src="/js/jquery-2.1.1.min.js"></script>
-  <script src="/js/bootstrap.min.js"></script>
+  <script src="/js/owl.carousel.min.js"></script>
+  <!--<script src="/js/bootstrap.min.js"></script>-->
   <script>
     $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
@@ -255,7 +259,22 @@
           }
         });
       });
-    $('.carousel').carousel({ interval: 4500 })
+    $('.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" . }}

docs/static/css/HPstyles.css

@@ -258,38 +258,14 @@ footer a:hover {
     background: aliceblue;
 }
 
-div#carousel-quotes {
+.owl-carousel blockquote {
-    width:100%;
+    border-left: 0px;
 }
 
-.carousel-inner > .item {
+.owl-carousel a {
-    height: 16em;
+    color: #243382;
-    font-size: 140%;
 }
 
-@media all and (max-width: 685px) {
+.owl-carousel blockquote p {
-    .carousel-inner > .item {
+    font-size: 20pt;
-        height: 22em;
 }
-}
-
-@media all and (max-width: 1200px) and (min-width: 686px) {
-    .carousel-inner > .item {
-        height: 18em;
-    }
-}
-
-.slide blockquote {
-    border-left: 0;
-}
-
-.slide blockquote p {
-    font-size: 200%;
-    text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;
-}
-
-.slide blockquote > a {
-    display: block;
-    color: rgb(249, 176, 190);
-}
-

docs/static/css/owl.carousel.css

@@ -0,0 +1,216 @@
+/* 
+ *  Owl Carousel - Animate Plugin
+ */
+.owl-carousel .animated {
+  -webkit-animation-duration: 1000ms;
+  animation-duration: 1000ms;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.owl-carousel .owl-animated-in {
+  z-index: 0;
+}
+.owl-carousel .owl-animated-out {
+  z-index: 1;
+}
+.owl-carousel .fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+/* 
+ * 	Owl Carousel - Auto Height Plugin
+ */
+.owl-height {
+  -webkit-transition: height 500ms ease-in-out;
+  -moz-transition: height 500ms ease-in-out;
+  -ms-transition: height 500ms ease-in-out;
+  -o-transition: height 500ms ease-in-out;
+  transition: height 500ms ease-in-out;
+}
+
+/* 
+ *  Core Owl Carousel CSS File
+ */
+.owl-carousel {
+  display: none;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* position relative and z-index fix webkit rendering fonts issue */
+  position: relative;
+  z-index: 1;
+}
+.owl-carousel .owl-stage {
+  position: relative;
+  -ms-touch-action: pan-Y;
+}
+.owl-carousel .owl-stage:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+.owl-carousel .owl-stage-outer {
+  position: relative;
+  overflow: hidden;
+  /* fix for flashing background */
+  -webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-controls .owl-nav .owl-prev,
+.owl-carousel .owl-controls .owl-nav .owl-next,
+.owl-carousel .owl-controls .owl-dot {
+  cursor: pointer;
+  cursor: hand;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel.owl-loaded {
+  display: block;
+}
+.owl-carousel.owl-loading {
+  opacity: 0;
+  display: block;
+}
+.owl-carousel.owl-hidden {
+  opacity: 0;
+}
+.owl-carousel .owl-refresh .owl-item {
+  display: none;
+}
+.owl-carousel .owl-item {
+  position: relative;
+  min-height: 1px;
+  float: left;
+  -webkit-backface-visibility: hidden;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel .owl-item img {
+  display: block;
+  width: 100%;
+  -webkit-transform-style: preserve-3d;
+}
+.owl-carousel.owl-text-select-on .owl-item {
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.owl-carousel .owl-grab {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+.owl-carousel.owl-rtl {
+  direction: rtl;
+}
+.owl-carousel.owl-rtl .owl-item {
+  float: right;
+}
+
+/* No Js */
+.no-js .owl-carousel {
+  display: block;
+}
+
+/* 
+ * 	Owl Carousel - Lazy Load Plugin
+ */
+.owl-carousel .owl-item .owl-lazy {
+  opacity: 0;
+  -webkit-transition: opacity 400ms ease;
+  -moz-transition: opacity 400ms ease;
+  -ms-transition: opacity 400ms ease;
+  -o-transition: opacity 400ms ease;
+  transition: opacity 400ms ease;
+}
+.owl-carousel .owl-item img {
+  transform-style: preserve-3d;
+}
+
+/* 
+ * 	Owl Carousel - Video Plugin
+ */
+.owl-carousel .owl-video-wrapper {
+  position: relative;
+  height: 100%;
+  background: #000;
+}
+.owl-carousel .owl-video-play-icon {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  left: 50%;
+  top: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+  background: url("owl.video.play.png") no-repeat;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  -webkit-transition: scale 100ms ease;
+  -moz-transition: scale 100ms ease;
+  -ms-transition: scale 100ms ease;
+  -o-transition: scale 100ms ease;
+  transition: scale 100ms ease;
+}
+.owl-carousel .owl-video-play-icon:hover {
+  -webkit-transition: scale(1.3, 1.3);
+  -moz-transition: scale(1.3, 1.3);
+  -ms-transition: scale(1.3, 1.3);
+  -o-transition: scale(1.3, 1.3);
+  transition: scale(1.3, 1.3);
+}
+.owl-carousel .owl-video-playing .owl-video-tn,
+.owl-carousel .owl-video-playing .owl-video-play-icon {
+  display: none;
+}
+.owl-carousel .owl-video-tn {
+  opacity: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+  -webkit-transition: opacity 400ms ease;
+  -moz-transition: opacity 400ms ease;
+  -ms-transition: opacity 400ms ease;
+  -o-transition: opacity 400ms ease;
+  transition: opacity 400ms ease;
+}
+.owl-carousel .owl-video-frame {
+  position: relative;
+  z-index: 1;
+}

docs/static/css/owl.theme.default.css

@@ -0,0 +1,60 @@
+/* 
+ * 	Default theme - Owl Carousel CSS File
+ */
+.owl-theme .owl-nav {
+  margin-top: 10px;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.owl-theme .owl-nav [class*='owl-'] {
+  color: white;
+  font-size: 14px;
+  margin: 5px;
+  padding: 4px 7px;
+  background: #d6d6d6;
+  display: inline-block;
+  cursor: pointer;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.owl-theme .owl-nav [class*='owl-']:hover {
+  background: #869791;
+  color: white;
+  text-decoration: none;
+}
+.owl-theme .owl-nav .disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.owl-theme .owl-nav.disabled + .owl-dots {
+  margin-top: 10px;
+}
+.owl-theme .owl-dots {
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.owl-theme .owl-dots .owl-dot {
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.owl-theme .owl-dots .owl-dot span {
+  width: 10px;
+  height: 10px;
+  margin: 5px 7px;
+  background: #d6d6d6;
+  display: block;
+  -webkit-backface-visibility: visible;
+  -webkit-transition: opacity 200ms ease;
+  -moz-transition: opacity 200ms ease;
+  -ms-transition: opacity 200ms ease;
+  -o-transition: opacity 200ms ease;
+  transition: opacity 200ms ease;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  border-radius: 30px;
+}
+.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
+  background: #869791;
+}