docs css

15 files changed, 117 insertions, 74 deletions

diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss
index dee4b91..c8e8581 100644
--- a/assets/scss/components/_content.scss
+++ b/assets/scss/components/_content.scss
@@ -29,8 +29,12 @@ $paragraph-color: $black;
     font-size: 0.9rem;
     line-height: 1.4;
   }
-  .highlight {
-    margin-bottom: 20px;
+  strong {
+    font-weight: bold;
+  }
+  em {
+    font-style: italic;
+    font-weight: normal;
   }
   ul,
   ol {
diff --git a/assets/scss/components/_highlight.scss b/assets/scss/components/_highlight.scss
index cabacfb..54283e5 100644
--- a/assets/scss/components/_highlight.scss
+++ b/assets/scss/components/_highlight.scss
@@ -1,4 +1,5 @@
 .highlight {
+  margin-bottom: 20px;
 }
 .highlight .hll {
   background-color: #ffffcc;
diff --git a/assets/scss/components/_summary.scss b/assets/scss/components/_summary.scss
new file mode 100644
index 0000000..88de2a3
--- /dev/null
+++ b/assets/scss/components/_summary.scss
@@ -0,0 +1,2 @@
+.summary {
+}
diff --git a/assets/scss/components/_title.scss b/assets/scss/components/_title.scss
index e6e2dc1..0a522b7 100644
--- a/assets/scss/components/_title.scss
+++ b/assets/scss/components/_title.scss
@@ -1,5 +1,4 @@
 .title {
-  color: #222222;
   font-size: 2.4rem;
   line-height: 1.2;
   font-family: $font-family-base;
@@ -10,3 +9,15 @@
     font-size: 3rem;
   }
 }
+
+.title-summary {
+  font-size: 1.6rem;
+  line-height: 1.4;
+  font-family: $font-family-base;
+  letter-spacing: -0.2px;
+  font-weight: 200;
+  margin-bottom: 10px;
+  @include media-breakpoint-up(md) {
+    font-size: 1.6rem;
+  }
+}
diff --git a/exampleSite/content/docs/_index.md b/exampleSite/content/docs/_index.md
index 3d21104..446a135 100644
--- a/exampleSite/content/docs/_index.md
+++ b/exampleSite/content/docs/_index.md
@@ -4,18 +4,6 @@ date: 2018-11-28T15:14:39+10:00
 weight: 1
 ---
 
-## Make Beautiful Docs
+## Whisper Theme
 
 Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal. We’re aiming for a similar feel to a Github readme.
-
-```javascript
-var body = document.querySelector('body');
-var menuTrigger = document.querySelector('#toggle-main-menu-mobile');
-var menuContainer = document.querySelector('#main-menu-mobile');
-
-menuTrigger.onclick = function() {
-  menuContainer.classList.toggle('open');
-  menuTrigger.classList.toggle('is-active');
-  body.classList.toggle('lock-scroll');
-};
-```
diff --git a/exampleSite/content/docs/configure/index.md b/exampleSite/content/docs/configure/index.md
index 8fb0443..d8cfb4c 100644
--- a/exampleSite/content/docs/configure/index.md
+++ b/exampleSite/content/docs/configure/index.md
@@ -5,35 +5,48 @@ draft: false
 weight: 4
 ---
 
-### Homepage meta tags
+## Syntax Highlighting
 
-Often a homepage requires special meta tags such as a meta description or og meta data for twitter, facebook etc. You can configure these values in the `config.toml`
+Whisper uses the in-built code highlighting that ships with hugo. https://gohugo.io/content-management/syntax-highlighting/
 
+You can insert code snippets in any markdown file by using standard code fences syntax ie:
+
+````
+```
+insert code here
 ```
-// config.toml
-[params]
-  google_analytics_id=""
-
-  [params.homepage_meta_tags]
-    meta_description = "a description of your website."
-    meta_og_title = "My Theme"
-    meta_og_type = "website"
-    meta_og_url = "https://www.mywebsite.com"
-    meta_og_image = "https://www.mywebsite.com/images/tn.png"
-    meta_og_description = "a description of your website."
-    meta_twitter_card = "summary"
-    meta_twitter_site = "@mytwitterhandle"
-    meta_twitter_creator = "@mytwitterhandle"
+````
+
+You can specify the langauge by adding a declaration after the backticks
+
+````
+```javascript
+insert code here
 ```
+````
 
-### Set meta tags on a per template/page basis
+### Pygments Options
 
-You can set meta tags on a per template basis using a block. For example, you might want to write a custom meta description for the `/services` page. You can insert any valid HTML meta data inside the `{{ define "meta_tags }}` block at the top of a template.
+The following code highlighting options are configured in the `config.toml`
 
+```toml
+pygmentsCodeFences = true
+pygmentsCodefencesGuessSyntax = true
+pygmentsUseClasses = true
 ```
-// layouts/services/list.html
-...
 
-{{ define "meta_tags" }}
-    <meta name="description" content="We offer a variety of services in the finance industry" />
+## Main menu
+
+Configure the main menu by editing the `config.toml`
+
+```toml
+[[menu.main]]
+name = "Home"
+url = "/"
+weight = 1
+
+[[menu.main]]
+name = "Docs"
+url = "/docs/"
+weight = 2
 ```
diff --git a/exampleSite/content/docs/installation/index.md b/exampleSite/content/docs/install-theme/index.md
index 5e1e882..b1c41da 100644
--- a/exampleSite/content/docs/installation/index.md
+++ b/exampleSite/content/docs/install-theme/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Installation'
+title: 'Install Theme'
 date: 2019-02-11T19:27:37+10:00
 draft: false
 weight: 3
@@ -22,18 +22,22 @@ Copy or git clone this theme into the sites themes folder `mynewsite/themes`
 ```
 cd mynewsite
 cd themes
-git clone https://github.com/jugglerx/hugo-hero-theme.git
+git clone https://github.com/jugglerx/hugo-whisper-theme.git
 ```
 
 #### Install from .zip file
 
-You can download the .zip file located here https://github.com/JugglerX/hugo-hero-theme/archive/master.zip.
+You can download the .zip file located here https://github.com/JugglerX/hugo-whisper-theme/archive/master.zip.
 
-Extract the downloaded .zip inside the `themes` folder. Rename the extracted folder from `hugo-hero-theme-master` -> `hugo-hero-theme`. You should end up with the following folder structure `mynewsite/themes/hugo-hero-theme`
+Extract the downloaded .zip inside the `themes` folder. Rename the extracted folder from `hugo-whisper-theme-master` -> `hugo-whisper-theme`. You should end up with the following folder structure `mynewsite/themes/hugo-whisper-theme`
 
-### Add example content
+## Add example content
 
-The fastest way to get started is to copy the example content. Copy the entire contents of the `exampleSite` folder to the root folder of your Hugo site (the folder with the README.md).
+The fastest way to get started is to copy the example content and modify the included `config.toml`
+
+### Copy exampleSite contents
+
+Copy the entire contents of the `exampleSite` folder to the root folder of your Hugo site _(the folder with the README.md)_.
 
 ### Update config.toml
 
@@ -42,10 +46,10 @@ After you copy the `config.toml` into the root folder of your Hugo site you will
 ```
 baseURL = "/"
 themesDir = "themes"
-theme = "hugo-hero-theme"
+theme = "hugo-whisper-theme"
 ```
 
-### Run Hugo
+## Run Hugo
 
 After installing the theme for the first time, generate the Hugo site.
 
diff --git a/exampleSite/content/docs/netlify/image2.png b/exampleSite/content/docs/netlify/image2.png
deleted file mode 100644
index 7eef94c..0000000
--- a/exampleSite/content/docs/netlify/image2.png
+++ /dev/null
diff --git a/exampleSite/content/docs/netlify/index.md b/exampleSite/content/docs/netlify/index.md
deleted file mode 100644
index d92482d..0000000
--- a/exampleSite/content/docs/netlify/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: 'Netlify'
-date: 2018-11-28T15:14:39+10:00
-draft: false
-weight: 5
----
-
-# Netlify Index
-
-# Using exampleSite With Netlify
-
-Lorem markdownum, dictis umbrosum dextrum, Lelegeia quamquam distantes pares
-ignisque quaerit dederat gemino Aethiopesque [caelo](#inque-ne-collocat)
-ulciscitur est. Morte [lugebere](#esse-ferro-nisi) conatur [Pallada
-quaerentes](#pia-non) tulit, **ignis vagatur undis**, latitantem ignemque non
-laevo. Terras seu favoni tectas movit hunc motuque damno tutoque quattuor. Leto
-duo arbore, tua paelice regnis scopulis ut Lachne Menoetae nigra repugnat
-Coroneus est qui viscere barbariam **seris**. Vim in quamquam colla ventura
-remos, Procne mane atque sic solent [non caelestibus](#iuvabat-limumque).
diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
index e1e58a3..83c0bce 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content
@@ -5639,7 +5639,6 @@ ol {
   border: 2px solid #fff; }
 
 .title {
-  color: #222222;
   font-size: 2.4rem;
   line-height: 1.2;
   font-family: "Roboto", Arial, sans-serif, -apple-system;
@@ -5650,6 +5649,17 @@ ol {
     .title {
       font-size: 3rem; } }
 
+.title-summary {
+  font-size: 1.6rem;
+  line-height: 1.4;
+  font-family: "Roboto", Arial, sans-serif, -apple-system;
+  letter-spacing: -0.2px;
+  font-weight: 200;
+  margin-bottom: 10px; }
+  @media (min-width: 768px) {
+    .title-summary {
+      font-size: 1.6rem; } }
+
 .content {
   -webkit-font-smoothing: antialiased; }
   .content pre {
@@ -5676,8 +5686,11 @@ ol {
     font-family: "Roboto Mono", monospace;
     font-size: 0.9rem;
     line-height: 1.4; }
-  .content .highlight {
-    margin-bottom: 20px; }
+  .content strong {
+    font-weight: bold; }
+  .content em {
+    font-style: italic;
+    font-weight: normal; }
   .content ul,
   .content ol {
     margin-top: 10px;
@@ -5778,6 +5791,9 @@ ol {
   background: #ffffff;
   padding: 10px; }
 
+.highlight {
+  margin-bottom: 20px; }
+
 .highlight .hll {
   background-color: #ffffcc; }
 
diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.content
index e4b9afc..4719742 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.content
@@ -2,4 +2,4 @@
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
-* @link https://github.com/jonsuh/hamburgers*/.hamburger{padding:15px;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:#0000;border:0;margin:0;overflow:visible}.hamburger:hover{opacity:.7}.hamburger.is-active:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after{background-color:#fff}.hamburger-box{width:32px;height:19px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-1.5px}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:32px;height:3px;background-color:#1de9b6;border-radius:3px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-8px}.hamburger-inner::after{bottom:-8px}.hamburger--slider .hamburger-inner{top:1.5px}.hamburger--slider .hamburger-inner::before{top:8px;transition-property:transform,opacity;transition-timing-function:ease;transition-duration:.15s}.hamburger--slider .hamburger-inner::after{top:16px}.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,8px,0) rotate(45deg)}.hamburger--slider.is-active .hamburger-inner::before{transform:rotate(-45deg) translate3d(-4.57142857px,-5px,0);opacity:0}.hamburger--slider.is-active .hamburger-inner::after{transform:translate3d(0,-16px,0) rotate(-90deg)}ul,ol{margin:0;padding:0;list-style:none}.page{display:flex;min-height:100vh;flex-direction:column}.page .wrapper{flex:1}.header{color:#1de9b6;background-color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 0}.header .container{display:flex;justify-content:space-between;align-items:center}.header.header-absolute{position:absolute;z-index:10;width:100%}.lock-scroll .header.header-absolute{position:static}.footer{background:#ffca28;padding-top:20px;padding-bottom:20px}.footer .footer-inner{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media(min-width:576px){.footer .footer-inner{justify-content:space-between;flex-direction:row;align-items:center}}.footer .footer-title{color:#fff;font-size:1.3rem;font-family:lora,Arial,sans-serif,-apple-system;margin-bottom:10px;flex:0}@media(min-width:576px){.footer .footer-title{margin:0;flex:0 0 120px}}.footer ul{list-style:none;margin:0;padding:0;flex:1}.footer ul li{display:block;margin-right:10px;color:#fff;font-size:.9rem;line-height:1.8}.footer ul li:last-of-type{margin-right:0}.footer ul li a{color:#fff;text-decoration:none}.footer ul li a:hover{text-decoration:underline}.footer ul li.copyright{font-weight:700;color:#fff;display:none}@media(min-width:768px){.footer ul li.copyright{display:inline-block}}@media(min-width:576px){.footer ul{height:inherit;display:flex;list-style:none;margin:0;padding:0;align-items:center;justify-content:flex-end}.footer ul li{list-style:none}.footer ul li a{display:inline-block;height:40px;padding:10px 8px;font-weight:300}}.sub-footer{background:#f4b800;padding-top:20px;padding-bottom:20px}@media(min-width:768px){.sub-footer{padding-top:10px;padding-bottom:10px}}.sub-footer .sub-footer-inner{display:flex;flex-direction:column;justify-content:space-between}@media(min-width:768px){.sub-footer .sub-footer-inner{flex-direction:row}}.sub-footer .sub-footer-inner ul{list-style:none;margin:0;padding:0}.sub-footer .sub-footer-inner ul li{list-style:none;display:block;color:#fffcf4;font-size:.9rem;line-height:1.8}.sub-footer .sub-footer-inner ul li strong{font-weight:700;color:#fff}.sub-footer .sub-footer-inner ul li a{color:#fffcf4;text-decoration:none}.sub-footer .sub-footer-inner ul li a:hover{text-decoration:underline}.sub-footer .sub-footer-inner ul li span{display:inline-block;height:40px;padding:10px 0 10px 8px;font-weight:700;color:#fff}.sub-footer .sub-footer-inner ul li.zerostatic a{color:#fff}@media(min-width:576px){.sub-footer .sub-footer-inner ul li{display:inline-block;margin-left:10px}.sub-footer .sub-footer-inner ul li:first-of-type{margin-left:0}}.logo{display:none}@media(min-width:576px){.logo{display:block;width:70px}}.logo img{width:100%;height:auto}.logo a{display:block;width:100%;height:100%}.logo-mobile{display:block;width:40px;padding:10px 0}@media(min-width:576px){.logo-mobile{display:none}}.logo-mobile img{width:100%;height:auto}.logo-mobile a{display:block;width:100%;height:100%}.main-menu{display:none}@media(min-width:768px){.main-menu{display:block}}.main-menu>ul{display:flex;align-items:center;justify-content:flex-start;font-family:roboto,Arial,sans-serif,-apple-system}.main-menu>ul>li{list-style:none;font-size:14px}.main-menu>ul>li>a{padding:10px 14px;display:inline-block;font-weight:400;text-decoration:none;color:#1de9b6}.main-menu>ul>li>a:hover{text-decoration:underline;color:#1de9b6}.main-menu>ul>li.active>a{font-weight:700}.main-menu-mobile{position:fixed;background:#1de9b6;top:0;left:0;width:100%;height:100vh;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,height .35s;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column}.main-menu-mobile.open{opacity:.9;visibility:visible;height:100%;z-index:20}.main-menu-mobile.open li{animation:fadeInRight .5s ease forwards;animation-delay:.35s}.main-menu-mobile.open li:nth-of-type(2){animation-delay:.4s}.main-menu-mobile.open li:nth-of-type(3){animation-delay:.45s}.main-menu-mobile.open li:nth-of-type(4){animation-delay:.5s}.main-menu-mobile.open li:nth-of-type(5){animation-delay:.55s}.main-menu-mobile.open li:nth-of-type(6){animation-delay:.6s}.main-menu-mobile ul{font-size:2rem;font-family:lora,Arial,sans-serif,-apple-system;text-align:center;list-style:none;padding:0;margin:0;flex:0}.main-menu-mobile ul li{display:block;position:relative;opacity:0}.main-menu-mobile ul li a{display:block;position:relative;color:#fff;text-decoration:none;overflow:hidden}.main-menu-mobile ul li a:hover::after,.main-menu-mobile ul li a:focus::after,.main-menu-mobile ul li a:active::after{width:100%}.main-menu-mobile ul li a::after{content:'';position:absolute;bottom:0;left:50%;width:0%;transform:translateX(-50%);height:3px;background:#fff;transition:.35s}@keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}.lock-scroll{overflow:hidden}.docs-menu h4{font-size:1rem;font-weight:700}.docs-menu ul{list-style:none;padding:0;margin:0}.docs-menu ul li{font-size:.9rem;line-height:1.4;font-weight:400;margin:0;padding:4px 0}.docs-menu ul li.active a{color:#4beec5;font-weight:400}.docs-menu ul li a{color:#212529}.docs-menu ul li a:hover{color:#1de9b6}.hamburger{padding:10px 0 10px 10px;outline:none;z-index:30;cursor:pointer}@media(min-width:768px){.hamburger{display:none}}.hamburger:focus{outline:none}.hamburger .hamburger-inner,.hamburger .hamburger-inner::before,.hamburger .hamburger-inner::after{background:#1de9b6}.hamburger .hamburger-inner::after{width:18px;right:0}.hamburger.is-active .hamburger-inner::after{width:inherit;right:unset}.button{white-space:nowrap;display:inline-block;padding:8px 15px 6px;background:#1de9b6;font-weight:400;text-transform:uppercase;color:#fff;text-decoration:none;-webkit-transition:all .15s ease;transition:all .15s ease;border-radius:3px}.button:hover{color:#fff;background-color:#4beec5;text-decoration:none}.button-white{background:0 0;color:#fff;border:2px solid #fff}.title{color:#222;font-size:2.4rem;line-height:1.2;font-family:roboto,Arial,sans-serif,-apple-system;letter-spacing:-.2px;font-weight:100;margin-bottom:30px}@media(min-width:768px){.title{font-size:3rem}}.content{-webkit-font-smoothing:antialiased}.content pre{font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4;margin:0;background:#f5f5f5;padding:10px;border-radius:1px;color:#383f45}.content pre code{font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4;border-radius:none;padding:0;margin:0}.content code{background:#f5f5f5;padding:3px 6px;border-radius:3px;color:#383f45;font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4}.content .highlight{margin-bottom:20px}.content ul,.content ol{margin-top:10px;margin-bottom:20px}.content ul li,.content ol li{margin-bottom:5px;margin-left:20px}.content a{text-decoration:underline}.content p{font-family:roboto,Arial,sans-serif,-apple-system;font-size:1rem;line-height:1.7;color:#383f45;font-weight:400}.content h1{font-family:lora,Arial,sans-serif,-apple-system;line-height:1.2;font-weight:300;margin-bottom:20px}@media(min-width:768px){.content h1{line-height:1.2;font-weight:300}}.content h2{font-size:2.2rem;line-height:1.6;font-weight:300;letter-spacing:-.01em;font-family:roboto,Arial,sans-serif,-apple-system;margin-bottom:20px}@media(min-width:768px){.content h2{line-height:1.4}}.content h3{font-size:1.34rem;line-height:1.6;font-weight:400;font-family:roboto,Arial,sans-serif,-apple-system;margin-bottom:20px}@media(min-width:768px){.content h3{line-height:1.4}}.strip{background-repeat:no-repeat}.strip-white{background-color:#fff}.strip-grey{background-color:#f4f5fb}.strip-diagonal{transform:skewY(5deg);padding-bottom:50px;margin-bottom:65px}.strip-diagonal>div{transform:skewY(-5deg)}.strip-primary-gradient{background-image:linear-gradient(to right,#1de9b6,#ffca28)}.strip-primary-gradient-top-bottom{background-image:linear-gradient(to bottom,#1de9b6,#ffca28)}.strip-primary{background-color:#1de9b6}.strip-secondary{background-color:#ffca28}.strip-diagonal-right{margin-top:-100px;transform:skewY(-5deg);padding-bottom:100px}.strip-diagonal-right>div{transform:skewY(5deg)}.strip-diagonal-left{margin-top:-100px;transform:skewY(5deg);padding-bottom:100px}.strip-diagonal-left>div{transform:skewY(-5deg)}.strip-bg-contain{background-size:contain}.strip-bg-cover{background-size:cover}.whitebox{border:1px solid #dcdcdc;border-radius:3px;box-shadow:0 1px 18px #0003;background:#fff;padding:10px}.highlight .hll{background-color:#ffc}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{color:#000;font-weight:700}.highlight .o{color:#000;font-weight:700}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:700;font-style:italic}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:700;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .ge{color:#000;font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:700}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{color:#000;font-weight:700}.highlight .kd{color:#000;font-weight:700}.highlight .kn{color:#000;font-weight:700}.highlight .kp{color:#000;font-weight:700}.highlight .kr{color:#000;font-weight:700}.highlight .kt{color:#458;font-weight:700}.highlight .m{color:#099}.highlight .s{color:#d01040}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:700}.highlight .no{color:teal}.highlight .nd{color:#3c5d5d;font-weight:700}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:700}.highlight .nf{color:#900;font-weight:700}.highlight .nl{color:#900;font-weight:700}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{color:#000;font-weight:700}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d01040}.highlight .sc{color:#d01040}.highlight .sd{color:#d01040}.highlight .s2{color:#d01040}.highlight .se{color:#d01040}.highlight .sh{color:#d01040}.highlight .si{color:#d01040}.highlight .sx{color:#d01040}.highlight .sr{color:#009926}.highlight .s1{color:#d01040}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.overview{background:#fafad2;border-radius:3px;padding:4px 10px;float:right}.page-home{text-align:center}.page-home .title{font-weight:lighter;font-family:roboto,Arial,sans-serif,-apple-system}.page-home p{width:60%;margin:0 auto;font-size:1.2rem;font-weight:lighter;margin-bottom:40px}.page-home .terminal{background:#eaeaea;border-radius:3px;width:80%;margin:0 auto;border:1px solid #dcdcdc;border-radius:3px;box-shadow:0 1px 18px #0003;background:#fff;padding:10px;margin-top:-200px}.page-home .terminal img{width:100%;height:auto}body{font-family:roboto,Arial,sans-serif,-apple-system;font-size:1rem;font-weight:400;line-height:1.4;color:#212529}
\ No newline at end of file
+* @link https://github.com/jonsuh/hamburgers*/.hamburger{padding:15px;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:#0000;border:0;margin:0;overflow:visible}.hamburger:hover{opacity:.7}.hamburger.is-active:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after{background-color:#fff}.hamburger-box{width:32px;height:19px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-1.5px}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:32px;height:3px;background-color:#1de9b6;border-radius:3px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-8px}.hamburger-inner::after{bottom:-8px}.hamburger--slider .hamburger-inner{top:1.5px}.hamburger--slider .hamburger-inner::before{top:8px;transition-property:transform,opacity;transition-timing-function:ease;transition-duration:.15s}.hamburger--slider .hamburger-inner::after{top:16px}.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,8px,0) rotate(45deg)}.hamburger--slider.is-active .hamburger-inner::before{transform:rotate(-45deg) translate3d(-4.57142857px,-5px,0);opacity:0}.hamburger--slider.is-active .hamburger-inner::after{transform:translate3d(0,-16px,0) rotate(-90deg)}ul,ol{margin:0;padding:0;list-style:none}.page{display:flex;min-height:100vh;flex-direction:column}.page .wrapper{flex:1}.header{color:#1de9b6;background-color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 0}.header .container{display:flex;justify-content:space-between;align-items:center}.header.header-absolute{position:absolute;z-index:10;width:100%}.lock-scroll .header.header-absolute{position:static}.footer{background:#ffca28;padding-top:20px;padding-bottom:20px}.footer .footer-inner{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media(min-width:576px){.footer .footer-inner{justify-content:space-between;flex-direction:row;align-items:center}}.footer .footer-title{color:#fff;font-size:1.3rem;font-family:lora,Arial,sans-serif,-apple-system;margin-bottom:10px;flex:0}@media(min-width:576px){.footer .footer-title{margin:0;flex:0 0 120px}}.footer ul{list-style:none;margin:0;padding:0;flex:1}.footer ul li{display:block;margin-right:10px;color:#fff;font-size:.9rem;line-height:1.8}.footer ul li:last-of-type{margin-right:0}.footer ul li a{color:#fff;text-decoration:none}.footer ul li a:hover{text-decoration:underline}.footer ul li.copyright{font-weight:700;color:#fff;display:none}@media(min-width:768px){.footer ul li.copyright{display:inline-block}}@media(min-width:576px){.footer ul{height:inherit;display:flex;list-style:none;margin:0;padding:0;align-items:center;justify-content:flex-end}.footer ul li{list-style:none}.footer ul li a{display:inline-block;height:40px;padding:10px 8px;font-weight:300}}.sub-footer{background:#f4b800;padding-top:20px;padding-bottom:20px}@media(min-width:768px){.sub-footer{padding-top:10px;padding-bottom:10px}}.sub-footer .sub-footer-inner{display:flex;flex-direction:column;justify-content:space-between}@media(min-width:768px){.sub-footer .sub-footer-inner{flex-direction:row}}.sub-footer .sub-footer-inner ul{list-style:none;margin:0;padding:0}.sub-footer .sub-footer-inner ul li{list-style:none;display:block;color:#fffcf4;font-size:.9rem;line-height:1.8}.sub-footer .sub-footer-inner ul li strong{font-weight:700;color:#fff}.sub-footer .sub-footer-inner ul li a{color:#fffcf4;text-decoration:none}.sub-footer .sub-footer-inner ul li a:hover{text-decoration:underline}.sub-footer .sub-footer-inner ul li span{display:inline-block;height:40px;padding:10px 0 10px 8px;font-weight:700;color:#fff}.sub-footer .sub-footer-inner ul li.zerostatic a{color:#fff}@media(min-width:576px){.sub-footer .sub-footer-inner ul li{display:inline-block;margin-left:10px}.sub-footer .sub-footer-inner ul li:first-of-type{margin-left:0}}.logo{display:none}@media(min-width:576px){.logo{display:block;width:70px}}.logo img{width:100%;height:auto}.logo a{display:block;width:100%;height:100%}.logo-mobile{display:block;width:40px;padding:10px 0}@media(min-width:576px){.logo-mobile{display:none}}.logo-mobile img{width:100%;height:auto}.logo-mobile a{display:block;width:100%;height:100%}.main-menu{display:none}@media(min-width:768px){.main-menu{display:block}}.main-menu>ul{display:flex;align-items:center;justify-content:flex-start;font-family:roboto,Arial,sans-serif,-apple-system}.main-menu>ul>li{list-style:none;font-size:14px}.main-menu>ul>li>a{padding:10px 14px;display:inline-block;font-weight:400;text-decoration:none;color:#1de9b6}.main-menu>ul>li>a:hover{text-decoration:underline;color:#1de9b6}.main-menu>ul>li.active>a{font-weight:700}.main-menu-mobile{position:fixed;background:#1de9b6;top:0;left:0;width:100%;height:100vh;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,height .35s;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column}.main-menu-mobile.open{opacity:.9;visibility:visible;height:100%;z-index:20}.main-menu-mobile.open li{animation:fadeInRight .5s ease forwards;animation-delay:.35s}.main-menu-mobile.open li:nth-of-type(2){animation-delay:.4s}.main-menu-mobile.open li:nth-of-type(3){animation-delay:.45s}.main-menu-mobile.open li:nth-of-type(4){animation-delay:.5s}.main-menu-mobile.open li:nth-of-type(5){animation-delay:.55s}.main-menu-mobile.open li:nth-of-type(6){animation-delay:.6s}.main-menu-mobile ul{font-size:2rem;font-family:lora,Arial,sans-serif,-apple-system;text-align:center;list-style:none;padding:0;margin:0;flex:0}.main-menu-mobile ul li{display:block;position:relative;opacity:0}.main-menu-mobile ul li a{display:block;position:relative;color:#fff;text-decoration:none;overflow:hidden}.main-menu-mobile ul li a:hover::after,.main-menu-mobile ul li a:focus::after,.main-menu-mobile ul li a:active::after{width:100%}.main-menu-mobile ul li a::after{content:'';position:absolute;bottom:0;left:50%;width:0%;transform:translateX(-50%);height:3px;background:#fff;transition:.35s}@keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}.lock-scroll{overflow:hidden}.docs-menu h4{font-size:1rem;font-weight:700}.docs-menu ul{list-style:none;padding:0;margin:0}.docs-menu ul li{font-size:.9rem;line-height:1.4;font-weight:400;margin:0;padding:4px 0}.docs-menu ul li.active a{color:#4beec5;font-weight:400}.docs-menu ul li a{color:#212529}.docs-menu ul li a:hover{color:#1de9b6}.hamburger{padding:10px 0 10px 10px;outline:none;z-index:30;cursor:pointer}@media(min-width:768px){.hamburger{display:none}}.hamburger:focus{outline:none}.hamburger .hamburger-inner,.hamburger .hamburger-inner::before,.hamburger .hamburger-inner::after{background:#1de9b6}.hamburger .hamburger-inner::after{width:18px;right:0}.hamburger.is-active .hamburger-inner::after{width:inherit;right:unset}.button{white-space:nowrap;display:inline-block;padding:8px 15px 6px;background:#1de9b6;font-weight:400;text-transform:uppercase;color:#fff;text-decoration:none;-webkit-transition:all .15s ease;transition:all .15s ease;border-radius:3px}.button:hover{color:#fff;background-color:#4beec5;text-decoration:none}.button-white{background:0 0;color:#fff;border:2px solid #fff}.title{font-size:2.4rem;line-height:1.2;font-family:roboto,Arial,sans-serif,-apple-system;letter-spacing:-.2px;font-weight:100;margin-bottom:30px}@media(min-width:768px){.title{font-size:3rem}}.title-summary{font-size:1.6rem;line-height:1.4;font-family:roboto,Arial,sans-serif,-apple-system;letter-spacing:-.2px;font-weight:200;margin-bottom:10px}@media(min-width:768px){.title-summary{font-size:1.6rem}}.content{-webkit-font-smoothing:antialiased}.content pre{font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4;margin:0;background:#f5f5f5;padding:10px;border-radius:1px;color:#383f45}.content pre code{font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4;border-radius:none;padding:0;margin:0}.content code{background:#f5f5f5;padding:3px 6px;border-radius:3px;color:#383f45;font-family:roboto mono,monospace;font-size:.9rem;line-height:1.4}.content .highlight{margin-bottom:20px}.content ul,.content ol{margin-top:10px;margin-bottom:20px}.content ul li,.content ol li{margin-bottom:5px;margin-left:20px}.content a{text-decoration:underline}.content p{font-family:roboto,Arial,sans-serif,-apple-system;font-size:1rem;line-height:1.7;color:#383f45;font-weight:400}.content h1{font-family:lora,Arial,sans-serif,-apple-system;line-height:1.2;font-weight:300;margin-bottom:20px}@media(min-width:768px){.content h1{line-height:1.2;font-weight:300}}.content h2{font-size:2.2rem;line-height:1.6;font-weight:300;letter-spacing:-.01em;font-family:roboto,Arial,sans-serif,-apple-system;margin-bottom:20px}@media(min-width:768px){.content h2{line-height:1.4}}.content h3{font-size:1.34rem;line-height:1.6;font-weight:400;font-family:roboto,Arial,sans-serif,-apple-system;margin-bottom:20px}@media(min-width:768px){.content h3{line-height:1.4}}.strip{background-repeat:no-repeat}.strip-white{background-color:#fff}.strip-grey{background-color:#f4f5fb}.strip-diagonal{transform:skewY(5deg);padding-bottom:50px;margin-bottom:65px}.strip-diagonal>div{transform:skewY(-5deg)}.strip-primary-gradient{background-image:linear-gradient(to right,#1de9b6,#ffca28)}.strip-primary-gradient-top-bottom{background-image:linear-gradient(to bottom,#1de9b6,#ffca28)}.strip-primary{background-color:#1de9b6}.strip-secondary{background-color:#ffca28}.strip-diagonal-right{margin-top:-100px;transform:skewY(-5deg);padding-bottom:100px}.strip-diagonal-right>div{transform:skewY(5deg)}.strip-diagonal-left{margin-top:-100px;transform:skewY(5deg);padding-bottom:100px}.strip-diagonal-left>div{transform:skewY(-5deg)}.strip-bg-contain{background-size:contain}.strip-bg-cover{background-size:cover}.whitebox{border:1px solid #dcdcdc;border-radius:3px;box-shadow:0 1px 18px #0003;background:#fff;padding:10px}.highlight .hll{background-color:#ffc}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{color:#000;font-weight:700}.highlight .o{color:#000;font-weight:700}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:700;font-style:italic}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:700;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .ge{color:#000;font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:700}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{color:#000;font-weight:700}.highlight .kd{color:#000;font-weight:700}.highlight .kn{color:#000;font-weight:700}.highlight .kp{color:#000;font-weight:700}.highlight .kr{color:#000;font-weight:700}.highlight .kt{color:#458;font-weight:700}.highlight .m{color:#099}.highlight .s{color:#d01040}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:700}.highlight .no{color:teal}.highlight .nd{color:#3c5d5d;font-weight:700}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:700}.highlight .nf{color:#900;font-weight:700}.highlight .nl{color:#900;font-weight:700}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{color:#000;font-weight:700}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d01040}.highlight .sc{color:#d01040}.highlight .sd{color:#d01040}.highlight .s2{color:#d01040}.highlight .se{color:#d01040}.highlight .sh{color:#d01040}.highlight .si{color:#d01040}.highlight .sx{color:#d01040}.highlight .sr{color:#009926}.highlight .s1{color:#d01040}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.overview{background:#fafad2;border-radius:3px;padding:4px 10px;float:right}.page-home{text-align:center}.page-home .title{font-weight:lighter;font-family:roboto,Arial,sans-serif,-apple-system}.page-home p{width:60%;margin:0 auto;font-size:1.2rem;font-weight:lighter;margin-bottom:40px}.page-home .terminal{background:#eaeaea;border-radius:3px;width:80%;margin:0 auto;border:1px solid #dcdcdc;border-radius:3px;box-shadow:0 1px 18px #0003;background:#fff;padding:10px;margin-top:-200px}.page-home .terminal img{width:100%;height:auto}body{font-family:roboto,Arial,sans-serif,-apple-system;font-size:1rem;font-weight:400;line-height:1.4;color:#212529}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.json b/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.json
index 883ceb0..adf002b 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.json
@@ -1 +1 @@
-{"Target":"css/style.min.1a876c28459b75260863a973813f86e2f3223c539d31beb6aeeb9dbc0e880fc2.css","MediaType":"text/css","Data":{"Integrity":"sha256-GodsKEWbdSYIY6lzgT+G4vMiPFOdMb62ruudvA6ID8I="}}
\ No newline at end of file
+{"Target":"css/style.min.25a985a9387ec5365c5ec13e861f9e531ea81b643268a6b576436a353e25bbd6.css","MediaType":"text/css","Data":{"Integrity":"sha256-JamFqTh+xTZcXsE+hh+eUx6oG2QyaKa1dkNqNT4lu9Y="}}
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 5eb70fd..ecc12be 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -10,7 +10,7 @@
 </div>
 
 {{ range.Pages }}
-<div class="content">{{.Content}}</div>
+{{ .Render "summary" }}
 {{ end }}
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 0bb323f..d9f614d 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -1,7 +1,7 @@
-<div class="summary">
+<div class="summary mb-2">
   {{ if .Params.image }}
   <img alt="{{ .Title }}" src="{{ .Params.image }}" />
   {{ end}}
-  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-  {{ .Content | truncate 100 }}
+  <h2 class="title-summary"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+  <p>{{ .Content | plainify | truncate 140 }}</p>
 </div>
\ No newline at end of file
diff --git a/layouts/docs/index.html b/layouts/docs/index.html
new file mode 100644
index 0000000..61f7d7d
--- /dev/null
+++ b/layouts/docs/index.html
@@ -0,0 +1,23 @@
+{{ define "title" }}Hugo Hero Theme Demo{{ end}}
+{{ define "header_css" }}{{ end }}
+{{ define "body_classes" }}page-home{{ end }}
+{{ define "header_classes" }}header-transparent{{ end }}
+
+{{ define "meta_tags" }}
+<meta name="description" content="{{ .Site.Params.homepage_meta_tags.meta_description }}" />
+<meta property="og:title" content="{{ .Site.Params.homepage_meta_tags.meta_og_title }}" />
+<meta property="og:type" content="{{ .Site.Params.homepage_meta_tags.meta_og_type }}" />
+<meta property="og:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_url }}" />
+<meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image }}" />
+<meta property="og:description" content="{{ .Site.Params.homepage_meta_tags.meta_og_description }}" />
+<meta name="twitter:card" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_card }}" />
+<meta name="twitter:site" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_site }}" />
+<meta name="twitter:creator" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_creator }}" />
+{{ end }}
+
+{{ define "main" }}
+asdasd
+{{ end }}
+
+{{ define "footer_js" }}
+{{ end }}
\ No newline at end of file