blob: 0d8979378becc93b4430404436b692169086457c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
# Simplicity
Very simple, clean and readable (I think so) Hugo theme.
- Responsive design
- Clean typography
- Google Analytics
- Lightbox
- Disqus
- OpenGraph support
- Schema Structured Data
- Twitter card
- Creative commons licence icon in footer (optional)
- No JS frameworks, no CSS frameworks, no jQuery
# Demo
You can preview this theme on my personal blog - [eshlox.net](https://eshlox.net).
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Getting Started](#getting-started)
- [exampleSite](#examplesite)
- [config.toml](#configtoml)
- [favicons](#favicons)
- [Shortcodes](#shortcodes)
- [figure](#figure)
- [Development](#development)
- [Browsers support](#browsers-support)
- [License](#license)
## Getting Started
Run the following commands in your Hugo site directory to download the theme:
```
mkdir themes
cd themes
git clone https://github.com/eshlox/simplicity.git
```
### exampleSite
Look inside `exampleSite` directory to find out how to configure your site.
That's how the structure looks like:
```
exampleSite/
├── config.toml
├── content
│ ├── categories
│ │ └── _index.md
│ ├── _index.md
│ ├── posts
│ │ ├── 2016
│ │ │ └── lorem-ipsum.md
│ │ ├── 2017
│ │ │ ├── images.md
│ │ │ └── typography.md
│ │ └── _index.md
│ └── tags
│ └── _index.md
├── public
└── static
└── images
└── image-1.jpg
```
Every `_index.md` file contains title, language and slug.
### config.toml
Copy `config.toml` from `exampleSite` to the root directory of your Hugo site and modify it according to your needs.
### favicons
This theme contains default favicon with `S` letter. If you want to change it, create a directory `static/assets/img` inside the root of your Hugo site and put your favicon files there. They shoud have names: `favicon.ico` and `apple-touch-icon.png`.
## Shortcodes
This theme includes additional shortcodes.
### figure
Use [figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) to embed an image.
```
{{< figure src="/images/image-1.jpg" title="Photo" >}}
```
You can also use lightbox plugin to display image in full-screen mode ([baguetteBox.js](https://github.com/feimosi/baguetteBox.js)).
```
{{< figure src="/images/image-1.jpg" title="Photo" lightbox="true" >}}
```
## Development
This theme uses `webpack`. You can install all required libraries using [yarn](https://github.com/yarnpkg/yarn), just run `yarn install`.
When you change SCSS or Javascript files, you can compile changes using `npm run build` command.
To review your changes, you can use `npm run start` command which will run `hugo serve` with content from `exampleSite`.
## Browsers support
Theme uses [HTML5 grid](https://caniuse.com/#feat=css-grid).
Dekstop:
- Firefox (latest)
- Chrome (latest)
Mobile:
- Firefox (latest)
- Chrome (latest)
It probably works in other browsers but it hasn't been tested yet.
## Licence
This theme is released under the MIT license. Please read the [license](https://github.com/eshlox/simplicity/blob/master/LICENSE) for more information.
|
