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

This commit is contained in:
spf13 2014-09-01 10:00:06 -04:00
parent d202050684
commit f36ed446cc
5 changed files with 320 additions and 47 deletions

View file

@ -15,6 +15,8 @@
<!-- Add custom CSS here --> <!-- Add custom CSS here -->
<link href="/css/HPstyles.css" rel="stylesheet"> <link href="/css/HPstyles.css" rel="stylesheet">
<link href="/css/hugofont.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="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head> </head>
@ -131,22 +133,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12 text-center"> <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 --> <!-- 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 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>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, Ive 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> <div class="item"> <blockquote><p>Even as a long-time Octopress fan, Ive 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>Im 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>Im 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, Im 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>Good work on Hugo, Im 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>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>
</div> </div>
@ -237,7 +240,8 @@
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster --> <!-- 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/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> <script>
$(function() { $(function() {
$('a[href*=#]:not([href=#])').click(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> </script>
{{ template "partials/analytics.html" . }} {{ template "partials/analytics.html" . }}

View file

@ -258,38 +258,14 @@ footer a:hover {
background: aliceblue; 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);
}

216
docs/static/css/owl.carousel.css vendored Normal file
View file

@ -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;
}

60
docs/static/css/owl.theme.default.css vendored Normal file
View file

@ -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;
}

2
docs/static/js/owl.carousel.min.js vendored Normal file

File diff suppressed because one or more lines are too long