hugo/docs/layouts/index.html
Mark D. Blackwell 88ec7d88d1 docs: Improve home page
Organize CSS and Javascript files into directories, separating vendor
source code from home-grown.

Separate new properties and selectors in Bootstrap CSS (already edited
for Hugo) from:
1. Original property values; and
2. Changed property values.

For the home page:

1. Clarify the English text;
2. Add some element names to classes in CSS selectors (to speed loading);
3. Document the Owl Carousel and Highlight.js versions;
4. Add Owl Carousel's license;
5. Restore HTML comments to browser source views;
6. Make the beginning GitHub button transparent on focus (like the others);

7. For the final, colored Twitter and Github buttons:
  a. Remove the dotted box on focus; and
  b. Color them green on active.

8. To increase (layout/) source readability:
  a. Place `class` attributes before `href` attributes;
  b. In `class` attributes, place more-specific class names before
     less-specific; and
  c. Comment the beginnings and ends of Bootstrap rows.

9. To increase understandability during development:
  a. Document the meaning of CSS file, `HPstyles` by renaming it to
     `home-page-style`;
  b. Move inline styling to CSS stylesheets;
  c. Separate @media queries to a file;
  d. Separate the inline Owl Carousel custom Javascript to a file;
  e. Use regular Owl Carousel CSS files instead of minified ones; and
  f. Rename the wide, landscape desk background image filename from
     `desk-long` to `desk-wide`.
2016-10-01 22:19:22 -04:00

320 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="Hugo, a fast and flexible static site generator built with love by spf13 and friends in Go">
<meta name="author" content="Steve Francia (spf13) and friends">
<title>Hugo :: A fast and modern static website engine</title>
{{ "<!--icon for browser shortcuts-->" | safeHTML }}
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
{{ "<!--icon to represent this web page on Apple iOS-->" | safeHTML }}
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
{{ "<!--Bootstrap core CSS-->" | safeHTML }}
<link rel="stylesheet" type="text/css" href="/css/bootstrap-stripped-gohugo.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-changes-gohugo.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-additions-gohugo.css">
{{ "<!--non-Bootstrap CSS (keep below Bootstrap CSS)-->" | safeHTML }}
<link rel="stylesheet" type="text/css" href="/vendor/OwlCarousel2/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="/vendor/OwlCarousel2/css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arbutus+Slab%7CCabin:600%7CSource+Code+Pro">
<link rel="stylesheet" type="text/css" href="/css/hugofont.css">
<link rel="stylesheet" type="text/css" href="/css/home-page-style.css">
<link rel="stylesheet" type="text/css" href="/css/home-page-style-responsive.css">
</head>
<body>
{{ "<!--full page image header area start-->" | safeHTML }}
<div id="top" class="header">
<div class="vert-text">
<a href="#intro">
<img class="logo" src="/img/hugo.png" alt="Hugo logo">
</a>
<div class="buttonbox">
<a class="btn-primary btn btn-lg" href="/overview/introduction/">
Docs <i class="icon-idea"></i>
</a>
<a class="btn-success btn btn-lg" href="#action">
Install <i class="icon-arrow-down"></i>
</a>
<a class="btn-info btn btn-lg" href="http://discuss.gohugo.io/">
Community <i class="icon-talking"></i>
</a>
<a class="btn-repo btn btn-lg" href="https://github.com/spf13/hugo">
GitHub <i class="icon-circlestar"></i>
</a>
</div>
</div>
</div>
{{ "<!--full page image header area end-->" | safeHTML }}
{{ "<!--main start-->" | safeHTML }}
<div id="main">
{{ "<!--intro start-->" | safeHTML }}
<div id="intro" class="counterpoint">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<i class="lead-icon icon-pacman"></i>
<h2>Make the Web Fun Again</h2>
<p class="lead">
Introducing Hugo, a new idea for making website creation simple again.
Hugo works flexibly with many formats, and is ideal for
blogs, docs, portfolios and much more.
Hugos speed fosters
creativity&mdash;it makes building a website fun again.
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--intro end-->" | safeHTML }}
{{ "<!--point start-->" | safeHTML }}
<div class="point">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<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 quite possibly the easiest software to install youve ever used:
simply download and run!
<b>
Hugo doesnt depend on administrative privileges, databases, runtimes,
interpreters or external libraries.
</b>
Sites built with Hugo can be deployed on S3, GitHub Pages, Dropbox or any web host.
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--point end-->" | safeHTML }}
{{ "<!--counterpoint start-->" | safeHTML }}
<div class="counterpoint">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<i class="lead-icon icon-rocket"></i>
<h2>Fast &amp; Powerful</h2>
<p class="lead">
Hugo is designed for speed and performance. Great care has been
taken to ensure build time with Hugo is as short as possible.
Were talking milliseconds to build your entire site&mdash;for most setups!
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--counterpoint end-->" | safeHTML }}
{{ "<!--point start-->" | safeHTML }}
<div class="point">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<i class="point-icon icon-fork"></i>
<h2>Flexible</h2>
<p class="lead">
Hugo is designed to work the way you do.
Organize your content however you want with any URL structure.
Group your content using your own indexes and categories.
Define your own metadata in any format: YAML, TOML or JSON.
Best of all, Hugo handles all these variations
with virtually no configuration. Hugo
just works.
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--point end-->" | safeHTML }}
{{ "<!--quote carousel start-->" | safeHTML }}
<div class="callout">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-12">
<i class="callout-icon icon-circlestar"></i>
<p></p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-12">
{{ "<!--wrapper for slides start-->" | safeHTML }}
<div class="carousel-inner owl-carousel">
{{ partial "quotes.html" ((where $.Site.Data.references.quotes "date" "ge" ($.Now.AddDate -2 0 0) | shuffle )) }}
</div>
{{ "<!--wrapper for slides end-->" | safeHTML }}
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--quote carousel end-->" | safeHTML }}
</div>
{{ "<!--main end-->" | safeHTML }}
{{ "<!--counterpoint start-->" | safeHTML }}
<div class="counterpoint">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<i class="lead-icon icon-octocat"></i>
<h2>Open and Free</h2>
<p class="lead">
Hugo is <a href="https://github.com/spf13/hugo">open source</a> and completely free.
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--counterpoint end-->" | safeHTML }}
{{ "<!--point start-->" | safeHTML }}
<div class="point">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<i class="point-icon icon-beaker-alt"></i>
<i class="point-icon icon-heart"></i>
<i class="point-icon icon-spf13"></i>
<h2>Built with <i class="icon-heart"></i></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? Well help you.
Not a developer? No problem! Help
with <a href="/overview/introduction/">docs,</a> testing
and <a href="https://github.com/spf13/hugoThemes/">themes.</a>
</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--counterpoint end-->" | safeHTML }}
{{ "<!--call to action start-->" | safeHTML }}
<div id="action" class="call-to-action">
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-10 col-md-offset-1">
<h1>Getting Started</h1>
<a class="btn-primary btn btn-lg" href="https://github.com/spf13/hugo/releases">
Download
<i class="icon-arrow-down"></i>
</a>
<a class="quickstart" href="/overview/quickstart/">
Quickstart Guide
</a>
<p>&nbsp;</p>
<h4>Using Homebrew?</h4>
<pre><code>brew update &amp;&amp; brew install hugo</code></pre>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</div>
{{ "<!--call to action end-->" | safeHTML }}
{{ "<!--footer start-->" | safeHTML }}
<footer>
<div class="container">
{{ "<!--row start-->" | safeHTML }}
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<ul class="list-inline">
<li><a class="icon-twitter icon-2x" href="https://twitter.com/spf13"></a></li>
<li><a class="icon-octocat icon-2x" href="https://github.com/spf13/hugo"></a></li>
</ul>
<hr>
<p>Copyright &copy; Steve Francia 2013&ndash;{{ .Now.Format "2006" }}</p>
</div>
</div>
{{ "<!--row end-->" | safeHTML }}
</div>
</footer>
{{ "<!--footer end-->" | safeHTML }}
{{ "<!--JavaScript: Keep at the end of the document so the page loads faster-->" | safeHTML }}
<script src="/vendor/jquery/js/jquery-2.1.4.min.js"></script>
{{ "<!--Bootstrap core JavaScript here-->" | safeHTML }}
{{ `<!--<script src="/vendor/twitter/js/bootstrap.min.js"></script>-->` | safeHTML }}
<script src="/vendor/OwlCarousel2/js/owl.carousel.min.js"></script>
<script src="/js/owl.carousel-custom.js"></script>
{{ "<!--custom JavaScript-->" | safeHTML }}
<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>
{{ "<!--Google analytics-->" | safeHTML }}
{{ template "partials/analytics.html" . }}
</body>
</html>