mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-21 21:35:28 +02:00
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`.
This commit is contained in:
Mark D. Blackwell
@@ -5,155 +5,198 @@
|
||||
<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>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/css/bootstrap-gohugo.css" rel="stylesheet">
|
||||
{{ "<!--icon for browser shortcuts-->" | safeHTML }}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Arbutus+Slab%7CCabin:600%7CSource+Code+Pro' rel='stylesheet' type='text/css'>
|
||||
<!-- Add custom CSS here -->
|
||||
<link href="/css/HPstyles.css" rel="stylesheet">
|
||||
<link href="/css/hugofont.css" rel="stylesheet">
|
||||
<link href="/css/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="/css/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<style type="text/css">
|
||||
.callout {
|
||||
table-layout: fixed;
|
||||
}
|
||||
</style>
|
||||
{{ "<!--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 -->
|
||||
{{ "<!--full page image header area start-->" | safeHTML }}
|
||||
<div id="top" class="header">
|
||||
<div class="vert-text">
|
||||
<a href="#intro"><img src="/img/hugo.png" class="logo" alt="Hugo logo"> </a>
|
||||
<a href="#intro">
|
||||
<img class="logo" src="/img/hugo.png" alt="Hugo logo">
|
||||
</a>
|
||||
<div class="buttonbox">
|
||||
<a href="/overview/introduction/" class="btn btn-primary btn-lg">Docs <i class="icon-idea"></i></a>
|
||||
<a href="#action" class="btn btn-success btn-lg">Install <i class="icon-arrow-down"></i></a>
|
||||
<a href="http://discuss.gohugo.io/" class="btn btn-info btn-lg">Community <i class="icon-talking"></i></a>
|
||||
<a href="https://github.com/spf13/hugo" class="btn btn-dark btn-lg">GitHub <i class="icon-circlestar"></i></a>
|
||||
<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 -->
|
||||
{{ "<!--full page image header area end-->" | safeHTML }}
|
||||
|
||||
{{ "<!--main start-->" | safeHTML }}
|
||||
<div id="main">
|
||||
<!-- Intro -->
|
||||
|
||||
{{ "<!--intro start-->" | safeHTML }}
|
||||
<div id="intro" class="counterpoint">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<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 around making website creation simple again.
|
||||
Hugo flexibly works with many formats and is ideal for
|
||||
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.
|
||||
Hugo’s speed fosters
|
||||
creativity and makes building a website fun again.
|
||||
creativity—it makes building a website fun again.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Intro -->
|
||||
{{ "<!--intro end-->" | safeHTML }}
|
||||
|
||||
<!-- Point -->
|
||||
{{ "<!--point start-->" | safeHTML }}
|
||||
<div class="point">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<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 to install software you’ve ever used,
|
||||
simply download and run. <b>Hugo doesn’t 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.
|
||||
Hugo is quite possibly the easiest software to install you’ve ever used:
|
||||
simply download and run!
|
||||
<b>
|
||||
Hugo doesn’t 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 -->
|
||||
{{ "<!--point end-->" | safeHTML }}
|
||||
|
||||
<!-- Point -->
|
||||
{{ "<!--counterpoint start-->" | safeHTML }}
|
||||
<div class="counterpoint">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<div class="text-center col-md-6 col-md-offset-3">
|
||||
<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.
|
||||
We’re talking milliseconds to build your entire site for most setups.
|
||||
|
||||
Hugo is designed for speed and performance. Great care has been
|
||||
taken to ensure build time with Hugo is as short as possible.
|
||||
We’re talking milliseconds to build your entire site—for most setups!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Point -->
|
||||
{{ "<!--counterpoint end-->" | safeHTML }}
|
||||
|
||||
<!-- Point -->
|
||||
{{ "<!--point start-->" | safeHTML }}
|
||||
<div class="point">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<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 how you do.
|
||||
Hugo is designed to work the way you do.
|
||||
Organize your content however you want with any URL structure.
|
||||
Declare your own content types.
|
||||
Define your own meta data in YAML, TOML or JSON.
|
||||
Use indexes to group your content however you want.
|
||||
Best of all this is all done with virtually no configuration, Hugo
|
||||
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 -->
|
||||
{{ "<!--point end-->" | safeHTML }}
|
||||
|
||||
|
||||
{{ "<!--quote carousel start-->" | safeHTML }}
|
||||
<div class="callout">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<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="col-md-12 text-center">
|
||||
<!-- Wrapper for slides -->
|
||||
<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 )) }}
|
||||
{{ partial "quotes.html" ((where $.Site.Data.references.quotes "date" "ge" ($.Now.AddDate -2 0 0) | shuffle )) }}
|
||||
</div>
|
||||
{{ "<!--wrapper for slides end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Point -->
|
||||
{{ "<!--quote carousel end-->" | safeHTML }}
|
||||
|
||||
<!-- Point -->
|
||||
</div>
|
||||
{{ "<!--main end-->" | safeHTML }}
|
||||
|
||||
{{ "<!--counterpoint start-->" | safeHTML }}
|
||||
<div class="counterpoint">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<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">
|
||||
@@ -161,70 +204,96 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Point -->
|
||||
{{ "<!--counterpoint end-->" | safeHTML }}
|
||||
|
||||
<!-- Point -->
|
||||
{{ "<!--point start-->" | safeHTML }}
|
||||
<div class="point">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<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" style="color:#FF4088;"></i></h2>
|
||||
<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? Not a problem, we will help you.
|
||||
Not a developer? Help with <a href="/overview/introduction/">docs</a>, testing and <a href="https://github.com/spf13/hugoThemes/">themes</a>.
|
||||
New to Go? We’ll 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>
|
||||
<!-- /Point -->
|
||||
{{ "<!--counterpoint end-->" | safeHTML }}
|
||||
|
||||
<!-- Call to Action -->
|
||||
{{ "<!--call to action start-->" | safeHTML }}
|
||||
<div id="action" class="call-to-action">
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1 text-center">
|
||||
<h1 style="padding-bottom:.5em;">Getting Started</h1>
|
||||
<a href="https://github.com/spf13/hugo/releases" class="btn btn-lg btn-primary">Download <i class="icon-arrow-down"></i></a>
|
||||
<a href="/overview/quickstart/" style="color:white;font-weight:300;">Quickstart Guide</a>
|
||||
<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> </p>
|
||||
<h4>Using Homebrew?</h4>
|
||||
<pre><code>brew update && brew install hugo</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Call to Action -->
|
||||
{{ "<!--call to action end-->" | safeHTML }}
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
{{ "<!--footer start-->" | safeHTML }}
|
||||
<footer>
|
||||
<div class="container">
|
||||
|
||||
{{ "<!--row start-->" | safeHTML }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<div class="text-center col-md-6 col-md-offset-3">
|
||||
<ul class="list-inline">
|
||||
<li><a href="https://twitter.com/spf13" class="icon-twitter icon-2x"></a></li>
|
||||
<li><a href="https://github.com/spf13/hugo" class="icon-octocat icon-2x"></a></li>
|
||||
<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 © Steve Francia 2013–{{ .Now.Format "2006" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ "<!--row end-->" | safeHTML }}
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /Footer -->
|
||||
{{ "<!--footer end-->" | safeHTML }}
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/js/jquery-2.1.4.min.js"></script>
|
||||
<script src="/js/owl.carousel.min.js"></script>
|
||||
<!--<script src="/js/bootstrap.min.js"></script>-->
|
||||
{{ "<!--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() {
|
||||
@@ -242,25 +311,9 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.owl-carousel').owlCarousel({
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:true,
|
||||
autoplay:true,
|
||||
autoplayHoverPause:true,
|
||||
autoplayTimeout:3000,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
1000:{
|
||||
items:3
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
{{ template "partials/analytics.html" . }}
|
||||
{{ "<!--Google analytics-->" | safeHTML }}
|
||||
{{ template "partials/analytics.html" . }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -27,12 +27,13 @@
|
||||
<!--main content end-->
|
||||
</section>
|
||||
<!-- container section end -->
|
||||
|
||||
<!-- javascripts -->
|
||||
<script src="/js/jquery-2.1.4.min.js"></script>
|
||||
<script src="/js/jquery.scrollTo.min.js"></script>
|
||||
<script src="/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/jquery/js/jquery-2.1.4.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/flesler/js/jquery.scrollTo.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/twitter/js/bootstrap.min.js"></script>
|
||||
<!--custom script for all page-->
|
||||
<script src="/js/highlight.pack.js"></script>
|
||||
<script type="text/javascript" src="/vendor/highlightjs/js/highlight.pack.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script src="/js/scripts.js"></script>
|
||||
<!-- Algolia search -->
|
||||
|
||||
@@ -10,13 +10,16 @@
|
||||
{{ .Scratch.Add "title" "" }}{{ if isset .Site.Data.titles .Title }}{{ .Scratch.Set "title" (index .Site.Data.titles .Title).title }}{{ else }}{{ .Scratch.Set "title" .Title}}{{end}}
|
||||
<title>Hugo - {{ .Scratch.Get "title" }}</title>
|
||||
|
||||
<link href="/css/bootstrap-gohugo.css" rel="stylesheet">
|
||||
<link href="/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
|
||||
<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">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/vendor/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||||
<link href="/css/style.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/css/content-style.css" />
|
||||
<link href="/css/style-responsive.css" rel="stylesheet" />
|
||||
<link href="/css/monokai-sublime.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" type="text/css" href="/vendor/highlightjs/css/monokai-sublime.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user