A bunch of style updates. Switching to bootstrap carousel.

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

View file

@ -1,3 +1,4 @@
<link href="/static/css/bootstrap.min.css" rel="stylesheet"/> <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/static/css/styles.css" rel="stylesheet"/> <link href="/static/css/styles.css" rel="stylesheet"/>
<link href="/static/css/hugofont.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'>

View file

@ -11,6 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet"> <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 --> <!-- Add custom CSS here -->
<link href="/static/css/HPstyles.css" rel="stylesheet"> <link href="/static/css/HPstyles.css" rel="stylesheet">
<link href="/static/css/hugofont.css" rel="stylesheet"> <link href="/static/css/hugofont.css" rel="stylesheet">
@ -24,9 +25,9 @@
<h1>Hugo</h1> <h1>Hugo</h1>
<h3>The <em>Fast and Flexible</em> Static Site Generator</h3> <h3>The <em>Fast and Flexible</em> Static Site Generator</h3>
<br> <br>
<a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</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="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="/overview/quickstart/" class="btn btn-info btn-lg">documentation</a>
</div> </div>
</div> </div>
<!-- /Full Page Image Header Area --> <!-- /Full Page Image Header Area -->
@ -62,10 +63,10 @@
<i class="point-icon icon-windows8"></i> <i class="point-icon icon-windows8"></i>
<h2>Run Anywhere</h2> <h2>Run Anywhere</h2>
<p class="lead"> <p class="lead">
Hugo is written in pure go. It is packaged as a single binary for easy installation. 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 <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. or packages</b>. Hugo is quite possibly the easiest to install software you&#39;ve ever used.
Simply download and run. Simply download and run.
</p> </p>
</div> </div>
</div> </div>
@ -84,8 +85,8 @@
Hugo is written for speed and performance. Great care has been Hugo is written for speed and performance. Great care has been
taken to ensure that Hugo build time is as short as possible. taken to ensure that Hugo build time is as short as possible.
While many factors contribute (cpu, disk speed, # of indexes) While many factors contribute (cpu, disk speed, # of indexes)
the vast majority of websites render in less than a second. the vast majority of websites render in less than a second.
</p> </p>
</div> </div>
</div> </div>
@ -102,11 +103,11 @@
<h2>Flexible</h2> <h2>Flexible</h2>
<p class="lead"> <p class="lead">
Hugo is designed to work how you do. Declare your own content Hugo is designed to work how you do. Declare your own content
types. Define your own meta data in YAML, TOML or JSON. types. Define your own meta data in YAML, TOML or JSON.
Organize your content however you want with any URL structure. Organize your content however you want with any URL structure.
Use indexes to group your content however you want. Best of all Use indexes to group your content however you want. Best of all
this is all done with virtually no configuration, Hugo this is all done with virtually no configuration, Hugo
just works. just works.
</p> </p>
@ -120,22 +121,40 @@
<div class="callout"> <div class="callout">
<div class="container"> <div class="container">
<div class="row"> <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> <i class="callout-icon icon-circlestar"></i>
<div class="banner"> <p></p>
<ul> </div>
<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> </div>
</li> <div class="row">
<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> <div class="col-md-12 text-center">
<li><blockquote class="twitter-tweet" lang="en"><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></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> <div id="carousel-quotes" class="carousel slide" data-ride="carousel">
<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> <!-- Indicators -->
<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> <ol class="carousel-indicators">
</li> <li data-target="#carousel-quotes" data-slide-to="0" class="active"></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 data-target="#carousel-quotes" data-slide-to="1"></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> <li data-target="#carousel-quotes" data-slide-to="2"></li>
</ul> <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, 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>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>
</div> </div>
</div> </div>
@ -205,7 +224,7 @@
<li><a href="http://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li> <li><a href="http://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>
</ul> </ul>
<hr> <hr>
<p>Copyright &copy; Steve Francia 2013</p> <p>Copyright &copy; Steve Francia 2013</p>
</div> </div>
</div> </div>
</div> </div>
@ -215,7 +234,6 @@
<!-- 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="/static/js/jquery.js"></script> <script src="/static/js/jquery.js"></script>
<script src="/static/js/unslider.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script> <script src="/static/js/bootstrap.min.js"></script>
<script> <script>
$(function() { $(function() {
@ -234,15 +252,7 @@
} }
}); });
}); });
$(function() { $('.carousel').carousel({ interval: 4500 })
$('.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
});
});
</script> </script>
{{ template "chrome/analytics.html" . }} {{ template "chrome/analytics.html" . }}

View file

@ -7,6 +7,16 @@ body {
letter-spacing: 0.5px; 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 { .vert-text {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
@ -107,11 +117,11 @@ and (orientation : landscape) {
.counterpoint { .counterpoint {
padding: 50px 0; padding: 50px 0;
background-color: white; background-color: rgb(255, 252, 244);
} }
.point { .point {
background: rgb(22, 203, 230); background: rgb(96,210,211);
padding: 50px 0; padding: 50px 0;
color: #ffffff; color: #ffffff;
} }
@ -120,6 +130,11 @@ and (orientation : landscape) {
margin-bottom: 15px; margin-bottom: 15px;
} }
.point h2, .counterpoint h2 {
font-size: 32pt;
line-height: 1.7;
}
i.callout-icon, i.point-icon, i.lead-icon { i.callout-icon, i.point-icon, i.lead-icon {
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
@ -174,32 +189,13 @@ i.service-icon:hover {
display: table; display: table;
height: 420px; height: 420px;
width: 100%; width: 100%;
background-color: rgb(47, 197, 47); background-color: rgb(118,156,172);
padding: 50px 0; padding: 50px 0;
color: #ffffff; 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 { i.callout-icon:hover {
color: rgb(47, 197, 47); color: rgb(249, 176, 190);
border: 3px solid #fff; border: 3px solid #fff;
background: #fff; background: #fff;
} }
@ -272,15 +268,15 @@ footer a:hover {
text-decoration: none; text-decoration: none;
} }
div.point a { .point a, .counterpoint a {
color: #0a5175; color: rgb(7,162,166);
} }
/* Bootstrap Addons */ /* Bootstrap Addons */
.btn-clear { .btn-clear {
color: #444; color:#888;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: #FFF; border-color: #FFF;
} }
@ -300,3 +296,40 @@ div.point a {
.open .dropdown-toggle.btn-clear { .open .dropdown-toggle.btn-clear {
background-image: none; 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);
}

View file

@ -2,19 +2,52 @@ body {
background-color: rgb(253, 253, 251); background-color: rgb(253, 253, 251);
padding-top: 70px; padding-top: 70px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
font-family: 'Arbutus Slab', "Helvetica Neue", "Helvitica", "Serif";
}
#main.container {
font-size: 21px;
line-height: 175%;
} }
h1, h2, h3 { h1, h2, h3 {
padding-bottom: .3em;
padding-top: 1.4em;
margin-bottom: .7em;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(25,71,86); 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 { a {
color: rgb(0,140,158); color: rgb(96,210,211);
} }
a:hover { a:hover {
color: rgb(21,201,239); color: rgb(15, 166, 188);
} }
#footer { #footer {
@ -22,7 +55,7 @@ a:hover {
} }
nav.navbar { 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-top: 4px solid rgb(15, 166, 188);
border-bottom: 1px solid rgb(15, 166, 188); border-bottom: 1px solid rgb(15, 166, 188);
opacity: .97; 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{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;} #main table thead>tr>th{vertical-align:bottom;border-bottom:2px solid #dddddd;}

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)