docs css

assets/scss/components/_content.scss

@@ -29,8 +29,12 @@ $paragraph-color: $black;
     font-size: 0.9rem;
     line-height: 1.4;
   }
-  .highlight {
+  strong {
-    margin-bottom: 20px;
+    font-weight: bold;
+  }
+  em {
+    font-style: italic;
+    font-weight: normal;
   }
   ul,
   ol {

assets/scss/components/_highlight.scss

@@ -1,4 +1,5 @@
 .highlight {
+  margin-bottom: 20px;
 }
 .highlight .hll {
   background-color: #ffffcc;

assets/scss/components/_summary.scss

@@ -0,0 +1,2 @@
+.summary {
+}

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;
+  }
+}

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');
-};
-```

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:
+
+````
 ```
-// config.toml
+insert code here
-[params]
+```
-  google_analytics_id=""
+````
 
-  [params.homepage_meta_tags]
+You can specify the langauge by adding a declaration after the backticks
-    meta_description = "a description of your website."
+
-    meta_og_title = "My Theme"
+````
-    meta_og_type = "website"
+```javascript
-    meta_og_url = "https://www.mywebsite.com"
+insert code here
-    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"
+### Pygments Options
-    meta_twitter_creator = "@mytwitterhandle"
+
+The following code highlighting options are configured in the `config.toml`
+
+```toml
+pygmentsCodeFences = true
+pygmentsCodefencesGuessSyntax = true
+pygmentsUseClasses = true
 ```
 
-### Set meta tags on a per template/page basis
+## Main menu
 
-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.
+Configure the main menu by editing the `config.toml`
 
-```
+```toml
-// layouts/services/list.html
+[[menu.main]]
-...
+name = "Home"
-
+url = "/"
-{{ define "meta_tags" }}
+weight = 1
-    <meta name="description" content="We offer a variety of services in the finance industry" />
+
+[[menu.main]]
+name = "Docs"
+url = "/docs/"
+weight = 2
 ```

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.
 

exampleSite/content/docs/netlify/index.md

@@ -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).

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 {
+  .content strong {
-    margin-bottom: 20px; }
+    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; }
 

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="}}
+{"Target":"css/style.min.25a985a9387ec5365c5ec13e861f9e531ea81b643268a6b576436a353e25bbd6.css","MediaType":"text/css","Data":{"Integrity":"sha256-JamFqTh+xTZcXsE+hh+eUx6oG2QyaKa1dkNqNT4lu9Y="}}

layouts/_default/list.html

@@ -10,7 +10,7 @@
 </div>
 
 {{ range.Pages }}
-<div class="content">{{.Content}}</div>
+{{ .Render "summary" }}
 {{ end }}
 
 {{ end }}

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>
+  <h2 class="title-summary"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-  {{ .Content | truncate 100 }}
+  <p>{{ .Content | plainify | truncate 140 }}</p>
 </div>

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 }}