mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-21 20:46:30 -05:00
Adding a bunch of new quotes to the front page and switching to Owl Carousel
This commit is contained in:
parent
d202050684
commit
f36ed446cc
5 changed files with 320 additions and 47 deletions
|
@ -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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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>— 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" . }}
|
||||
|
|
36
docs/static/css/HPstyles.css
vendored
36
docs/static/css/HPstyles.css
vendored
|
@ -258,38 +258,14 @@ footer a:hover {
|
|||
background: aliceblue;
|
||||
}
|
||||
|
||||
div#carousel-quotes {
|
||||
width:100%;
|
||||
.owl-carousel blockquote {
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
.carousel-inner > .item {
|
||||
height: 16em;
|
||||
font-size: 140%;
|
||||
.owl-carousel a {
|
||||
color: #243382;
|
||||
}
|
||||
|
||||
@media all and (max-width: 685px) {
|
||||
.carousel-inner > .item {
|
||||
height: 22em;
|
||||
}
|
||||
.owl-carousel blockquote p {
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
@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
216
docs/static/css/owl.carousel.css
vendored
Normal 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
60
docs/static/css/owl.theme.default.css
vendored
Normal 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
2
docs/static/js/owl.carousel.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue