Add more content and styling

config.toml

@@ -81,7 +81,7 @@ watch = true
   # Set to true to include a CDN call to FontAwesome
   usefontawesome = true
   # Sets the order of site sections in the sidebar navigation
-  sitemenuitems = ["About Hugo", "Getting Started", "Using the Docs", "Community Discussion", "Managing Content", "Templates", "Functions", "Themes", "Hosting and Deployment", "Migrating to Hugo", "News and Articles", "Site Showcase", "Developer Tools", "Themes", "Troubleshooting"]
+  sitemenuitems = ["About Hugo", "Getting Started", "Managing Content", "Templates", "Functions", "Variables and Params", "Themes", "Hosting and Deployment", "Migrating to Hugo", "News and Articles", "Site Showcase", "Developer Tools", "Troubleshooting"]
 # MARKDOWN
 ## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
 [blackfriday]

content/_index.md

@@ -12,3 +12,5 @@ aliases: []
 notes:
 ---
 
+Here is some content for the homepage.
+

content/about-hugo/introduction-to-hugo.md

@@ -23,7 +23,7 @@ edited, Hugo is optimized for website viewing for the end users of your site and
 Sites built with Hugo are extremely fast and secure. Hugo sites can
 be hosted anywhere, including [Heroku][], [GoDaddy][], [DreamHost][],
 [GitHub Pages][], [Surge][], [Aerobatic][], [Firebase Hosting][],
-[Google Cloud Storage][], [Amazon S3][], and [CloudFront][], and work well
+[Google Cloud Storage][], [Amazon S3][], and [CloudFront][] and work well
 with CDNs. Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.
 
 We think of Hugo as the ideal website creation tool. With nearly instant
@@ -31,45 +31,15 @@ build times and the ability to rebuild whenever a change is made, Hugo
 provides a very fast feedback loop. This is essential when you are
 designing websites, but also very useful when creating content.
 
-## Why a Static Site Generator?
-
-Website generators render content into HTML files. Most are "dynamic site generators." That means the HTTP server (ie, the program that communicates with your end user's browser) runs the generator to create a new HTML file every time an end user requests a page.
-
-Creating the page dynamically requires the HTTP server have enough memory and CPU to effectively run the generator around the clock. If not, your end user will wait in a queue for the page to be generated.
-
-To prevent unnecessary delays in delivering pages to end users, dynamic site generators programmed their systems to cache the HTML files. A cached page is a copy that is temporarily stored on the computer. Sending a cached copy is faster than generating a new page at the time of request because the majority of the work is already done.
-
-Hugo takes caching a step further. All HTML files are rendered on your
-computer. You can review the files before you copy them to the computer
-hosting the HTTP server. Since the HTML files aren't generated dynamically,
-we say that Hugo is a "static site generator."
-
-Not running a web site generator on your HTTP server has many benefits.
-The most noticeable is performance - HTTP servers are very good at
-sending files. So good that you can effectively serve the same number
-of pages with a fraction of the memory and CPU needed for a dynamic site.
-
-Hugo has two components to help you build and test your web site. The
-one that you'll probably use most often is the built-in HTTP server.
-When you run `hugo server`, Hugo renders all of your content into
-HTML files and then runs an HTTP server on your computer so that you
-can see what the pages look like.
-
-The second component is used when you're ready to publish your web
-site to the computer running your website. Running Hugo without any
-actions will rebuild your entire web site using the `baseURL` setting
-from your site's configuration file. That's required to have your page
-links work properly with most hosting companies.
-
-## How fast is Hugo?
+## How Fast is Hugo?
 
 
-## What does Hugo do?
+## What Does Hugo Do?
 
 In technical terms, Hugo takes a source directory of files and
 templates and uses these as input to create a complete website.
 
-## Who should use Hugo?
+## Who Should Use Hugo?
 
 Hugo is for people that prefer writing in a text editor over
 a browser.
@@ -79,28 +49,10 @@ worrying about setting up complicated runtimes, dependencies and
 databases.
 
 Hugo is for people building a blog, company site, portfolio, tumblog,
-documentation, single page site or a site with thousands of
+documentation, single-page website, or a website with thousands of
 pages.
 
-## Why did you write Hugo?
 
-I wrote Hugo ultimately for a few reasons. First, I was disappointed with
-WordPress, my then website solution. With it, I couldn't create
-content as efficiently as I wanted to.
-
-It rendered slowly and required me to be online to write posts. Plus, its constant security updates and the horror stories of people's hacked blogs! I hated how content was only written in HTML instead of the much simpler Markdown. Overall, I felt like WordPress hindered more than helped. It kept me from writing great content.
-
-I looked at existing static site generators like [Jekyll][], [Middleman][] and [Nanoc][]. All had complicated installation dependencies and an unacceptably long time to render my blog with hundreds of posts. I wanted a framework that would give me rapid feedback while making changes to the templates, and the 5-minute-plus render times were just too slow. In general, the static site generators were very blog-minded and didn't provide for other content types and flexible URLs.
-
-I wanted to develop a fast and full-featured website framework without any
-dependencies. The [Go language][] seemed to have all the features I needed
-in a language. I began developing Hugo in Go and fell in love with the
-language. I hope you will enjoy using Hugo (and contributing to it) as much
-as I have writing it.
-
-—Steve Francia ([@spf13][])
-
-[@spf13]: https://twitter.com/spf13
 [Aerobatic]: https://www.aerobatic.com/
 [Amazon S3]: http://aws.amazon.com/s3/
 [CloudFront]: http://aws.amazon.com/cloudfront/ "Amazon CloudFront"

content/about-hugo/why-i-built-hugo.md

@@ -23,11 +23,13 @@ I looked at existing static site generators like [Jekyll][], [Middleman][], and
 I wanted to develop a fast and full-featured website framework without any
 dependencies. The [Go language][] seemed to have all the features I needed
 in a language. I began developing Hugo in Go and fell in love with the
-language. I hope you will enjoy using Hugo (and contributing to it) as much
+language. I hope you will enjoy using Hugo (and [contributing to it][]) as much
 as I have writing it.
 
 —Steve Francia ([@spf13][])
 
+[contributing to it]: https://github.com/spf13/hugo
+[Go language]: https://golang.org/
 [Jekyll]: https://jekyllrb.com/
 [Middleman]: https://middlemanapp.com/
 [Nanoc]: https://nanoc.ws/

content/about-hugo/why-use-a-static-site-generator.md

@@ -0,0 +1,53 @@
+---
+title: Why Use a Static Site Generator?
+linktitle:
+description:
+date: 2016-02-01
+publishdate: 2016-02-01
+lastmod: 2016-02-01
+weight:
+draft: false
+slug:
+aliases: []
+notes:
+---
+
+Website generators render content into HTML files. Most are "dynamic site generators." That means the HTTP server (ie, the program that communicates with your end user's browser) runs the generator to create a new HTML file every time an end user requests a page.
+
+Creating the page dynamically requires the HTTP server have enough memory and CPU to effectively run the generator around the clock. If not, your end user will wait in a queue for the page to be generated.
+
+To prevent unnecessary delays in delivering pages to end users, dynamic site generators programmed their systems to cache the HTML files. A cached page is a copy that is temporarily stored on the computer. Sending a cached copy is faster than generating a new page at the time of request because the majority of the work is already done.
+
+Hugo takes caching a step further. All HTML files are rendered on your
+computer. You can review the files before you copy them to the computer
+hosting the HTTP server. Since the HTML files aren't generated dynamically,
+we say that Hugo is a "static site generator."
+
+Not running a web site generator on your HTTP server has many benefits.
+The most noticeable is performance - HTTP servers are very good at
+sending files. So good that you can effectively serve the same number
+of pages with a fraction of the memory and CPU needed for a dynamic site.
+
+Hugo has two components to help you build and test your web site. The
+one that you'll probably use most often is the built-in HTTP server.
+When you run `hugo server`, Hugo renders all of your content into
+HTML files and then runs an HTTP server on your computer so that you
+can see what the pages look like.
+
+The second component is used when you're ready to publish your web
+site to the computer running your website. Running Hugo without any
+actions will rebuild your entire web site using the `baseURL` setting
+from your site's configuration file. That's required to have your page
+links work properly with most hosting companies.
+
+## Further Reading
+
+* ["Static Site Generators", O-Reilly][]
+* [StaticGen: Top Open-Source Static Site Generators][]
+* ["Top 10 Static Website Generators," Netlify blog][]
+
+
+
+["Static Site Generators", O-Reilly]: /documents/oreilly-static-site-generators.pdf
+["Top 10 Static Website Generators," Netlify blog]: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
+[StaticGen: Top Open-Source Static Site Generators]: https://www.staticgen.com/

content/developer-tools/_index.md

@@ -0,0 +1,13 @@
+---
+title: Developer Tools
+linktitle:
+description: Description for the developer tools section.
+date: 2016-11-01
+publishdate: 2016-11-01
+lastmod: 2016-11-01
+weight: 40
+draft: false
+slug:
+aliases:
+notes:
+---

content/functions/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Functions Quick Reference
 linktitle: Functions Quick Reference
-description: Description for this page
+description: Description for templating functions.
 date: 2017-01-09
 publishdate: 2017-01-09
 lastmod: 2017-01-09

content/getting-started/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Getting Started with Hugo
 linktitle:
-description:
+description: Description for the Getting Started section.
 date: 2017-02-01
 publishdate: 2017-02-01
 lastmod: 2017-02-01

content/hosting-and-deployment/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Hosting and Deployment
 linktitle:
-description:
+description: Description for the Hosting and Deployment Section
 date: 2016-11-01
 publishdate: 2016-11-01
 lastmod: 2016-11-01

content/migrating-to-hugo/_index.md

@@ -0,0 +1,18 @@
+---
+title: Migrating to Hugo
+linktitle:
+description: Tools and tutorials for migrating to Hugo from other platforms or generators (eg, Wordpress, Jekyll).
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+tags: []
+categories: []
+weight:
+draft: false
+slug:
+aliases: []
+notes:
+---
+
+
+

content/news-and-articles/_index.md

@@ -1,16 +1,18 @@
 ---
-aliases: []
-date: 2016-12-26T06:43:58-06:00
-description: null
+title: News and Articles
+linktitle:
+description: Articles where Hugo is featured, as well as news and updates on the project itself.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+tags: []
+categories: []
+weight:
 draft: false
-lastmod: 2017-01-01
-linktitle: null
-notes: null
-publishdate: 2017-01-01
-qr_description: null
-qr_returns: null
-slug: null
-title: _index
-weight: 1
+slug:
+aliases: []
+notes:
 ---
 
+
+

content/site-showcase/_index.md

@@ -1,16 +1,18 @@
 ---
-aliases: []
-date: 2016-12-26T06:45:18-06:00
-description: null
-draft: false
-lastmod: 2017-01-01
-linktitle: All Sites
-notes: null
-publishdate: 2017-01-01
-qr_description: null
-qr_returns: null
-slug: null
 title: Site Showcase
-weight: 1
+linktitle:
+description: A collection of sites built using Hugo.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+tags: []
+categories: []
+weight:
+draft: false
+slug:
+aliases: []
+notes:
 ---
 
+
+

content/templates/_index.md

@@ -1,7 +1,7 @@
 ---
-title: Templating Introduction
+title: Introduction to Hugo Templating
 linktitle:
-description:
+description: Description of the template section and its contents.
 date: 2017-02-01
 publishdate: 2017-02-01
 lastmod: 2017-02-01

content/themes/_index.md

@@ -1,16 +1,14 @@
 ---
-aliases: []
-date: 2016-12-26T06:46:10-06:00
-description: null
+title: Introduction to Themes
+linktitle:
+description: Description of the theming section and its contents.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+weight:
+tags: []
 draft: false
-lastmod: 2017-01-01
-linktitle: null
-notes: null
-publishdate: 2017-01-01
-qr_description: null
-qr_returns: null
-slug: null
-title: _index
-weight: 1
----
-
+slug:
+aliases:
+notes:
+---

content/troubleshooting/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Troubleshooting
 linktitle:
-description:
+description: Description for *troubleshooting* section.
 date: 2016-11-01
 publishdate: 2016-11-01
 lastmod: 2016-11-01

content/troubleshooting/frequently-asked-questions.md

@@ -0,0 +1,14 @@
+---
+title: Frequently Asked Questions
+linktitle:
+description: Description for *troubleshooting* section.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+weight:
+draft: false
+slug:
+aliases: [/troubleshooting/faqs]
+notes:
+---
+

content/variables-and-params/_index.md

@@ -0,0 +1,16 @@
+---
+title: Introduction
+linktitle:
+description: Description for the variables and parameters section of the site.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+weight:
+draft: false
+slug:
+aliases: []
+notes:
+---
+
+Here is some content for the homepage.
+

doc-concept-roadmap.md

@@ -0,0 +1,5 @@
+## Hugo Docs Concept Roadmap
+
+- [ ] Addition of Algolia search
+- [ ] "Documentation" channel on Hugo discourse
+- [ ] GH Wiki for more extensive contribution guidelines

themes/hugodocs/layouts/_default/section.html

@@ -1,9 +1,11 @@
 {{ define "main" }}
 <main class="main">
-<ul>
-{{range .Data.Pages}}
-<li><a href="/{{.Permalink}}">{{.Title}}</a></li>
-{{ end }}
-</ul>
+	<header>
+		<h1>{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title }}{{end}}</h1>
+	</header>
+	<div class="body-copy">
+	{{.Content}}
+	<span class="last-modified">Updated {{with .Lastmod}}{{.Format "January 2, 2006"}}{{else}}{{.PublishDate.Format "January 2, 2006"}}{{end}}</span>
+	</div>
 </main>
 {{ end }}

themes/hugodocs/layouts/_default/single.html

@@ -5,6 +5,7 @@
 	</header>
 	<div class="body-copy">
 	{{.Content}}
+	<span class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "January 2, 2006"}}{{else}}{{.PublishDate.Format "January 2, 2006"}}{{end}}</span>
 	</div>
 </main>
 {{ end }}

themes/hugodocs/layouts/index.html

@@ -1,5 +1,27 @@
 {{ define "main" }}
 <main class="main" id="homepage">
+	<div class="homepage-image">
+		<img src="{{"images/hugo-h-only.png" | relURL}}" alt="">
+	</div>
+	<div class="testing">
+		{{range $section,$content := .Site.Sections}}
 
+		{{end}}
+	</div>
+	<div class="homepage-cards">
+		{{range .Site.Params.sitemenuitems }}
+		{{$sectionurl := . | urlize}}
+		<a href="{{ $sectionurl | relURL }}" class="homepage-card">
+			<section>
+				<header>
+					<h2>{{.}}</h2>
+				</header>
+				<div class="homepage-card-copy">
+				<p>{{ with $.Site.GetPage "section" $sectionurl }}{{ .Description | markdownify }}{{ end }}</p>
+				</div>
+			</section>
+		</a>
+		{{end}}
+	</div>
 </main>
 {{ end }}

themes/hugodocs/layouts/partials/head/site-style.html

@@ -1,4 +1,2 @@
 <link rel="stylesheet" href="{{.Site.BaseURL}}css/style.min.css">
-{{if .Site.Params.usefontawesome}}
-<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-{{end}}
+<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

themes/hugodocs/layouts/partials/site-header.html

@@ -1,10 +1,13 @@
 <header id="site-header" class="site-header">
 	<div class="hugo-meta" title="Hugo version {{.Hugo.Version}}, built {{.Hugo.BuildDate}}">
 		<a href="{{.Site.BaseURL}}" id="home-link">
-			<img src="{{"images/hugo-logo.png" | relURL}}" alt="">{{.Hugo.Version}}
+			<img src="{{"images/hugo-logo-wide.png" | relURL}}" alt="">{{.Hugo.Version}}
 		</a>
+		<!-- From https://buttons.github.io/. -->
+		<a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a>
 	</div>
-	<div class="header-links">
-		<a href="https://discuss.gohugo.io" target="_blank">Hugo Forum</a>
+	<div class="header-buttons">
+		<a role="button" class="icon-forum" href="https://discuss.gohugo.io" target="_blank">Forum</a>
+		<a role="button" class="icon-mailing-list" href="{{.Site.BaseURL}}mailing-list/">Mailing List</a>
 	</div>
 </header>

themes/hugodocs/layouts/partials/site-navigation.html

@@ -1,3 +1,4 @@
+<a href="#" id="navigation-toggle"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a>
 <nav class="site-navigation" id="site-navigation">
 	<ul class="top-menu">
 		{{ $menuitems := .Site.Params.sitemenuitems }}

themes/hugodocs/layouts/partials/site-scripts.html

@@ -1,5 +1,7 @@
 <script src="{{.Site.BaseURL}}js/vendor/jquery-2.2.4.min.js"></script>
 <script src="{{.Site.BaseURL}}js/script.min.js" async></script>
+<!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
 {{$gaid := .Site.Params.googleanalyticstrackingcode }}
 <script>
 (function() {

themes/hugodocs/pipeline/js/scripts/toggle-navigation.js

@@ -0,0 +1,3 @@
+$('#navigation-toggle').on('click', function() {
+  $('#site-navigation').toggleClass('navigation-open');
+});

themes/hugodocs/pipeline/scss/_variables.scss

@@ -15,7 +15,7 @@ $hugo-pink:#ff4088;
 $hugo-blue:#0594CB;
 
 $default-anchor-color:$hugo-pink;
-$default-anchor-weight: 600;
+$default-anchor-weight: inherit;
 $active-color: $default-anchor-color;
 
 //Typography
@@ -25,9 +25,14 @@ $base-font-color: #333333;
 $base-line-height: 1.6;
 $base-font-weight: 300;
 
+//Buttons
+$base-button-color: $hugo-blue;
+$base-button-text-color: $hugo-white;
+$button-border-radius: .25em;
+
 //Sidebar
 $sidebar-width: 280px;
-$content-max-width: $M;
+$content-max-width: 35em;
 
 //Header
-$site-header-height:40px;
+$site-header-height:50px;

themes/hugodocs/pipeline/scss/base/_base.scss

@@ -26,3 +26,9 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+p {
+  margin-top:0px;
+  margin-bottom:1em;
+  line-height:$base-line-height;
+}

themes/hugodocs/pipeline/scss/components/_buttons.scss

@@ -0,0 +1,23 @@
+button,
+a[role="button"] {
+  background-color: $base-button-color;
+  color: $base-button-text-color;
+  border: none;
+  outline: none;
+  border-radius: $button-border-radius;
+  padding: .25em .5em;
+  box-shadow: none;
+  text-align: center;
+  @include card(1, 3);
+  &[class^="icon-"]:before {
+    display: inline-block;
+    font-family: 'FontAwesome';
+    margin-right: .3em;
+  }
+  &.icon-forum:before {
+    content: '\f086';
+  }
+  &.icon-mailing-list:before {
+    content: '\f0e0';
+  }
+}

themes/hugodocs/pipeline/scss/components/_lists.scss

@@ -1,11 +1,30 @@
-ul,
-ol {
-  margin-left: 0px;
-  padding-left: 0px;
-  list-style: none;
-  text-indent: 0px;
-  li {
+//clear nav lists
+nav,
+aside {
+  ul,
+  ol {
     margin-left: 0px;
-    padding-left: 0px
+    padding-left: 0px;
+    list-style: none;
+    text-indent: 0px;
+    li {
+      margin-left: 0px;
+      padding-left: 0px;
+      list-style: none;
+    }
+  }
+}
+
+//sets list style in body copy
+.body-copy {
+  ul {
+    list-style: disc outside none;
+    padding-left: 1em;
+    margin-left: 1em;
+    li {
+      // padding-left:1em;
+      // margin-left: 1em;
+      // text-indent: -1em;
+    }
   }
 }

themes/hugodocs/pipeline/scss/layout/_site-content.scss

@@ -1,17 +1,31 @@
 #all-content-wrapper {
   margin-top: $site-header-height;
+  z-index: 5;
   @include MQ(L) {
     margin-left: $sidebar-width;
   }
 }
 
 main.main {
-	width:90%;
-	display:block;
-	margin-left:5%;
-	margin:{
-		left:auto;
-		right:auto;
-	}
-	max-width: $content-max-width;
+  width: 90%;
+  display: block;
+  margin-left: 5%;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+  max-width: $content-max-width;
+}
+
+.body-copy {
+  margin-bottom: 2em;
+  .last-modified {
+    color: lighten($base-font-color, 20%);
+    display: block;
+    width: 100%;
+    font-size: .8em;
+    border-top: 1px solid lighten($base-font-color, 20%);
+    text-align: center;
+    text-transform:uppercase;
+  }
 }

themes/hugodocs/pipeline/scss/layout/_site-header.scss

@@ -12,12 +12,17 @@
   top: 0px;
   left: 0px;
   z-index: 10;
+  @include card(1);
   .page-title {
     // margin:{
     //  left:auto;
     //  right:auto;
     // }
   }
+  .hugo-meta {
+    display: flex;
+    align-items: center;
+  }
   #home-link {
     display: flex;
     align-items: center;
@@ -28,7 +33,12 @@
       margin-right: .25em;
     }
   }
-  .header-links {
+  //github buttons in site-header
+  iframe[src^="https://buttons.github.io"] {
+    margin-left: 1em;
+  }
+  .header-buttons {
     margin-right: 1em;
+    font-size: .8em;
   }
 }

themes/hugodocs/pipeline/scss/layout/_site-navigation.scss

@@ -9,6 +9,7 @@
   background-color: darken(#ffffff, 1%);
   transform:translateX(-#{$sidebar-width});
   padding: 1em;
+  z-index: 9;
   &.navigation-open {
     transition: transform .3s ease-in-out;
     transform: translateX(0px);
@@ -33,7 +34,7 @@
       margin-bottom: .66em;
     }
     a.top-menu-item-link {
-    	font-size:17px;
+      font-size: 17px;
       &.active-section {
         color: $active-color;
         // border-bottom: 1px solid $active-color;
@@ -48,10 +49,10 @@
       a.submenu-item-link {
         font-size: 14px;
         &:hover {
-          color: lighten($base-font-color,25%);
+          color: lighten($base-font-color, 25%);
         }
         &.active-page {
-        	font-weight: 600;
+          font-weight: 600;
           // border-bottom: 1px solid $hugo-pink;
           color: $hugo-blue;
         }
@@ -59,3 +60,15 @@
     }
   }
 }
+
+#navigation-toggle {
+  @include MQ(L) {
+    display: none;
+  }
+  position:fixed;
+  top:$site-header-height;
+  left:0px;
+  padding:.25em .5em;
+  @include card(1);
+  z-index:15;
+}

themes/hugodocs/pipeline/scss/pages/_homepage.scss

@@ -0,0 +1,50 @@
+main#homepage {
+  width: 90%;
+  @include MQ(M) {
+    max-width: $M * .9;
+  }
+  @include MQ(L) {
+    max-width: 860px * .9;
+  }
+}
+
+.homepage-image {
+  display: block;
+  margin: 1em auto;
+  max-width: 200px;
+  img {
+    max-width: 200px;
+    margin: {
+      left: auto;
+      right: auto;
+    }
+  }
+}
+
+.homepage-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  .homepage-card {
+    color: inherit;
+    @include card(1, 3);
+    width: 100%;
+    @include MQ(M) {
+      width: $M * .9 * .48;
+    }
+    @include MQ(L) {
+      width: 860px * .9 * .31;
+    }
+    margin-bottom:1em;
+    padding:16px 8px;
+    h2 {
+      font-size: 1.1em;
+      margin: 0px;
+      line-height: 1.1;
+      margin-bottom: 1em;
+    }
+    p {
+      font-size: .9em;
+    }
+  }
+}

themes/hugodocs/pipeline/scss/style.scss

@@ -21,4 +21,5 @@
 @import 'layout/site-content';
 @import 'layout/site-footer';
 
-//styles for individual pages
+//styles for individual pages
+@import 'pages/homepage';