mirror of
https://github.com/TeamPiped/hugo-whisper-theme.git
synced 2024-08-14 23:57:00 +00:00
docs css
This commit is contained in:
Robert Austin
parent
dcdde20b7c
commit
ae72d8b0f5
15 changed files with 118 additions and 75 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.highlight {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.highlight .hll {
|
||||
background-color: #ffffcc;
|
||||
|
|
|
|||
2
assets/scss/components/_summary.scss
Normal file
2
assets/scss/components/_summary.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.summary {
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[params]
|
||||
google_analytics_id=""
|
||||
insert code here
|
||||
```
|
||||
````
|
||||
|
||||
[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
|
||||
```
|
||||
````
|
||||
|
||||
### Pygments Options
|
||||
|
||||
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`
|
||||
|
||||
```
|
||||
// layouts/services/list.html
|
||||
...
|
||||
|
||||
{{ define "meta_tags" }}
|
||||
<meta name="description" content="We offer a variety of services in the finance industry" />
|
||||
```toml
|
||||
[[menu.main]]
|
||||
name = "Home"
|
||||
url = "/"
|
||||
weight = 1
|
||||
|
||||
[[menu.main]]
|
||||
name = "Docs"
|
||||
url = "/docs/"
|
||||
weight = 2
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
|
|
@ -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).
|
||||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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="}}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
|
||||
{{ range.Pages }}
|
||||
<div class="content">{{.Content}}</div>
|
||||
{{ .Render "summary" }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -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>
|
||||
23
layouts/docs/index.html
Normal file
23
layouts/docs/index.html
Normal file
|
|
@ -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 }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue