update terminal gif

This commit is contained in:
Robert Austin 2019-02-17 23:20:34 +10:00
parent 42e5371fb9
commit ad3a48ccc9
10 changed files with 92 additions and 75 deletions

102
README.md
View file

@ -1,6 +1,6 @@
# Hugo Whisper Theme
Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal. Were 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.

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
static/images/terminal.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 574 KiB

View file

@ -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"]