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

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

@ -1,54 +1,210 @@
<!doctype html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Hugo Static Site Generator written in Go lang</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta name="description" content="">
{{ template "chrome/includes.html" . }} <meta name="author" content="">
</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;"> <title>Hugo :: A fast and flexible static site generator</title>
<h1>Hugo</h1>
<p>A Fast and Flexible Static Site Generator built with love by <a href="http://spf13.com">spf13</a> <!-- Bootstrap core CSS -->
and <a href="http://github.com/spf13/hugo/graphs/contributors">friends</a> in Go</p> <link href="/static/css/bootstrap.css" rel="stylesheet">
<p>
<a class="btn btn-large btn-success" href="/doc/installing">Get Started</a> <!-- Add custom CSS here -->
</p> <link href="/static/css/styles.css" rel="stylesheet">
</div> <link href="/static/css/hugoicon.css" rel="stylesheet">
<div class="row-fluid"> </head>
<div class="span4">
<h2>Fast <body>
<br>
</h2> <!-- Full Page Image Header Area -->
<p>Written in GoLang for speed, Hugo is significantly faster than most <div id="top" class="header">
other static site generators. <div class="vert-text">
A typical website of moderate size can be <h1>Hugo</h1>
rendered in a fraction of a second. A good rule of thumb is that Hugo <h3>The <em>Fast and Flexible</em> Static Site Generator</h3>
takes around 1 millisecond for each piece of content.<br> <br>
It's so fast that it will render the site in <a href="#intro" class="btn btn-clear btn-lg">LEARN MORE</a>&nbsp; &nbsp;
less time than it takes to switch to your browser and reload.</p> <a href="#download" class="btn btn-success btn-lg">DOWNLOAD <i class="icon-arrow-down"></i></a><br>
</div> <br>
<div class="span4"> <a href="/overview/quickstart/" class="btn btn-info btn-lg">DOCUMENTATION</a>
<h2>Flexible</h2> </div>
<p>Hugo is made to be very flexible. Define your own content types. Define </div>
your own indexes. Build your own templates, shortcodes and more. <!-- /Full Page Image Header Area -->
It is written to work well with any
kind of website including blogs, tumbles and docs.</p> <div id="main">
</div> <!-- Intro -->
<div class="span4"> <div id="intro" class="counterpoint">
<h2>Fun</h2> <div class="container">
<p>Hugo runs everywhere. Sites generated with Hugo work on every web <div class="row">
server without any special configuration. Hugo <div class="col-md-6 col-md-offset-3 text-center">
removes all the cruft of building a site allowing you to <i class="lead-icon icon-pacman"></i>
focus on writing great content.</p> <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> </div>
{{ template "chrome/footer.html" }} </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