github/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-11-21 20:46:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

A bunch of style updates. Switching to bootstrap carousel.

Browse source
This commit is contained in:
spf13 2014-01-10 12:48:55 -05:00
parent 01da9a40e6
commit 74d7ae1f8f
5 changed files with 147 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/layouts/chrome/includes.html
View file

@ -1,3 +1,4 @@
<link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/static/css/styles.css" rel="stylesheet"/>
<link href="/static/css/hugofont.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Arbutus+Slab&family=Cabin:600&family=Source+Code+Pro' rel='stylesheet' type='text/css'>

86
docs/layouts/index.html
View file

@ -11,6 +11,7 @@
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Arbutus+Slab&family=Cabin:600&family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="/static/css/HPstyles.css" rel="stylesheet">
<link href="/static/css/hugofont.css" rel="stylesheet">
@ -24,9 +25,9 @@
<h1>Hugo</h1>
<h3>The <em>Fast and Flexible</em> Static Site Generator</h3>
<br>
<a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</a>
<a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">DOWNLOAD <i class="icon-arrow-down"></i></a><br>
<a href="/overview/quickstart/" class="btn btn-info btn-lg">DOCUMENTATION</a>
<a href="#intro" class="btn btn-clear btn-lg">learn more</a>
<a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">download <i class="icon-arrow-down"></i></a><br>
<a href="/overview/quickstart/" class="btn btn-info btn-lg">documentation</a>
</div>
</div>
<!-- /Full Page Image Header Area -->
@ -62,10 +63,10 @@
<i class="point-icon icon-windows8"></i>
<h2>Run Anywhere</h2>
<p class="lead">
Hugo is written in pure go. It is packaged as a single binary for easy installation.
<b>Hugo doesn&#39;t depend on administrative privileges, databases, runtimes, interpreters
or packages</b>. Hugo is quite possibly the easiest to install software you&#39;ve ever used.
Simply download and run.
Hugo is written in pure go. It is packaged as a single binary for easy installation.
<b>Hugo doesn&#39;t depend on administrative privileges, databases, runtimes, interpreters
or packages</b>. Hugo is quite possibly the easiest to install software you&#39;ve ever used.
Simply download and run.
</p>
</div>
</div>
@ -84,8 +85,8 @@
Hugo is written for speed and performance. Great care has been
taken to ensure that Hugo build time is as short as possible.
While many factors contribute (cpu, disk speed, # of indexes)
the vast majority of websites render in less than a second.
While many factors contribute (cpu, disk speed, # of indexes)
the vast majority of websites render in less than a second.
</p>
</div>
</div>
@ -102,11 +103,11 @@
<h2>Flexible</h2>
<p class="lead">
Hugo is designed to work how you do. Declare your own content
types. Define your own meta data in YAML, TOML or JSON.
Hugo is designed to work how you do. Declare your own content
types. Define your own meta data in YAML, TOML or JSON.
Organize your content however you want with any URL structure.
Use indexes to group your content however you want. Best of all
this is all done with virtually no configuration, Hugo
Use indexes to group your content however you want. Best of all
this is all done with virtually no configuration, Hugo
just works.
</p>
@ -120,22 +121,40 @@
<div class="callout">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center">
<div class="col-md-12 text-center">
<i class="callout-icon icon-circlestar"></i>
<div class="banner">
<ul>
<li><blockquote class="twitter-tweet" lang="en"><p>Hugo is super-rad. </p>&mdash; David Gay (@oddshocks) <a href="https://twitter.com/oddshocks/statuses/405083217893421056">November 25, 2013</a></blockquote>
</li>
<li><blockquote class="twitter-tweet" data-conversation="none" lang="en"><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> </li>
<li><blockquote class="twitter-tweet" lang="en"><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></li>
<li><blockquote class="twitter-tweet" lang="en"><p>A static site generator without the long build times? Yes, please! </p>&mdash; Josh Matz (@joshmatz) <a href="https://twitter.com/joshmatz/statuses/364437436870696960">August 5, 2013</a></blockquote> </li>
<li><blockquote class="twitter-tweet" lang="en"><p>Finally someone builds me my own static site generator </p>&mdash; Hugo Rodger-Brown (@hugorodgerbrown) <a href="https://twitter.com/hugorodgerbrown/statuses/364417910153818112">August 5, 2013</a></blockquote></li>
<li><blockquote class="twitter-tweet" lang="en"><p>I&#39;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>
</li>
<li><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>Good work on Hugo, I&#39;m impressed with the speed!</p>&mdash; Ludovic Chabant (@ludovicchabant) <a href="https://twitter.com/ludovicchabant/statuses/408806199602053120">December 6, 2013</a></blockquote></li>
<li><blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>Checking out Hugo; Loving it so far. Like Jekyll but not so blog-oriented and written in golang</p>&mdash; Jose Gonzalvo (@jgonzalvo) <a href="https://twitter.com/jgonzalvo/statuses/408177855819173888">December 4, 2013</a></blockquote></li>
</ul>
<p></p>
</div>
</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="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>
<div class="item"> <blockquote><p>A static site generator without the long build times? Yes, please! </p>&mdash; Josh Matz (@joshmatz) <a href="https://twitter.com/joshmatz/statuses/364437436870696960">August 5, 2013</a></blockquote> </div>
<div class="item"> <blockquote><p>Finally someone builds me my own static site generator </p>&mdash; Hugo Rodger-Brown (@hugorodgerbrown) <a href="https://twitter.com/hugorodgerbrown/statuses/364417910153818112">August 5, 2013</a></blockquote> </div>
<div class="item"> <blockquote><p>I&#39;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&#39;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 golang</p>&mdash; Jose Gonzalvo (@jgonzalvo) <a href="https://twitter.com/jgonzalvo/statuses/408177855819173888">December 4, 2013</a></blockquote> </div>
</div>
</div>
</div>
</div>
</div>
@ -205,7 +224,7 @@
<li><a href="http://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>
</ul>
<hr>
<p>Copyright &copy; Steve Francia 2013</p>
<p>Copyright &copy; Steve Francia 2013</p>
</div>
</div>
</div>
@ -215,7 +234,6 @@
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.js"></script>
<script src="/static/js/unslider.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
$(function() {
@ -234,15 +252,7 @@
}
});
});
$(function() {
$('.banner').unslider({
speed: 300, // The speed to animate each slide (in milliseconds)
delay: 2000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: true // Support responsive design. May break non-responsive designs
});
});
$('.carousel').carousel({ interval: 4500 })
</script>
{{ template "chrome/analytics.html" . }}

85
docs/static/static/css/HPstyles.css vendored
View file

@ -7,6 +7,16 @@ body {
letter-spacing: 0.5px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cabin', "Helvetica Neue", "Helvitica", "Serif";
}
body {
font-family: 'Arbutus Slab', "Helvetica Neue", "Helvitica", "Serif" !important;
line-height: 1.6;
}
.vert-text {
display: table-cell;
vertical-align: middle;
@ -107,11 +117,11 @@ and (orientation : landscape) {
.counterpoint {
padding: 50px 0;
background-color: white;
background-color: rgb(255, 252, 244);
}
.point {
background: rgb(22, 203, 230);
background: rgb(96,210,211);
padding: 50px 0;
color: #ffffff;
}
@ -120,6 +130,11 @@ and (orientation : landscape) {
margin-bottom: 15px;
}
.point h2, .counterpoint h2 {
font-size: 32pt;
line-height: 1.7;
}
i.callout-icon, i.point-icon, i.lead-icon {
border-radius: 50%;
display: inline-block;
@ -174,32 +189,13 @@ i.service-icon:hover {
display: table;
height: 420px;
width: 100%;
background-color: rgb(47, 197, 47);
background-color: rgb(118,156,172);
padding: 50px 0;
color: #ffffff;
}
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; font-size:28px; padding: 1.7em 3em 0 3em; font-weight:200; }
.banner ul li { float: left; }
.banner blockquote {
border-left: 0;
font-size: 20px;
font-weight:100;
}
.banner blockquote p {
font-size: 34px;
text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;
}
.banner blockquote > a {
display: block;
}
i.callout-icon:hover {
color: rgb(47, 197, 47);
color: rgb(249, 176, 190);
border: 3px solid #fff;
background: #fff;
}
@ -272,15 +268,15 @@ footer a:hover {
text-decoration: none;
}
div.point a {
color: #0a5175;
.point a, .counterpoint a {
color: rgb(7,162,166);
}
/* Bootstrap Addons */
.btn-clear {
color: #444;
color:#888;
background-color: rgba(255, 255, 255, 0.5);
border-color: #FFF;
}
@ -300,3 +296,40 @@ div.point a {
.open .dropdown-toggle.btn-clear {
background-image: none;
}
div#carousel-quotes {
width:100%;
}
.carousel-inner > .item {
height: 16em;
font-size: 140%;
}
@media all and (max-width: 685px) {
.carousel-inner > .item {
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);
}

43
docs/static/static/css/styles.css vendored
View file

@ -2,19 +2,52 @@ body {
background-color: rgb(253, 253, 251);
padding-top: 70px;
letter-spacing: 0.3px;
font-family: 'Arbutus Slab', "Helvetica Neue", "Helvitica", "Serif";
}
#main.container {
font-size: 21px;
line-height: 175%;
}
h1, h2, h3 {
padding-bottom: .3em;
padding-top: 1.4em;
margin-bottom: .7em;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(25,71,86);
font-family: 'Cabin', "Helvetica Neue", "Helvitica", "Serif";
}
h1 {
font-size: 46px;
padding-top: .3em;
}
h1, h2 {
border-bottom: 1px solid #CCC;
}
pre {
background-color: #022b34;
color: #e6e6e6;
font-family: 'Source Code Pro', sans-serif;
font-size: 17px;
line-height: 1.2;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
a {
color: rgb(0,140,158);
color: rgb(96,210,211);
}
a:hover {
color: rgb(21,201,239);
color: rgb(15, 166, 188);
}
#footer {
@ -22,7 +55,7 @@ a:hover {
}
nav.navbar {
background: none repeat scroll 0% 0% rgb(22, 203, 230);
background: none repeat scroll 0% 0% rgb(96,210,211);
border-top: 4px solid rgb(15, 166, 188);
border-bottom: 1px solid rgb(15, 166, 188);
opacity: .97;
@ -76,7 +109,9 @@ nav.navbar {
}
.highlight {
background-color: #fdfdfb !important;
}
#main table{width:100%;margin-bottom:20px;}#main table thead>tr>th,#main table tbody>tr>th,#main table tfoot>tr>th,#main table thead>tr>td,#main table tbody>tr>td,#main table tfoot>tr>td{padding:8px;line-height:1.428571429;vertical-align:top;border-top:1px solid #dddddd;}
#main table thead>tr>th{vertical-align:bottom;border-bottom:2px solid #dddddd;}

1
docs/static/static/js/unslider.min.js vendored
View file

@ -1 +0,0 @@
(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,n);this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();if(this.opts.fluid){var r=function(){n.el.css("width",Math.min(Math.round(n.el.outerWidth()/n.el.parent().outerWidth()*100),100)+"%")};r();e(window).resize(r)}if(this.opts.arrows){this.el.parent().append('<p class="arrows"><span class="prev">←</span><span class="next">→</span></p>').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}if(e.event.swipe){this.el.on("swipeleft",n.prev).on("swiperight",n.next)}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){n.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return n.stop().move(n.current+1)};this.prev=function(){return n.stop().move(n.current-1)};this.dots=function(){var t='<ol class="dots">';e.each(this.items,function(e){t+='<li class="dot'+(e<1?" active":"")+'">'+(e+1)+"</li>"});t+="</ol>";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false)