New Homepage for Hugo

This commit is contained in:
spf13 2013-10-17 22:52:28 -04:00
parent 4263094d75
commit 4d333e81ee
11 changed files with 7681 additions and 54 deletions

264
docs/layouts/index.html Normal file → Executable file
View file

@ -1,54 +1,210 @@
<!doctype html>
<html>
<head>
<title>Hugo Static Site Generator written in Go lang</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
{{ template "chrome/includes.html" . }}
</head>
<body>
<div class="navbar"></div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
{{ template "chrome/menu.html" . }}
</div>
<div class="span9">
<div class="hero-unit" style="background-color: #222; color: #ccc;">
<h1>Hugo</h1>
<p>A Fast and Flexible Static Site Generator built with love by <a href="http://spf13.com">spf13</a>
and <a href="http://github.com/spf13/hugo/graphs/contributors">friends</a> in Go</p>
<p>
<a class="btn btn-large btn-success" href="/doc/installing">Get Started</a>
</p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Fast
<br>
</h2>
<p>Written in GoLang for speed, Hugo is significantly faster than most
other static site generators.
A typical website of moderate size can be
rendered in a fraction of a second. A good rule of thumb is that Hugo
takes around 1 millisecond for each piece of content.<br>
It's so fast that it will render the site in
less time than it takes to switch to your browser and reload.</p>
</div>
<div class="span4">
<h2>Flexible</h2>
<p>Hugo is made to be very flexible. Define your own content types. Define
your own indexes. Build your own templates, shortcodes and more.
It is written to work well with any
kind of website including blogs, tumbles and docs.</p>
</div>
<div class="span4">
<h2>Fun</h2>
<p>Hugo runs everywhere. Sites generated with Hugo work on every web
server without any special configuration. Hugo
removes all the cruft of building a site allowing you to
focus on writing great content.</p>
</div>
</div>
{{ template "chrome/footer.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hugo :: A fast and flexible static site generator</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="/static/css/styles.css" rel="stylesheet">
<link href="/static/css/hugoicon.css" rel="stylesheet">
</head>
<body>
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<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>&nbsp; &nbsp;
<a href="#download" class="btn btn-success btn-lg">DOWNLOAD <i class="icon-arrow-down"></i></a><br>
<br>
<a href="/overview/quickstart/" class="btn btn-info btn-lg">DOCUMENTATION</a>
</div>
</div>
<!-- /Full Page Image Header Area -->
<div id="main">
<!-- Intro -->
<div id="intro" class="counterpoint">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="lead-icon icon-pacman"></i>
<h2>Make the Web Fun Again</h2>
<p class="lead">
Introducing Hugo, a new idea around making website creation simple again.
Written in go, Hugo runs everywhere without dependencies on
databases, webservers, runtimes or interpreters.
Hugo flexibly works with many formats and is ideal for
blogs, docs, portfolios and much more.
Hugo's nearly instant creation fosters
creativity and makes building a website fun again.
</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Point -->
<div id="intro" class="point">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="point-icon icon-tux"></i>
<i class="point-icon icon-apple"></i>
<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
and doesn't depend on root or administrative privileges, databases, runtimes, interpreters
or packages. Hugo is quite possibly the easiest to install software you've ever used.
Simply download and run.
</p>
</div>
</div>
</div>
</div>
<!-- /Point -->
<!-- Point -->
<div class="counterpoint">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="lead-icon icon-rocket"></i>
<h2>Fast & Powerful</h2>
<p class="lead">
Hugo is written for speed and performance. Great care has been
taken to ensure that Hugo build time is as short as possible.
</p>
</div>
</div>
</div>
</div>
<!-- /Point -->
<!-- Point -->
<div class="point">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="point-icon icon-fork"></i>
<h2>Flexible</h2>
<p class="lead">
Hugo is designed to how you want with minimal configuration.
Define your own meta data adhoc.
Define your own indexes to organize your content how you want.
Work with many different formats simultaneously, Hugo will just work.
</p>
</div>
</div>
</div>
</div>
<!-- /Point -->
<!-- Point -->
<div class="counterpoint">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="lead-icon icon-octocat"></i>
<h2>Open and Free</h2>
<p class="lead">
Hugo is <a href="http://github.com/spf13/hugo">open source</a> and completely free.
</p>
</div>
</div>
</div>
</div>
<!-- /Point -->
<!-- Point -->
<div class="point">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<i class="point-icon icon-beaker-alt"></i>
<i class="point-icon icon-heart"></i>
<i class="point-icon icon-spf"></i>
<h2>Built with Love</h2>
<p class="lead">
Hugo is developed with love by <a href="http://spf13.com">spf13</a> and friends.
We welcome all contributions.
New to go? Not a problem, we will help you.
Not a developer? Help with docs, templates and themes.
</p>
</div>
</div>
</div>
</div>
<!-- /Point -->
</div>
<!-- Call to Action -->
<div id="action" class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Get Started Today!</h3>
<a href="#top" class="btn btn-md btn-default">Documentation</a>
<a href="#top" class="btn btn-lg btn-primary">Download <i class="icon-arrow-down"></i></a>
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<div id="footerSpacer"></div>
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><a href="http://twitter.com/spf13" class="icon-twitter icon-2x"></a></li>
<li><a href="http://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>
</ul>
<hr>
<p>Copyright &copy; Steve Francia 2013</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>

6805
docs/static/static/css/bootstrap.css vendored Executable file

File diff suppressed because it is too large Load diff

208
docs/static/static/css/hugoicon.css vendored Normal file
View file

@ -0,0 +1,208 @@
@font-face {
font-family: 'hugo-1';
src:url('../fonts/hugo-1.eot');
src:url('../fonts/hugo-1.eot?#iefix') format('embedded-opentype'),
url('../fonts/hugo-1.woff') format('woff'),
url('../fonts/hugo-1.ttf') format('truetype'),
url('../fonts/hugo-1.svg#hugo-1') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'hugo-1';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-html5, .icon-css3, .icon-console, .icon-link, .icon-airplane, .icon-fire, .icon-check-alt, .icon-x-altx-alt, .icon-circlestar, .icon-file-css, .icon-spf, .icon-radio-checked, .icon-embed, .icon-code, .icon-cc, .icon-cc-by, .icon-cc-nc, .icon-beaker-alt, .icon-untitled, .icon-untitled-2, .icon-untitled-3, .icon-untitled-4, .icon-tag, .icon-rocket, .icon-hugo5, .icon-octocat, .icon-untitled-5, .icon-untitled-6, .icon-untitled-7, .icon-airplane-2, .icon-heart, .icon-rocket-2, .icon-house, .icon-bolt, .icon-flow-tree, .icon-twitter, .icon-beaker, .icon-images, .icon-bubbles, .icon-meter2, .icon-power-cord, .icon-apple, .icon-windows8, .icon-tux, .icon-file-xml, .icon-fork, .icon-arrow-down, .icon-untitled-8, .icon-untitled-9, .icon-pacman, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down-2, .icon-flow-branch, .icon-pen {
font-family: 'hugo-1';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-home:before {
content: "\21";
}
.icon-html5:before {
content: "\23";
}
.icon-css3:before {
content: "\24";
}
.icon-console:before {
content: "\25";
}
.icon-link:before {
content: "\26";
}
.icon-airplane:before {
content: "\27";
}
.icon-fire:before {
content: "\28";
}
.icon-check-alt:before {
content: "\29";
}
.icon-x-altx-alt:before {
content: "\2a";
}
.icon-circlestar:before {
content: "\2b";
}
.icon-file-css:before {
content: "\2c";
}
.icon-spf:before {
content: "\2d";
}
.icon-radio-checked:before {
content: "\2e";
}
.icon-embed:before {
content: "\2f";
}
.icon-code:before {
content: "\30";
}
.icon-cc:before {
content: "\31";
}
.icon-cc-by:before {
content: "\32";
}
.icon-cc-nc:before {
content: "\33";
}
.icon-beaker-alt:before {
content: "\39";
}
.icon-untitled:before {
content: "\3a";
}
.icon-untitled-2:before {
content: "\3b";
}
.icon-untitled-3:before {
content: "\3c";
}
.icon-untitled-4:before {
content: "\3d";
}
.icon-tag:before {
content: "\3e";
}
.icon-rocket:before {
content: "\3f";
}
.icon-hugo5:before {
content: "\40";
}
.icon-octocat:before {
content: "\41";
}
.icon-untitled-5:before {
content: "\42";
}
.icon-untitled-6:before {
content: "\43";
}
.icon-untitled-7:before {
content: "\44";
}
.icon-airplane-2:before {
content: "\45";
}
.icon-heart:before {
content: "\46";
}
.icon-rocket-2:before {
content: "\47";
}
.icon-house:before {
content: "\48";
}
.icon-bolt:before {
content: "\49";
}
.icon-flow-tree:before {
content: "\4a";
}
.icon-twitter:before {
content: "\4b";
}
.icon-beaker:before {
content: "\4c";
}
.icon-images:before {
content: "\4d";
}
.icon-bubbles:before {
content: "\4e";
}
.icon-meter2:before {
content: "\4f";
}
.icon-power-cord:before {
content: "\50";
}
.icon-apple:before {
content: "\51";
}
.icon-windows8:before {
content: "\52";
}
.icon-tux:before {
content: "\53";
}
.icon-file-xml:before {
content: "\54";
}
.icon-fork:before {
content: "\55";
}
.icon-arrow-down:before {
content: "\56";
}
.icon-untitled-8:before {
content: "\e035";
}
.icon-untitled-9:before {
content: "\e034";
}
.icon-pacman:before {
content: "\e000";
}
.icon-arrow-right:before {
content: "\e001";
}
.icon-arrow-left:before {
content: "\e002";
}
.icon-arrow-down-2:before {
content: "\e003";
}
.icon-flow-branch:before {
content: "\e004";
}
.icon-pen:before {
content: "\e005";
}

240
docs/static/static/css/styles.css vendored Executable file
View file

@ -0,0 +1,240 @@
/* Global Styles */
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 85%;
width: 100%;
position: relative;
background: url(../img/converse-fields.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 99999;
background-color: black;
}
#main {
z-index: 99999;
position: relative;
background: rgb(255, 255, 255);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.header h4, .header h3, .header h2, .header h1 {
color: white;
text-shadow: black 1px 1px 3px;
}
.header h4 {
text-shadow: black 1px 3px 3px;
font-weight: 100;
}
.header h2 {
font-weight: 200;
}
.header h1 {
font-weight: 500;
}
.header .btn {
font-weight: 100;
}
/* Intro */
.counterpoint {
padding: 50px 0;
background-color: white;
}
.point {
background: #7fbbda;
padding: 50px 0;
color: #ffffff;
}
.point-item {
margin-bottom: 15px;
}
i.point-icon, i.lead-icon {
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
i.lead-icon {
border: 3px solid #222;
}
i.point-icon {
border: 3px solid #ffffff;
}
i.lead-icon:hover {
color: #fff;
border: 3px solid #7FBBDB;
background: #7FBBDB;
}
i.point-icon:hover {
color: #7FBBDB;
border: 3px solid #fff;
background: #fff;
}
a:hover {
color: rgb(52, 73, 94);
}
i.service-icon:hover {
font-size: 68px;
}
.icon-2x {
font-size: 200%;
}
/* Callout */
.callout {
color: #ffffff;
display: table;
height: 400px;
width: 100%;
background: url(../img/section-two.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 25px;
}
.img-portfolio {
margin: 0 auto;
}
/* Call to Action */
.call-to-action {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.19);
padding: 50px 0;
}
#action {
background: url(../img/gray.png);
padding: 50px 0px 30px;
position: fixed;
bottom: 130px;
z-index: 99998;
width: 100%;
}
#footerSpacer {
display: block;
min-height: 310px;
background-color: rgba(0, 0, 0, 0);
}
#footer {
bottom: 0px;
left: 0px;
padding: 10px 0px;
position: fixed;
width: 100%;
font-size: 14px;
z-index: 99998;
background: rgb(255, 255, 255);
}
.call-to-action .btn {
margin: 10px;
}
/* Footer */
footer {
padding: 100px 0;
}
footer a {
color: black;
}
footer a:hover {
text-decoration: none;
}
div.point a {
color: #0a5175;
}
/* Bootstrap Addons */
.btn-clear {
color: #FFF;
background-color: rgba(255, 255, 255, 0.19);
border-color: #FFF;
}
.btn-clear:hover,
.btn-clear:focus,
.btn-clear:active,
.btn-clear.active,
.open .dropdown-toggle.btn-clear {
color: #333333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-clear:active,
.btn-clear.active,
.open .dropdown-toggle.btn-clear {
background-image: none;
}

BIN
docs/static/static/fonts/hugo-1.eot vendored Normal file

Binary file not shown.

213
docs/static/static/fonts/hugo-1.svg vendored Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

BIN
docs/static/static/fonts/hugo-1.ttf vendored Normal file

Binary file not shown.

BIN
docs/static/static/fonts/hugo-1.woff vendored Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 MiB

BIN
docs/static/static/img/gray.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

5
docs/static/static/js/jquery.js vendored Executable file

File diff suppressed because one or more lines are too long