update terminal gif

README.md

@@ -1,6 +1,6 @@
 # Hugo 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.
+Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal.
 
 [Live Demo](https://hugo-whisper.netlify.com/) |
 [Zerostatic Themes](https://www.zerostatic.io/theme/hugo-whisper/)
@@ -9,6 +9,40 @@ Whisper is a minimal documentation theme for Hugo. The design and functionality
 
 ## Theme features
 
+### Content Types
+
+- Docs (Markdown)
+- Homepage
+
+### Content Management
+
+- This theme generates documentation from markdown files located in `content/docs`
+- The "Home" page is not documentation, it can be used to introduce your project etc.
+
+### Features
+
+- Beautiful and clean typography for all semantic HTML elements
+
+### SCSS
+
+- SCSS (Hugo Pipelines)
+- Responsive design
+- Bootstrap 4 grid and media queries only
+
+### Speed
+
+- 100/100 Google Lighthouse speed score
+- 21KB without images ⚡
+- Vanilla JS only
+
+### Menu
+
+- Responsive mobile menu managed in `config.toml`
+
+### Content
+
+- Documentation examples included, using all markdown syntax
+
 # Installation
 
 To use this theme you will need to have Hugo installed. If you don't already have Hugo installed please follow the official [installation guide](https://gohugo.io/getting-started/installing/)
@@ -37,34 +71,41 @@ Copy or git clone this theme into the sites themes folder `mynewsite/themes`
 
 ```
 cd mynewsite
-cd themes
+git clone https://github.com/jugglerx/hugo-whisper-theme.git themes/hugo-whisper-theme
-git clone https://github.com/jugglerx/hugo-hero-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
 
-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).
+Copy the entire contents of the `mynewsite/themes/hugo-whisper-theme/exampleSite/` folder to root folder of your Hugo site, ie `mynewsite/`
+
+To copy the files using terminal, make sure you are still in the projects root, ie the `mynewsite` folder.
+
+```
+cp -a themes/hugo-whisper-theme/exampleSite/. .
+```
 
 ### Update config.toml
 
-After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in the `config.toml`
+After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in `mynewsite/config.toml`
 
 ```
 baseURL = "/"
 themesDir = "themes"
-theme = "hugo-hero-theme"
+theme = "hugo-whisper-theme"
 ```
 
 ### Run Hugo
 
 After installing the theme for the first time, generate the Hugo site.
 
+You run this command from the root folder of your Hugo site ie `mynewsite/`
+
 ```
 hugo
 ```
@@ -76,48 +117,3 @@ hugo server
 ```
 
 Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
-
-# Configuring theme features
-
-### Homepage meta tags
-
-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`
-
-```
-// 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"
-```
-
-### Set meta tags on a per template/page basis
-
-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.
-
-```
-// layouts/services/list.html
-...
-
-{{ define "meta_tags" }}
-    <meta name="description" content="We offer a variety of services in the finance industry" />
-{{ end }}
-
-{{ define main }}
-...
-```
-
-# Deploying to Netlify
-
-This theme includes a `netlify.toml` which is configured to deploy to Netlify from the `exampleSite` folder. See this discussion on how to deploy your site on Netlify from the `exampleSite` folder - https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508
-
-Most likely if you are deploying to Netlify, you are including the entire Hugo site, so you can delete the `netlify.toml` file.

assets/scss/components/_content.scss

@@ -58,7 +58,7 @@
   p {
     font-family: $font-family-base;
     font-size: 1rem;
-    line-height: 1.7;
+    line-height: 1.4;
     color: lighten($black, 10%);
     font-weight: 400;
   }

assets/scss/pages/_home.scss

@@ -17,7 +17,6 @@
     }
   }
   .terminal {
-    @include whitebox();
     border-radius: 3px;
     margin: 0 auto;
     margin-top: -200px;

exampleSite/content/_index.md

@@ -1,12 +1,6 @@
 ---
 title: 'Hugo Whisper'
 date: 2018-11-28T15:14:39+10:00
-icon: 'services/service-icon-2.png'
-featured: true
-draft: false
-heroHeading: 'Business Advisory'
-heroSubHeading: 'Expert advice and guidance when you need it most.'
-heroBackground: 'services/service2.jpg'
 ---
 
-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.
+Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal.

exampleSite/content/docs/example/index.md

@@ -0,0 +1,33 @@
+---
+title: 'Hugo Whisper'
+date: 2019-02-11T19:27:37+10:00
+weight: 7
+---
+
+Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal.
+
+## Quickstart
+
+Copy or git clone this theme into the sites themes folder `mynewsite/themes`
+
+```
+hugo new site whisper
+git clone https://github.com/jugglerx/hugo-whisper-theme.git
+```
+
+### Code Highlighting
+
+Whisper uses Hugo's in-built code highlighting with a github style code highlighting theme. https://gohugo.io/content-management/syntax-highlighting/
+
+You can insert code snippets in any markdown file by using standard code fences syntax ie:
+
+```js
+function myFunction() {
+  var x = document.getElementById('myDIV');
+  if (x.style.display === 'none') {
+    x.style.display = 'block';
+  } else {
+    x.style.display = 'none';
+  }
+}
+```

exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content

@@ -5714,7 +5714,7 @@ ol {
   .content p {
     font-family: "Roboto", Arial, sans-serif, -apple-system;
     font-size: 1rem;
-    line-height: 1.7;
+    line-height: 1.4;
     color: #383f45;
     font-weight: 400; }
   .content h1 {
@@ -6122,11 +6122,6 @@ ol {
       .page-home p {
         width: 60%; } }
   .page-home .terminal {
-    border: 1px solid #dcdcdc;
-    border-radius: 3px;
-    box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
-    background: #ffffff;
-    padding: 10px;
     border-radius: 3px;
     margin: 0 auto;
     margin-top: -200px; }

layouts/index.html

@@ -17,7 +17,7 @@
 
 {{ define "main" }}
 <div class="strip">
-  <div class="container pt-6 pb-16">
+  <div class="container pt-4 pb-16">
     <div class="row">
       <div class="col-12">
         <h1 class="title">{{.Title}}</h1>
@@ -30,12 +30,12 @@
   </div>
 </div>
 
-<div class="strip strip-grey d-none d-md-block">
+<div class="strip">
-  <div class="container pt-8 pb-6">
+  <div class="container pt-4 pb-4">
-      <div class="row">
+      <div class="row justify-content-center">
-        <div class="col-12">
+        <div class="col-12 col-md-10">
           <div class="terminal">
-            <img src="{{ .Site.BaseURL }}images/terminal-white.gif" />
+            <img src="{{ .Site.BaseURL }}images/terminal.gif" />
           </div>
         </div>
       </div>

theme.toml

@@ -1,7 +1,7 @@
 name = "Whisper"
 license = "MIT"
 licenselink = "https://github.com/JugglerX/hugo-whisper-theme/blob/master/LICENSE"
-description = "Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal, similar to a Github readme."
+description = "Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal."
 homepage = "https://github.com/jugglerx/hugo-whisper-theme"
 tags = ["documentation","responsive","minimal","clean","bootstrap","zerostatic"]
 features = ["docs"]