diff options
author | Robert Austin <rob@jugglerdigital.com> | 2019-02-17 16:20:34 +0300 |
---|---|---|
committer | Robert Austin <rob@jugglerdigital.com> | 2019-02-17 16:20:34 +0300 |
commit | ad3a48ccc910411dd244f14e1b38c4c03bd22752 (patch) | |
tree | 1ba5917c1e0a24484045a356a8acdd5fb5152a4a | |
parent | 42e5371fb9cb5ecc30a35d8d22a660f7c84565be (diff) |
update terminal gif
-rw-r--r-- | README.md | 102 | ||||
-rw-r--r-- | assets/scss/components/_content.scss | 2 | ||||
-rw-r--r-- | assets/scss/pages/_home.scss | 1 | ||||
-rw-r--r-- | exampleSite/content/_index.md | 8 | ||||
-rw-r--r-- | exampleSite/content/docs/example/index.md | 33 | ||||
-rw-r--r-- | exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content | 7 | ||||
-rw-r--r-- | layouts/index.html | 12 | ||||
-rw-r--r-- | static/images/terminal-white.gif | bin | 101482 -> 0 bytes | |||
-rw-r--r-- | static/images/terminal.gif | bin | 0 -> 587279 bytes | |||
-rw-r--r-- | theme.toml | 2 |
10 files changed, 92 insertions, 75 deletions
@@ -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-hero-theme.git +git clone https://github.com/jugglerx/hugo-whisper-theme.git themes/hugo-whisper-theme ``` #### 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. diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss index 0c7b3c0..23215f9 100644 --- a/assets/scss/components/_content.scss +++ b/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; } diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss index a828a68..a0a9797 100644 --- a/assets/scss/pages/_home.scss +++ b/assets/scss/pages/_home.scss @@ -17,7 +17,6 @@ } } .terminal { - @include whitebox(); border-radius: 3px; margin: 0 auto; margin-top: -200px; diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 37fe3ef..fc95b11 100644 --- a/exampleSite/content/_index.md +++ b/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. diff --git a/exampleSite/content/docs/example/index.md b/exampleSite/content/docs/example/index.md new file mode 100644 index 0000000..7cb254c --- /dev/null +++ b/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'; + } +} +``` 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 ada63e6..d19fc57 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content +++ b/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; } diff --git a/layouts/index.html b/layouts/index.html index f81e17b..ef673b2 100644 --- a/layouts/index.html +++ b/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="container pt-8 pb-6"> - <div class="row"> - <div class="col-12"> +<div class="strip"> + <div class="container pt-4 pb-4"> + <div class="row justify-content-center"> + <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> diff --git a/static/images/terminal-white.gif b/static/images/terminal-white.gif Binary files differdeleted file mode 100644 index b316204..0000000 --- a/static/images/terminal-white.gif +++ /dev/null diff --git a/static/images/terminal.gif b/static/images/terminal.gif Binary files differnew file mode 100644 index 0000000..c9ba0b2 --- /dev/null +++ b/static/images/terminal.gif @@ -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"] |