Version 2 - now better configuration

32 files changed, 284 insertions, 973 deletions

diff --git a/Makefile b/Makefile
index 757f6f0..b935c55 100644
--- a/Makefile
+++ b/Makefile
@@ -1,13 +1,14 @@
+EXAMPLE_SITE := exampleSite
 CONFIG_GH_PAGES := exampleSite/config_for_github_pages.toml
 CONFIG := exampleSite/config.toml
 CONTENT := exampleSite/content
-THEMES := ../
-OUTPUT := docs
+THEMES := ../../
+OUTPUT := ../docs
 
 docs:
-	hugo --config ${CONFIG_GH_PAGES} -c ${CONTENT} --themesDir ${THEMES} -d ${OUTPUT}
+	hugo -s ${EXAMPLE_SITE} --themesDir ${THEMES} -d ${OUTPUT}
 
 server:
-	hugo --config ${CONFIG} -c ${CONTENT} --themesDir ${THEMES} server
+	hugo -s ${EXAMPLE_SITE} --themesDir ${THEMES} server
 
 .PHONY: docs
diff --git a/README.md b/README.md
index 837d539..18bef74 100644
--- a/README.md
+++ b/README.md
@@ -1,57 +1,62 @@
+# Version 2 Major Changes
+
+**Version 2 configuration is a major change from version 1.**  Sections on the main page are now configured via multiple markdown files in the content directory **instead of** via frontmatter with raw HTML in one file.
+
 # Grayscale Theme for Hugo
+
 This is a multi-section single page theme intended as a landing page.  This is derived from the startbootstrap-grayscale theme.
 
 Preview at https://runningstream.github.io/hugograyscale/
 
-## Configuration
-The Hugo Grayscale theme is a one page theme designed to be the front page to your site.  Its content is populated via the front-matter in `content/_index.md`.  The page consists of, in order:
+## Usage
+
+Drop it in your site's themes folder, then modify your site config file to specify the theme `grayscale`, or use the `-t grayscale` command line switch.
+
+## Configuration and Content
+
+The Hugo Grayscale theme is a one page theme designed to be the front page to your site.  Its content is in sections with visual breaks between each.  The content is contained in markdown files in the content folder, ordered by their `weight` parameter.  The `exampleSite` directory is a good place to start.  The page is designed to consist of, in order:
+
 * a navbar at top linking to the other sections, and other arbitrary links
 * an intro section presenting a header title and into text with background image
 * an about section presenting a header and text with black background
 * a download section presenting header and text with background image
 * a contact section presenting header and text with black background
  
-The section names show up as the links in the navbar, so you may wish to rename them if, for example, you're not using it for the purpose suggested by the default section name.
- 
-The background images are selected by filename - the intro section image must be named "intro-bg.jpg" and placed in the "static/img/" directory for your site.  Similarly, the downloads section image must be named "downloads-bg.jpg" and placed in the "static/img/" directory for your site.  See the default images in the theme's static directory for file size reference.
-
-Check out the exampleSite `content/_index.md` for a full-featured example, or look below...
-
-```YAML
----
-title: "Hugo Grayscale Theme"
-date: 2018-09-09T00:00:00-00:00
-copyright: "Your Website"
-#mapsapikey: xxx
-
-socialhandles:
-    twitter: "stream_running"
-    github: "runningstream"
-#    googplus: "goog_addr_here"
-
-menu:
-    -
-        url: "http://startbootstrap.com/template-overviews/grayscale/"
-        name: "Original"
-
-intro:
-    header: "Grayscale"
-    text: "A free, responsive, one page Hugo/Bootstrap theme originally created by Start Bootstrap."
-
-about:
-    header: "About Grayscale"
-    text: '<p>Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p> <p>This theme was also adapted from a Jekyll version, brought to you by <a href="https://github.com/jeromelachaud">Jerome Lachaud</a></p> <p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p> <p>Grayscale includes full HTML, CSS, and custom JavaScript files along with SASS and LESS files for easy customization!</p>'
-
-download:
-    rename: "Links"
-    header: "Download Grayscale"
-    text: '<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p><a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a>'
-
-contact:
-    header: "Contact Start Bootstrap"
-    text: '<p>Feel free to leave us a comment on the <a href="http://startbootstrap.com/template-overviews/grayscale/">Grayscale template overview page</a> on Start Bootstrap to give some feedback about this theme!</p>'
----
+These section names correspond to the `title` front matter parameter, and the files are ordered by their `weight` front matter parameter.  The section names show up as the links in the navbar.
+
+The page's overall title, date, copyright and additional navbar links are specified in `content/_index.md`.
+
+Because this theme generates only one page, it does not generate an RSS feed.  The sitemap will only contain the home page.
+
+The background images are selected by filename and placed in the "static/img/" directory for your site.
+
+* The intro section, section 0, must have its image at `static/img/section0-bg.jpg`
+* The download section, section 2, must have its image at `static/img/section2-bg.jpg`
+
+These filenames are configured in `grayscale.css`.
+
+Image aspect ratios used by the theme's default images are:
+
+* 1.33333 for `section0-bg.jpg` - 1500x1125, for example
+* 4.625 for `section2-bg.jpg` - 1500x324, for example
+
+### Shortcodes
+
+Shortcodes exist to support the "big buttons", including the demo site's download page button and social network buttons.
+
+Big button shortcode example:
+
+```
+{{< big-button text="Visit Download Page" href="https://github.com/runningstream/hugograyscale/" >}}
 ```
 
-## Usage
-Drop it in your site's themes folder, then modify your site config file to specify the theme `grayscale`, or use the `-t grayscale` command line switch.
+Social network shortcode example:
+
+```
+{{% socialhandles %}}
+    {{< twitter user="stream_running" >}}
+    {{< github user="runningstream" >}}
+{{% /socialhandles %}}
+```
+
+Check out the directory `exampleSite/content/` for a full-featured example.
diff --git a/docs/categories/index.xml b/docs/categories/index.xml
deleted file mode 100644
index 88b3876..0000000
--- a/docs/categories/index.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>Categories on Hugo Grayscale Theme</title>
-    <link>https://runningstream.github.io/hugograyscale/categories/</link>
-    <description>Recent content in Categories on Hugo Grayscale Theme</description>
-    <generator>Hugo -- gohugo.io</generator>
-    <language>en-us</language>
-    
-	<atom:link href="https://runningstream.github.io/hugograyscale/categories/index.xml" rel="self" type="application/rss+xml" />
-    
-    
-  </channel>
-</rss>
\ No newline at end of file
diff --git a/docs/css/grayscale.css b/docs/css/grayscale.css
index 26f9cc9..eeeca52 100644
--- a/docs/css/grayscale.css
+++ b/docs/css/grayscale.css
@@ -40,8 +40,6 @@ p {
 }
 
 a {
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   color: #42DCA3;
 }
@@ -75,8 +73,6 @@ a:focus, a:hover {
 }
 
 #mainNav .navbar-nav .nav-item {
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
   transition: background 0.3s ease-in-out;
 }
 
@@ -95,8 +91,6 @@ a:focus, a:hover {
   #mainNav {
     padding-top: 20px;
     padding-bottom: 20px;
-    -webkit-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    -moz-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
     transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
     letter-spacing: 1px;
     border-bottom: none;
@@ -117,31 +111,26 @@ a:focus, a:hover {
   }
 }
 
-.masthead {
+header {
   display: table;
   width: 100%;
   height: auto;
   padding: 200px 0;
   text-align: center;
   color: white;
-  background: url("../img/intro-bg.jpg") no-repeat bottom center scroll;
+  background: url("../img/section0-bg.jpg") no-repeat bottom center scroll;
   background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
   background-size: cover;
 }
 
-.masthead .intro-body {
+#intro-body {
   display: table-cell;
   vertical-align: middle;
 }
-
-.masthead .intro-body .brand-heading {
+header h1 {
   font-size: 50px;
 }
-
-.masthead .intro-body .intro-text {
+header p {
   font-size: 18px;
 }
 
@@ -152,14 +141,14 @@ a:focus, a:hover {
 }
 
 @media (min-width: 768px) {
-  .masthead {
+  header {
     height: 100%;
     padding: 0;
   }
-  .masthead .intro-body .brand-heading {
+  header h1 {
     font-size: 100px;
   }
-  .masthead .intro-body .intro-text {
+  header p {
     font-size: 22px;
   }
 }
@@ -170,8 +159,6 @@ a:focus, a:hover {
   height: 55px;
   margin-top: 15px;
   line-height: 45px;
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
   transition: background 0.3s ease-in-out;
   color: white;
   border: 2px solid white;
@@ -190,13 +177,10 @@ a:focus, a:hover {
   padding-bottom: 150px;
 }
 
-.download-section {
+.section-2 {
   color: white;
-  background: url("../img/downloads-bg.jpg") no-repeat center center scroll;
+  background: url("../img/section2-bg.jpg") no-repeat center center scroll;
   background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
   background-size: cover;
 }
 
@@ -218,8 +202,6 @@ a:focus, a:hover {
 .btn {
   font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 400;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   text-transform: uppercase;
   border-radius: 0;
@@ -240,6 +222,7 @@ a:focus, a:hover {
 
 ul.banner-social-buttons {
   margin-top: 0;
+  font-size: 0;
 }
 
 @media (max-width: 1199px) {
@@ -268,12 +251,6 @@ footer p {
   margin: 0;
 }
 
-::-moz-selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
 ::selection {
   background: #fcfcfc;
   background: rgba(255, 255, 255, 0.2);
@@ -283,7 +260,3 @@ footer p {
 img::selection {
   background: transparent;
 }
-
-img::-moz-selection {
-  background: transparent;
-}
diff --git a/docs/css/grayscale.min.css b/docs/css/grayscale.min.css
deleted file mode 100644
index 26f9cc9..0000000
--- a/docs/css/grayscale.min.css
+++ /dev/null
@@ -1,289 +0,0 @@
-body {
-  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: white;
-  background-color: black;
-}
-
-html {
-  width: 100%;
-  height: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  margin: 0 0 35px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-
-p {
-  font-size: 16px;
-  line-height: 1.5;
-  margin: 0 0 25px;
-}
-
-@media (min-width: 768px) {
-  p {
-    font-size: 18px;
-    line-height: 1.6;
-    margin: 0 0 35px;
-  }
-}
-
-a {
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  color: #42DCA3;
-}
-
-a:focus, a:hover {
-  text-decoration: none;
-  color: #1d9b6c;
-}
-
-#mainNav {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  margin-bottom: 0;
-  text-transform: uppercase;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  background-color: black;
-}
-
-#mainNav .navbar-toggler {
-  font-size: 14px;
-  padding: 11px;
-  color: white;
-  border: 1px solid white;
-}
-
-#mainNav .navbar-brand {
-  font-weight: 700;
-}
-
-#mainNav a {
-  color: white;
-}
-
-#mainNav .navbar-nav .nav-item {
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
-  transition: background 0.3s ease-in-out;
-}
-
-#mainNav .navbar-nav .nav-item:hover {
-  color: fade(white, 80%);
-  outline: none;
-  background-color: transparent;
-}
-
-#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
-  outline: none;
-  background-color: transparent;
-}
-
-@media (min-width: 992px) {
-  #mainNav {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    -webkit-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    -moz-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    letter-spacing: 1px;
-    border-bottom: none;
-    background: transparent;
-  }
-  #mainNav.navbar-shrink {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    background: black;
-  }
-  #mainNav .nav-link.active {
-    outline: none;
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  #mainNav .nav-link.active:hover {
-    color: white;
-  }
-}
-
-.masthead {
-  display: table;
-  width: 100%;
-  height: auto;
-  padding: 200px 0;
-  text-align: center;
-  color: white;
-  background: url("../img/intro-bg.jpg") no-repeat bottom center scroll;
-  background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.masthead .intro-body {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.masthead .intro-body .brand-heading {
-  font-size: 50px;
-}
-
-.masthead .intro-body .intro-text {
-  font-size: 18px;
-}
-
-.improve-contrast-box {
-  background: rgba(0, 0, 0, .5);
-  border-radius: 5px;
-  text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
-}
-
-@media (min-width: 768px) {
-  .masthead {
-    height: 100%;
-    padding: 0;
-  }
-  .masthead .intro-body .brand-heading {
-    font-size: 100px;
-  }
-  .masthead .intro-body .intro-text {
-    font-size: 22px;
-  }
-}
-
-.btn-circle {
-  font-size: 26px;
-  width: 55px;
-  height: 55px;
-  margin-top: 15px;
-  line-height: 45px;
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
-  transition: background 0.3s ease-in-out;
-  color: white;
-  border: 2px solid white;
-  border-radius: 100% !important;
-  background: transparent;
-}
-
-.btn-circle:focus, .btn-circle:hover {
-  color: white;
-  outline: none;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.content-section {
-  padding-top: 150px;
-  padding-bottom: 150px;
-}
-
-.download-section {
-  color: white;
-  background: url("../img/downloads-bg.jpg") no-repeat center center scroll;
-  background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-#map {
-  width: 100%;
-  height: 300px;
-}
-
-@media (min-width: 992px) {
-  .content-section {
-    padding-top: 200px;
-    padding-bottom: 200px;
-  }
-  #map {
-    height: 350px;
-  }
-}
-
-.btn {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  text-transform: uppercase;
-  border-radius: 0;
-}
-
-.btn-default {
-  color: #42DCA3;
-  border: 1px solid #42DCA3;
-  background-color: transparent;
-}
-
-.btn-default:focus, .btn-default:hover {
-  color: black;
-  border: 1px solid #42DCA3;
-  outline: none;
-  background-color: #42DCA3;
-}
-
-ul.banner-social-buttons {
-  margin-top: 0;
-}
-
-@media (max-width: 1199px) {
-  ul.banner-social-buttons {
-    margin-top: 15px;
-  }
-}
-
-@media (max-width: 767px) {
-  ul.banner-social-buttons li {
-    display: block;
-    margin-bottom: 20px;
-    padding: 0;
-  }
-  ul.banner-social-buttons li:last-child {
-    margin-bottom: 0;
-  }
-}
-
-footer {
-  padding: 50px 0;
-}
-
-footer p {
-  font-size: 14px;
-  margin: 0;
-}
-
-::-moz-selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
-::selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
-img::selection {
-  background: transparent;
-}
-
-img::-moz-selection {
-  background: transparent;
-}
diff --git a/docs/img/downloads-bg.jpg b/docs/img/downloads-bg.jpg
deleted file mode 100644
index 9d109b8..0000000
--- a/docs/img/downloads-bg.jpg
+++ /dev/null
diff --git a/docs/img/intro-bg.jpg b/docs/img/section0-bg.jpg
index de06b29..de06b29 100644
--- a/docs/img/intro-bg.jpg
+++ b/docs/img/section0-bg.jpg
diff --git a/docs/img/section2-bg.jpg b/docs/img/section2-bg.jpg
new file mode 100644
index 0000000..ec135b8
--- /dev/null
+++ b/docs/img/section2-bg.jpg
diff --git a/docs/index.html b/docs/index.html
index de6c603..dfc265b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,15 +15,15 @@
     <meta name="generator" content="Hugo 0.58.3">
 
     
-    <link href="/hugograyscale/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     
-    <link href="/hugograyscale/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
     <link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
 
     
-    <link href="/hugograyscale/css/grayscale.min.css" rel="stylesheet">
+    <link href="/css/grayscale.css" rel="stylesheet">
 
     
 
@@ -37,75 +37,84 @@
           <i class="fa fa-bars"></i>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
-          <ul class="navbar-nav ml-auto"><li class="nav-item">
-                  <a class="nav-link js-scroll-trigger improve-contrast-box" href="#about">about</a>
-                </li><li class="nav-item">
-                  <a class="nav-link js-scroll-trigger improve-contrast-box" href="#Links">Links</a>
-                </li><li class="nav-item">
-                  <a class="nav-link js-scroll-trigger improve-contrast-box" href="#contact">contact</a>
-                </li><li class="nav-item">
+          <ul class="navbar-nav ml-auto">
+                
+                
+                    <li class="nav-item">
+                      <a class="nav-link js-scroll-trigger improve-contrast-box" href="#sec-ind-1">About</a>
+                    </li>
+                
+                
+                    <li class="nav-item">
+                      <a class="nav-link js-scroll-trigger improve-contrast-box" href="#sec-ind-2">Links</a>
+                    </li>
+                
+                
+                    <li class="nav-item">
+                      <a class="nav-link js-scroll-trigger improve-contrast-box" href="#sec-ind-3">Contact</a>
+                    </li>
+                <li class="nav-item">
                   <a class="nav-link js-scroll-trigger improve-contrast-box" href="https://startbootstrap.com/themes/grayscale/">Original</a>
                 </li></ul>
         </div>
       </div>
     </nav>
+
     
-    <header class="masthead">
-      <div class="intro-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-lg-8 mx-auto">
-              <div class="improve-contrast-box">
-                <h1 class="brand-heading">Grayscale</h1>
-                <p class="intro-text">A free, responsive, one page Hugo/Bootstrap theme originally created by Start Bootstrap.</p>
-              </div>
-              <a href="#about" class="btn btn-circle js-scroll-trigger">
-                <i class="fa fa-angle-double-down animated"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
+        <header><div id="intro-body"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="improve-contrast-box">
+
+<h1 id="grayscale">Grayscale</h1>
+
+<p>A free, responsive, one page Hugo/Bootstrap theme originally created by Start Bootstrap.</p>
+</div><a href="#sec-ind-1" class="btn btn-circle js-scroll-trigger" aria-label="Scroll to Next Section"><i class="fa fa-angle-double-down animated"></i></a></div></div></div></div></header>
     
+        <section id="sec-ind-1" class="section-1 content-section text-center"><div class="container"><div class="row"><div class="col-lg-8 mx-auto">
 
-    <section id="about" class="content-section text-center">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-8 mx-auto">
-            <h2>About Grayscale</h2>
-            <p><p>Grayscale is a free Hugo theme, originally created for Bootstrap by Start Bootstrap. It can be yours right now, simply download the template from <a href="https://github.com/runningstream/hugograyscale/">the Github page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p> <p>This theme was also adapted from a Jekyll version, brought to you by <a href="https://github.com/jeromelachaud">Jerome Lachaud</a></p> <p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p> <p>Grayscale includes full HTML, CSS, and custom JavaScript files along with SASS and LESS files for easy customization!</p></p>
-          </div>
-        </div>
-      </div>
-    </section><section id="Links" class="download-section content-section text-center">
-      <div class="container">
-        <div class="col-lg-8 mx-auto">
-            <div class="improve-contrast-box">
-              <h2>Download Grayscale</h2>
-              <p><p>You can download Grayscale for free from the Github page.</p><a href="https://github.com/runningstream/hugograyscale/" class="btn btn-default btn-lg">Visit Download Page</a></p>
-            </div>
-        </div>
-      </div>
-    </section><section id="contact" class="content-section text-center">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-8 mx-auto">
-            <h2>Contact Start Bootstrap</h2>
-            <p><p>Feel free to leave us a comment on the <a href="https://github.com/runningstream/hugograyscale/">Grayscale template Github page</a> to give some feedback about this theme!</p></p><ul class="list-inline banner-social-buttons"><li class="list-inline-item">
-                <a href="https://twitter.com/stream_running" class="btn btn-default btn-lg">
-                  <i class="fa fa-twitter fa-fw"></i>
-                  <span class="network-name">Twitter</span>
-                </a>
-              </li><li class="list-inline-item">
-                <a href="https://github.com/runningstream" class="btn btn-default btn-lg">
-                  <i class="fa fa-github fa-fw"></i>
-                  <span class="network-name">Github</span>
-                </a>
-              </li></ul></div>
-        </div>
-      </div>
-    </section>    
+<h2 id="about-grayscale">About Grayscale</h2>
+
+<p>Grayscale is a free Hugo theme, originally created for Bootstrap by Start Bootstrap. It can be yours right now, simply download the template from <a href="https://github.com/runningstream/hugograyscale/">the Github page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p>
+
+<p>This theme was also adapted from a Jekyll version, brought to you by <a href="https://github.com/jeromelachaud">Jerome Lachaud</a></p>
+
+<p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
+
+<p>Grayscale includes full HTML, CSS, and custom JavaScript files along with SASS and LESS files for easy customization!</p>
+</div></div></div></section>
+    
+        <section id="sec-ind-2" class="section-2 content-section text-center"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="improve-contrast-box">
+
+<h2 id="download-grayscale">Download Grayscale</h2>
+
+<p>You can download Grayscale for free from the Github page.</p>
+
+<a href="https://github.com/runningstream/hugograyscale/" class="btn btn-default btn-lg">Visit Download Page</a>
+
+</div></div></div></div></section>
+    
+        <section id="sec-ind-3" class="section-3 content-section text-center"><div class="container"><div class="row"><div class="col-lg-8 mx-auto">
+
+<h2 id="contact-start-bootstrap">Contact Start Bootstrap</h2>
+
+<p>Feel free to leave us a comment on the <a href="https://github.com/runningstream/hugograyscale/">Grayscale template Github page</a> to give some feedback about this theme!</p>
+
+<ul class="list-inline banner-social-buttons">
+    <li class="list-inline-item">
+<a href="https://twitter.com/stream_running" class="btn btn-default btn-lg">
+<i class="fa fa-twitter fa-fw"></i>
+<span class="network-name">Twitter</span>
+</a>
+</li>
+
+    <li class="list-inline-item">
+<a href="https://github.com/runningstream" class="btn btn-default btn-lg">
+<i class="fa fa-github fa-fw"></i>
+<span class="network-name">Github</span>
+</a>
+</li>
+
+</ul>
+</div></div></div></section>
+        
     <footer>
       <div class="container text-center">
         <p>Copyright &copy; Your Website </p>
@@ -113,11 +122,11 @@
     </footer>
 
     
-    <script src="/hugograyscale/vendor/jquery/jquery.min.js"></script>
-    <script src="/hugograyscale/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="/vendor/jquery/jquery.min.js"></script>
+    <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     
-    <script src="/hugograyscale/vendor/jquery-easing/jquery.easing.min.js"></script>
-    <script src="/hugograyscale/js/grayscale.min.js"></script>
+    <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
+    <script src="/js/grayscale.min.js"></script>
 </body>
 </html>
diff --git a/docs/index.xml b/docs/index.xml
deleted file mode 100644
index 3bbe993..0000000
--- a/docs/index.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>Hugo Grayscale Theme</title>
-    <link>https://runningstream.github.io/hugograyscale/</link>
-    <description>Recent content on Hugo Grayscale Theme</description>
-    <generator>Hugo -- gohugo.io</generator>
-    <language>en-us</language>
-    <lastBuildDate>Sun, 09 Sep 2018 00:00:00 +0000</lastBuildDate>
-    
-	<atom:link href="https://runningstream.github.io/hugograyscale/index.xml" rel="self" type="application/rss+xml" />
-    
-    
-  </channel>
-</rss>
\ No newline at end of file
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index 5a8f324..4ffddf8 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -3,8 +3,8 @@
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   
   <url>
-    <loc>https://runningstream.github.io/hugograyscale/</loc>
+    <loc>http://example.com/</loc>
     <lastmod>2018-09-09T00:00:00+00:00</lastmod>
   </url>
   
-</urlset>
\ No newline at end of file
+</urlset>
diff --git a/docs/tags/index.xml b/docs/tags/index.xml
deleted file mode 100644
index d629b65..0000000
--- a/docs/tags/index.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>Tags on Hugo Grayscale Theme</title>
-    <link>https://runningstream.github.io/hugograyscale/tags/</link>
-    <description>Recent content in Tags on Hugo Grayscale Theme</description>
-    <generator>Hugo -- gohugo.io</generator>
-    <language>en-us</language>
-    
-	<atom:link href="https://runningstream.github.io/hugograyscale/tags/index.xml" rel="self" type="application/rss+xml" />
-    
-    
-  </channel>
-</rss>
\ No newline at end of file
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index d11514e..9504cdd 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,44 +1,8 @@
 ---
-# The Hugo Grayscale theme is a one page theme designed to be the front page to your site.  Its content is populated via the front-matter in content/_index.md.  The page consists of, in order:
-# * a navbar at top linking to the other sections, and other arbitrary links
-# * an intro section presenting a header title and into text with background image
-# * an about section presenting a header and text with black background
-# * a download section presenting header and text with background image
-# * a contact section presenting header and text with black background
-# 
-# The section names show up as the links in the navbar, so you may wish to rename them if, for example, you're not using it for the purpose suggested by the default section name.
-# 
-# The background images are selected by filename - the intro section image must be named "intro-bg.jpg" and placed in the "static/img/" directory for your site.  Similarly, the downloads section image must be named "downloads-bg.jpg" and placed in the "static/img/" directory for your site.  See the default images in the theme's static directory for file size reference.
-
 title: "Hugo Grayscale Theme"
 date: 2018-09-09T00:00:00-00:00
 copyright: "Your Website"
-#mapsapikey: xxx
-
-socialhandles:
-    twitter: "stream_running"
-    github: "runningstream"
-#    googplus: "goog_addr_here"
 
 menu:
-    -
-        url: "https://startbootstrap.com/themes/grayscale/"
-        name: "Original"
-
-intro:
-    header: "Grayscale"
-    text: "A free, responsive, one page Hugo/Bootstrap theme originally created by Start Bootstrap."
-
-about:
-    header: "About Grayscale"
-    text: '<p>Grayscale is a free Hugo theme, originally created for Bootstrap by Start Bootstrap. It can be yours right now, simply download the template from <a href="https://github.com/runningstream/hugograyscale/">the Github page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p> <p>This theme was also adapted from a Jekyll version, brought to you by <a href="https://github.com/jeromelachaud">Jerome Lachaud</a></p> <p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p> <p>Grayscale includes full HTML, CSS, and custom JavaScript files along with SASS and LESS files for easy customization!</p>'
-
-download:
-    rename: "Links"
-    header: "Download Grayscale"
-    text: '<p>You can download Grayscale for free from the Github page.</p><a href="https://github.com/runningstream/hugograyscale/" class="btn btn-default btn-lg">Visit Download Page</a>'
-
-contact:
-    header: "Contact Start Bootstrap"
-    text: '<p>Feel free to leave us a comment on the <a href="https://github.com/runningstream/hugograyscale/">Grayscale template Github page</a> to give some feedback about this theme!</p>'
+    - {url: "https://startbootstrap.com/themes/grayscale/", name: "Original"}
 ---
diff --git a/exampleSite/content/section0.md b/exampleSite/content/section0.md
new file mode 100644
index 0000000..7577102
--- /dev/null
+++ b/exampleSite/content/section0.md
@@ -0,0 +1,9 @@
+---
+title: "Header"
+weight: 1
+improvecontrast: true
+---
+
+# Grayscale
+
+A free, responsive, one page Hugo/Bootstrap theme originally created by Start Bootstrap.
diff --git a/exampleSite/content/section1.md b/exampleSite/content/section1.md
new file mode 100644
index 0000000..730b128
--- /dev/null
+++ b/exampleSite/content/section1.md
@@ -0,0 +1,14 @@
+---
+title: "About"
+weight: 2
+---
+
+## About Grayscale
+
+Grayscale is a free Hugo theme, originally created for Bootstrap by Start Bootstrap. It can be yours right now, simply download the template from [the Github page](https://github.com/runningstream/hugograyscale/). The theme is open source, and you can use it for any purpose, personal or commercial.
+
+This theme was also adapted from a Jekyll version, brought to you by [Jerome Lachaud](https://github.com/jeromelachaud)
+
+This theme features stock photos by [Gratisography](http://gratisography.com/) along with a custom Google Maps skin courtesy of [Snazzy Maps](http://snazzymaps.com/).
+
+Grayscale includes full HTML, CSS, and custom JavaScript files along with SASS and LESS files for easy customization!
diff --git a/exampleSite/content/section2.md b/exampleSite/content/section2.md
new file mode 100644
index 0000000..61d08e7
--- /dev/null
+++ b/exampleSite/content/section2.md
@@ -0,0 +1,11 @@
+---
+title: "Links"
+weight: 3
+improvecontrast: true
+---
+
+## Download Grayscale
+
+You can download Grayscale for free from the Github page.
+
+{{< big-button text="Visit Download Page" href="https://github.com/runningstream/hugograyscale/" >}}
diff --git a/exampleSite/content/section3.md b/exampleSite/content/section3.md
new file mode 100644
index 0000000..6977daf
--- /dev/null
+++ b/exampleSite/content/section3.md
@@ -0,0 +1,13 @@
+---
+title: "Contact"
+weight: 4
+---
+
+## Contact Start Bootstrap
+
+Feel free to leave us a comment on the [Grayscale template Github page](https://github.com/runningstream/hugograyscale/) to give some feedback about this theme!
+
+{{% socialhandles %}}
+    {{< twitter user="stream_running" >}}
+    {{< github user="runningstream" >}}
+{{% /socialhandles %}}
diff --git a/layouts/_default/index.xml b/layouts/_default/index.xml
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/layouts/_default/index.xml
diff --git a/layouts/_default/sitemap.xml b/layouts/_default/sitemap.xml
new file mode 100644
index 0000000..a48ab5d
--- /dev/null
+++ b/layouts/_default/sitemap.xml
@@ -0,0 +1,22 @@
+{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }}
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  {{ with .Site.GetPage }}
+  <url>
+    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
+    <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
+    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
+    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
+    <xhtml:link
+                rel="alternate"
+                hreflang="{{ .Lang }}"
+                href="{{ .Permalink }}"
+                />{{ end }}
+    <xhtml:link
+                rel="alternate"
+                hreflang="{{ .Lang }}"
+                href="{{ .Permalink }}"
+                />{{ end }}
+  </url>
+  {{ end }}
+</urlset>
diff --git a/layouts/index.html b/layouts/index.html
index 8f80d35..2929ba3 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,15 +1,4 @@
 {{- define "main" -}}
-    {{- $.Scratch.Set "about" "about" -}}
-    {{- $.Scratch.Set "download" "download" -}}
-    {{- $.Scratch.Set "contact" "contact" -}}
-    {{- range $pagesect := (slice "about" "download" "contact") -}}
-        {{- if isset $.Params $pagesect -}}
-          {{- $param_pagesect := index $.Params $pagesect -}}
-          {{- if isset $param_pagesect "rename" -}}
-              {{- $.Scratch.Set $pagesect (index $param_pagesect "rename") -}}
-          {{- end -}}
-        {{- end -}}
-    {{- end -}}
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
       <div class="container">
@@ -20,13 +9,14 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
           <ul class="navbar-nav ml-auto">
-            {{- range $pagesect := ( slice "about" "download" "contact" ) -}}
-              {{- if isset $.Params $pagesect -}}
-                <li class="nav-item">
-                  <a class="nav-link js-scroll-trigger improve-contrast-box" href="#{{ $.Scratch.Get $pagesect }}">{{- $.Scratch.Get $pagesect -}}</a>
-                </li>
-              {{- end -}}
+            {{- range $ind, $elem := .Pages.ByWeight }}
+                {{ if ne $ind 0 }}
+                    <li class="nav-item">
+                      <a class="nav-link js-scroll-trigger improve-contrast-box" href="#sec-ind-{{ $ind }}">{{- $elem.Params.title -}}</a>
+                    </li>
+                {{ end }}
             {{- end -}}
+
             {{- if isset $.Params "menu" -}}
               {{- range $menuitem := $.Params.menu -}}
                 <li class="nav-item">
@@ -38,113 +28,35 @@
         </div>
       </div>
     </nav>
-    
-    <!-- Intro Header -->
-    {{- if isset $.Params "intro" -}}
-    <header class="masthead">
-      <div class="intro-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-lg-8 mx-auto">
-              <div class="improve-contrast-box">
-                <h1 class="brand-heading">{{ default "" $.Params.intro.header | safeHTML }}</h1>
-                <p class="intro-text">{{- default "" $.Params.intro.text | safeHTML -}}</p>
-              </div>
-              <a href="#{{ .Scratch.Get "about" }}" class="btn btn-circle js-scroll-trigger">
-                <i class="fa fa-angle-double-down animated"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-    {{ end }}
 
-    <!-- About Section -->
-    {{- if isset $.Params "about" -}}
-    <section id="{{ .Scratch.Get "about" }}" class="content-section text-center">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-8 mx-auto">
-            <h2>{{- default "" $.Params.about.header | safeHTML -}}</h2>
-            <p>{{- default "" $.Params.about.text | safeHTML -}}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    {{- end -}}
+    {{ range $ind, $elem := .Pages.ByWeight }}
+        {{ if eq $ind 0 -}}
+            <header><div id="intro-body">
+        {{- else -}}
+            <section id="sec-ind-{{ $ind }}" class="section-{{ $ind }} content-section text-center">
+        {{- end -}}
 
-    <!-- Download Section -->
-    {{- if isset $.Params "download" -}}
-    <section id="{{ .Scratch.Get "download" }}" class="download-section content-section text-center">
-      <div class="container">
-        <div class="col-lg-8 mx-auto">
-            <div class="improve-contrast-box">
-              <h2>{{- default "" $.Params.download.header | safeHTML -}}</h2>
-              <p>{{- default "" $.Params.download.text | safeHTML -}}</p>
-            </div>
-        </div>
-      </div>
-    </section>
-    {{- end -}}
+        <div class="container"><div class="row"><div class="col-lg-8 mx-auto">
+            {{- if $elem.Params.improvecontrast -}}
+                <div class="improve-contrast-box">
+            {{- end -}}
+            {{- default "" $elem.Content -}}
+            {{- if $elem.Params.improvecontrast -}}
+                </div>
+            {{- end -}}
 
-    <!-- Contact Section -->
-    {{- if isset $.Params "contact" -}}
-    <section id="{{ .Scratch.Get "contact" }}" class="content-section text-center">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-8 mx-auto">
-            <h2>{{- default "" $.Params.contact.header | safeHTML -}}</h2>
-            <p>{{- default "" $.Params.contact.text | safeHTML -}}</p>
-            {{- if isset $.Params "socialhandles" -}}
-            <ul class="list-inline banner-social-buttons">
-              {{- if isset $.Params.socialhandles "twitter" -}}
-              <li class="list-inline-item">
-                <a href="https://twitter.com/{{ $.Params.socialhandles.twitter }}" class="btn btn-default btn-lg">
-                  <i class="fa fa-twitter fa-fw"></i>
-                  <span class="network-name">Twitter</span>
-                </a>
-              </li>
-              {{- end -}}
-              {{- if isset $.Params.socialhandles "github" -}}
-              <li class="list-inline-item">
-                <a href="https://github.com/{{ $.Params.socialhandles.github }}" class="btn btn-default btn-lg">
-                  <i class="fa fa-github fa-fw"></i>
-                  <span class="network-name">Github</span>
-                </a>
-              </li>
-              {{- end -}}
-              {{- if isset $.Params.socialhandles "googplus" -}}
-              <li class="list-inline-item">
-                <a href="https://plus.google.com/+{{ $.Params.socialhandles.googplus }}/posts" class="btn btn-default btn-lg">
-                  <i class="fa fa-google-plus fa-fw"></i>
-                  <span class="network-name">Google+</span>
-                </a>
-              </li>
-              {{- end -}}
-              {{- if isset $.Params.socialhandles "facebook" -}}
-              <li class="list-inline-item">
-                <a href="https://facebook.com/{{ $.Params.socialhandles.facebook}}" class="btn btn-default btn-lg">
-                  <i class="fa fa-facebook-square fa-fw"></i>
-                  <span class="network-name">Facebook</span>
-                </a>
-              </li>
-              {{- end -}}
-              {{- if isset $.Params.socialhandles "instagram" -}}
-              <li class="list-inline-item">
-                <a href="https://instagram.com/{{ $.Params.socialhandles.instagram }}" class="btn btn-default btn-lg">
-                  <i class="fa fa-instagram fa-fw"></i>
-                  <span class="network-name">Instagram</span>
-                </a>
-              </li>
-              {{- end -}}
-            </ul>
+            {{- if eq $ind 0 -}}
+                <a href="#sec-ind-1" class="btn btn-circle js-scroll-trigger" aria-label="Scroll to Next Section"><i class="fa fa-angle-double-down animated"></i></a>
             {{- end -}}
-          </div>
-        </div>
-      </div>
-    </section>
-    {{- end -}}
+
+        </div></div></div>
+
+        {{- if eq $ind 0 -}}
+            </div></header>
+        {{- else -}}
+            </section>
+        {{- end }}
+    {{ end }}
 
     {{- if isset $.Params "mapsapikey" -}}
     <!-- Map Section -->
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 848dfe5..31bf7b9 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -24,6 +24,6 @@
     <link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
 
     <!-- Custom styles for this template -->
-    <link href="{{ "css/grayscale.min.css" | relURL }}" rel="stylesheet">
+    <link href="{{ "css/grayscale.css" | relURL }}" rel="stylesheet">
 
     {{ template "_internal/google_analytics_async.html" . }}
diff --git a/layouts/shortcodes/big-button.html b/layouts/shortcodes/big-button.html
new file mode 100644
index 0000000..a0b222e
--- /dev/null
+++ b/layouts/shortcodes/big-button.html
@@ -0,0 +1 @@
+<a href="{{ .Get "href" }}" class="btn btn-default btn-lg">{{ .Get "text" }}</a>
diff --git a/layouts/shortcodes/facebook.html b/layouts/shortcodes/facebook.html
new file mode 100644
index 0000000..5605867
--- /dev/null
+++ b/layouts/shortcodes/facebook.html
@@ -0,0 +1,6 @@
+<li class="list-inline-item">
+<a href="https://facebook.com/{{ .Get "user" }}" class="btn btn-default btn-lg">
+<i class="fa fa-facebook-square fa-fw"></i>
+<span class="network-name">Facebook</span>
+</a>
+</li>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
new file mode 100644
index 0000000..6686fde
--- /dev/null
+++ b/layouts/shortcodes/github.html
@@ -0,0 +1,6 @@
+<li class="list-inline-item">
+<a href="https://github.com/{{ .Get "user" }}" class="btn btn-default btn-lg">
+<i class="fa fa-github fa-fw"></i>
+<span class="network-name">Github</span>
+</a>
+</li>
diff --git a/layouts/shortcodes/instagram.html b/layouts/shortcodes/instagram.html
new file mode 100644
index 0000000..36eda0e
--- /dev/null
+++ b/layouts/shortcodes/instagram.html
@@ -0,0 +1,6 @@
+<li class="list-inline-item">
+<a href="https://instagram.com/{{ .Get "user" }}" class="btn btn-default btn-lg">
+<i class="fa fa-instagram fa-fw"></i>
+<span class="network-name">Instagram</span>
+</a>
+</li>
diff --git a/layouts/shortcodes/socialhandles.html b/layouts/shortcodes/socialhandles.html
new file mode 100644
index 0000000..df2d3a7
--- /dev/null
+++ b/layouts/shortcodes/socialhandles.html
@@ -0,0 +1 @@
+<ul class="list-inline banner-social-buttons">{{- .Inner -}}</ul>
diff --git a/layouts/shortcodes/twitter.html b/layouts/shortcodes/twitter.html
new file mode 100644
index 0000000..321a768
--- /dev/null
+++ b/layouts/shortcodes/twitter.html
@@ -0,0 +1,6 @@
+<li class="list-inline-item">
+<a href="https://twitter.com/{{ .Get "user" }}" class="btn btn-default btn-lg">
+<i class="fa fa-twitter fa-fw"></i>
+<span class="network-name">Twitter</span>
+</a>
+</li>
diff --git a/static/css/grayscale.css b/static/css/grayscale.css
index 26f9cc9..eeeca52 100644
--- a/static/css/grayscale.css
+++ b/static/css/grayscale.css
@@ -40,8 +40,6 @@ p {
 }
 
 a {
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   color: #42DCA3;
 }
@@ -75,8 +73,6 @@ a:focus, a:hover {
 }
 
 #mainNav .navbar-nav .nav-item {
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
   transition: background 0.3s ease-in-out;
 }
 
@@ -95,8 +91,6 @@ a:focus, a:hover {
   #mainNav {
     padding-top: 20px;
     padding-bottom: 20px;
-    -webkit-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    -moz-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
     transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
     letter-spacing: 1px;
     border-bottom: none;
@@ -117,31 +111,26 @@ a:focus, a:hover {
   }
 }
 
-.masthead {
+header {
   display: table;
   width: 100%;
   height: auto;
   padding: 200px 0;
   text-align: center;
   color: white;
-  background: url("../img/intro-bg.jpg") no-repeat bottom center scroll;
+  background: url("../img/section0-bg.jpg") no-repeat bottom center scroll;
   background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
   background-size: cover;
 }
 
-.masthead .intro-body {
+#intro-body {
   display: table-cell;
   vertical-align: middle;
 }
-
-.masthead .intro-body .brand-heading {
+header h1 {
   font-size: 50px;
 }
-
-.masthead .intro-body .intro-text {
+header p {
   font-size: 18px;
 }
 
@@ -152,14 +141,14 @@ a:focus, a:hover {
 }
 
 @media (min-width: 768px) {
-  .masthead {
+  header {
     height: 100%;
     padding: 0;
   }
-  .masthead .intro-body .brand-heading {
+  header h1 {
     font-size: 100px;
   }
-  .masthead .intro-body .intro-text {
+  header p {
     font-size: 22px;
   }
 }
@@ -170,8 +159,6 @@ a:focus, a:hover {
   height: 55px;
   margin-top: 15px;
   line-height: 45px;
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
   transition: background 0.3s ease-in-out;
   color: white;
   border: 2px solid white;
@@ -190,13 +177,10 @@ a:focus, a:hover {
   padding-bottom: 150px;
 }
 
-.download-section {
+.section-2 {
   color: white;
-  background: url("../img/downloads-bg.jpg") no-repeat center center scroll;
+  background: url("../img/section2-bg.jpg") no-repeat center center scroll;
   background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
   background-size: cover;
 }
 
@@ -218,8 +202,6 @@ a:focus, a:hover {
 .btn {
   font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 400;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   text-transform: uppercase;
   border-radius: 0;
@@ -240,6 +222,7 @@ a:focus, a:hover {
 
 ul.banner-social-buttons {
   margin-top: 0;
+  font-size: 0;
 }
 
 @media (max-width: 1199px) {
@@ -268,12 +251,6 @@ footer p {
   margin: 0;
 }
 
-::-moz-selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
 ::selection {
   background: #fcfcfc;
   background: rgba(255, 255, 255, 0.2);
@@ -283,7 +260,3 @@ footer p {
 img::selection {
   background: transparent;
 }
-
-img::-moz-selection {
-  background: transparent;
-}
diff --git a/static/css/grayscale.min.css b/static/css/grayscale.min.css
deleted file mode 100644
index 26f9cc9..0000000
--- a/static/css/grayscale.min.css
+++ /dev/null
@@ -1,289 +0,0 @@
-body {
-  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: white;
-  background-color: black;
-}
-
-html {
-  width: 100%;
-  height: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  margin: 0 0 35px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-
-p {
-  font-size: 16px;
-  line-height: 1.5;
-  margin: 0 0 25px;
-}
-
-@media (min-width: 768px) {
-  p {
-    font-size: 18px;
-    line-height: 1.6;
-    margin: 0 0 35px;
-  }
-}
-
-a {
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  color: #42DCA3;
-}
-
-a:focus, a:hover {
-  text-decoration: none;
-  color: #1d9b6c;
-}
-
-#mainNav {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  margin-bottom: 0;
-  text-transform: uppercase;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  background-color: black;
-}
-
-#mainNav .navbar-toggler {
-  font-size: 14px;
-  padding: 11px;
-  color: white;
-  border: 1px solid white;
-}
-
-#mainNav .navbar-brand {
-  font-weight: 700;
-}
-
-#mainNav a {
-  color: white;
-}
-
-#mainNav .navbar-nav .nav-item {
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
-  transition: background 0.3s ease-in-out;
-}
-
-#mainNav .navbar-nav .nav-item:hover {
-  color: fade(white, 80%);
-  outline: none;
-  background-color: transparent;
-}
-
-#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
-  outline: none;
-  background-color: transparent;
-}
-
-@media (min-width: 992px) {
-  #mainNav {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    -webkit-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    -moz-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
-    letter-spacing: 1px;
-    border-bottom: none;
-    background: transparent;
-  }
-  #mainNav.navbar-shrink {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    background: black;
-  }
-  #mainNav .nav-link.active {
-    outline: none;
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  #mainNav .nav-link.active:hover {
-    color: white;
-  }
-}
-
-.masthead {
-  display: table;
-  width: 100%;
-  height: auto;
-  padding: 200px 0;
-  text-align: center;
-  color: white;
-  background: url("../img/intro-bg.jpg") no-repeat bottom center scroll;
-  background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.masthead .intro-body {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.masthead .intro-body .brand-heading {
-  font-size: 50px;
-}
-
-.masthead .intro-body .intro-text {
-  font-size: 18px;
-}
-
-.improve-contrast-box {
-  background: rgba(0, 0, 0, .5);
-  border-radius: 5px;
-  text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
-}
-
-@media (min-width: 768px) {
-  .masthead {
-    height: 100%;
-    padding: 0;
-  }
-  .masthead .intro-body .brand-heading {
-    font-size: 100px;
-  }
-  .masthead .intro-body .intro-text {
-    font-size: 22px;
-  }
-}
-
-.btn-circle {
-  font-size: 26px;
-  width: 55px;
-  height: 55px;
-  margin-top: 15px;
-  line-height: 45px;
-  -webkit-transition: background 0.3s ease-in-out;
-  -moz-transition: background 0.3s ease-in-out;
-  transition: background 0.3s ease-in-out;
-  color: white;
-  border: 2px solid white;
-  border-radius: 100% !important;
-  background: transparent;
-}
-
-.btn-circle:focus, .btn-circle:hover {
-  color: white;
-  outline: none;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.content-section {
-  padding-top: 150px;
-  padding-bottom: 150px;
-}
-
-.download-section {
-  color: white;
-  background: url("../img/downloads-bg.jpg") no-repeat center center scroll;
-  background-color: black;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-#map {
-  width: 100%;
-  height: 300px;
-}
-
-@media (min-width: 992px) {
-  .content-section {
-    padding-top: 200px;
-    padding-bottom: 200px;
-  }
-  #map {
-    height: 350px;
-  }
-}
-
-.btn {
-  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  text-transform: uppercase;
-  border-radius: 0;
-}
-
-.btn-default {
-  color: #42DCA3;
-  border: 1px solid #42DCA3;
-  background-color: transparent;
-}
-
-.btn-default:focus, .btn-default:hover {
-  color: black;
-  border: 1px solid #42DCA3;
-  outline: none;
-  background-color: #42DCA3;
-}
-
-ul.banner-social-buttons {
-  margin-top: 0;
-}
-
-@media (max-width: 1199px) {
-  ul.banner-social-buttons {
-    margin-top: 15px;
-  }
-}
-
-@media (max-width: 767px) {
-  ul.banner-social-buttons li {
-    display: block;
-    margin-bottom: 20px;
-    padding: 0;
-  }
-  ul.banner-social-buttons li:last-child {
-    margin-bottom: 0;
-  }
-}
-
-footer {
-  padding: 50px 0;
-}
-
-footer p {
-  font-size: 14px;
-  margin: 0;
-}
-
-::-moz-selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
-::selection {
-  background: #fcfcfc;
-  background: rgba(255, 255, 255, 0.2);
-  text-shadow: none;
-}
-
-img::selection {
-  background: transparent;
-}
-
-img::-moz-selection {
-  background: transparent;
-}
diff --git a/static/img/downloads-bg.jpg b/static/img/downloads-bg.jpg
deleted file mode 100644
index 9d109b8..0000000
--- a/static/img/downloads-bg.jpg
+++ /dev/null
diff --git a/static/img/intro-bg.jpg b/static/img/section0-bg.jpg
index de06b29..de06b29 100644
--- a/static/img/intro-bg.jpg
+++ b/static/img/section0-bg.jpg
diff --git a/static/img/section2-bg.jpg b/static/img/section2-bg.jpg
new file mode 100644
index 0000000..ec135b8
--- /dev/null
+++ b/static/img/section2-bg.jpg