bulma-clean-theme 0.10.3 → 0.11.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +142 -84
- data/_includes/head.html +1 -2
- data/_includes/header.html +4 -5
- data/_includes/showcase.html +1 -1
- data/_includes/tag.html +3 -0
- data/_includes/vimeo.html +3 -0
- data/_includes/youtube.html +1 -1
- data/_layouts/default.html +15 -9
- data/_layouts/post.html +1 -1
- data/_layouts/recipe.html +98 -0
- data/assets/js/app.js +1 -25
- data/node_modules/bulma-block-list/docs/Gemfile +1 -1
- data/node_modules/bulma-block-list/docs/_sass/_block-list.scss +17 -6
- data/node_modules/bulma-block-list/package.json +10 -10
- data/node_modules/bulma-block-list/src/block-list.scss +17 -6
- data/package-lock.json +3 -3
- data/package.json +1 -1
- metadata +5 -3
- data/_posts/2020-10-17-post-with-summary.md +0 -23
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 95ed253cc54e36ac65daa7cecc70ac7594331e878a9050190c75b8594c80f6bb
|
|
4
|
+
data.tar.gz: 157a9ef4e8655ba791c4c4504b1dfa632f7b872e3cd8c2490ba8b04570e77232
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2a3180965f0b57727d3c565e956547e476f34d90c43707d39590b692bd0d1def7957b62448e62d0357f1bd0a6f4eae4ca4617144787b29c90f8e568e9a9b1844
|
|
7
|
+
data.tar.gz: 7f0026712e27cc083966a1dd8732a5f4b1638dea204bb976ce68dc438010e96a50f50a82eb9031aa91ccdcbdeaa335b5eaf92af6ea48cb525f6e34b5b38a1343
|
data/README.md
CHANGED
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
[](https://badge.fury.io/rb/bulma-clean-theme)
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern
|
|
6
|
+
This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern-looking site to start with.
|
|
7
|
+
|
|
8
|
+
The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for its interactive components, such as mobile navbar and notifications.
|
|
7
9
|
|
|
8
10
|
## Contents
|
|
9
11
|
|
|
10
12
|
* [Installation](#installation)
|
|
11
13
|
* [Usage](#usage)
|
|
14
|
+
* [Lang](#lang)
|
|
12
15
|
* [Pages](#pages)
|
|
13
16
|
* [Page Hero](#page-hero)
|
|
14
17
|
* [Table Of Contents](#table-of-contents)
|
|
@@ -19,6 +22,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
|
|
|
19
22
|
* [Menubar](#menubar)
|
|
20
23
|
* [Tabs](#tabs)
|
|
21
24
|
* [Notifications](#notifications)
|
|
25
|
+
* [Tags](#tags)
|
|
22
26
|
* [Google Analytics](#google-analytics)
|
|
23
27
|
* [Footer](#footer)
|
|
24
28
|
* [Products](#products)
|
|
@@ -29,6 +33,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
|
|
|
29
33
|
* [Sponsors](#sponsors)
|
|
30
34
|
* [Gallery](#gallery)
|
|
31
35
|
* [Disqus](#disqus)
|
|
36
|
+
* [Recipe](#recipe)
|
|
32
37
|
* [Contributing](#contributing)
|
|
33
38
|
* [Development](#development)
|
|
34
39
|
* [Licence](#licence)
|
|
@@ -36,7 +41,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
|
|
|
36
41
|
|
|
37
42
|
## Installation
|
|
38
43
|
|
|
39
|
-
**This theme requires Jekyll 3.
|
|
44
|
+
**This theme requires Jekyll 3.9 to be compatible with GitHub Pages.**
|
|
40
45
|
|
|
41
46
|
Add this line to your Jekyll site's `Gemfile`:
|
|
42
47
|
|
|
@@ -60,49 +65,50 @@ Or install it yourself as:
|
|
|
60
65
|
|
|
61
66
|
## Usage
|
|
62
67
|
|
|
63
|
-
###
|
|
68
|
+
### Lang
|
|
69
|
+
|
|
70
|
+
The html lang attribute is set to `en` by default but you can override this in the _config.yml file `lang: en`
|
|
71
|
+
|
|
72
|
+
### Pages
|
|
64
73
|
|
|
65
|
-
Create your pages as individual
|
|
74
|
+
Create your pages as individual Markdown files and use `layout: page` for normal pages. Set the page's title and subtitle in the front matter and it will appear in the hero.
|
|
66
75
|
|
|
67
76
|
#### Page Hero
|
|
68
77
|
|
|
69
|
-
**New in 0.2**
|
|
70
|
-
Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
|
|
78
|
+
**New in 0.2** - Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
|
|
71
79
|
|
|
72
|
-
You can also set the height of the hero by providing a
|
|
80
|
+
You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to `is-medium`.
|
|
73
81
|
|
|
74
|
-
**New in 0.5.4**
|
|
75
|
-
If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter.
|
|
82
|
+
**New in 0.5.4** - If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter.
|
|
76
83
|
|
|
77
|
-
**New in 0.5.7**
|
|
78
|
-
If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter.
|
|
84
|
+
**New in 0.5.7** - If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter.
|
|
79
85
|
|
|
80
|
-
**New in 0.7.1**
|
|
81
|
-
If you would like to darken the hero so the title stands out more, you can set `hero_darken: true` in the page's front matter. You can overwrite the default background colour by setting the `$hero-darken` sass variable.
|
|
86
|
+
**New in 0.7.1** - If you would like to darken the hero so the title stands out more, you can set `hero_darken: true` in the page's front matter. You can overwrite the default background colour by setting the `$hero-darken` sass variable.
|
|
82
87
|
|
|
83
88
|
#### Table Of Contents
|
|
84
89
|
|
|
85
|
-
**New in 0.5.8**
|
|
86
|
-
|
|
90
|
+
**New in 0.5.8** - If you want to display a table of contents (toc) then add `toc: true` to your page's front matter. You can customise the default table of contents title by setting `toc_title: My Custom Title` in the page's front matter.
|
|
91
|
+
|
|
92
|
+
**New in 0.10.3** - If you would prefer to display the contents in the menubar at the side of the page, then use `menubar_toc: true` instead of `toc: true`. This will also override the page's `menubar` setting.
|
|
87
93
|
|
|
88
94
|
### Posts
|
|
89
95
|
|
|
90
|
-
If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with
|
|
96
|
+
If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with `layout: post`. Next, create a `blog` directory with an index.html file that has `layout: blog`.
|
|
91
97
|
|
|
92
|
-
Set
|
|
98
|
+
Set `paginate` and `paginate_path` in your site's `_config.yaml` to configure the posts per page and blog pagination path.
|
|
93
99
|
|
|
94
100
|
```yaml
|
|
95
101
|
paginate: 5
|
|
96
102
|
paginate_path: "/blog/page:num"
|
|
97
103
|
```
|
|
98
104
|
|
|
99
|
-
**New in 0.2** It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your
|
|
105
|
+
**New in 0.2** - It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
|
|
100
106
|
|
|
101
|
-
You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium
|
|
107
|
+
You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to `is-medium`.
|
|
102
108
|
|
|
103
109
|
#### Post Excerpt and Summary
|
|
104
110
|
|
|
105
|
-
By default the blog page and the latest posts will use the automatically generated post excerpt. If you would like to override this you can set the summary in the post's front matter.
|
|
111
|
+
By default, the blog page and the latest posts will use the automatically generated post excerpt. If you would like to override this you can set the summary in the post's front matter.
|
|
106
112
|
|
|
107
113
|
```yaml
|
|
108
114
|
layout: post
|
|
@@ -110,7 +116,7 @@ title: The post title
|
|
|
110
116
|
summary: |-
|
|
111
117
|
This is the custom summary for the post.
|
|
112
118
|
|
|
113
|
-
It can be in **
|
|
119
|
+
It can be in **Markdown format** if required.
|
|
114
120
|
```
|
|
115
121
|
|
|
116
122
|
#### Social Share Buttons
|
|
@@ -120,7 +126,7 @@ Share buttons will be displayed on your posts unless you hide them by adding `hi
|
|
|
120
126
|
|
|
121
127
|
### Navigation
|
|
122
128
|
|
|
123
|
-
For the top navigation, create a navigation.yml file in `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu.
|
|
129
|
+
For the top navigation, create a navigation.yml file in the `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu.
|
|
124
130
|
|
|
125
131
|
```yaml
|
|
126
132
|
- name: Page 1
|
|
@@ -132,11 +138,16 @@ For the top navigation, create a navigation.yml file in `_data` directory with t
|
|
|
132
138
|
link: /page-2/
|
|
133
139
|
```
|
|
134
140
|
|
|
135
|
-
For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml
|
|
141
|
+
For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with a `permalink: pretty` setting in your `_config.yml`.
|
|
142
|
+
|
|
143
|
+
#### Fixed Navbar
|
|
144
|
+
|
|
145
|
+
To have a fixed navbar on the top or bottom of your site, you can set `fixed_navbar: top` or `fixed_navbar: bottom` respectively in your
|
|
146
|
+
`_config.yml`.
|
|
136
147
|
|
|
137
148
|
### Colours and Styles
|
|
138
149
|
|
|
139
|
-
To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main
|
|
150
|
+
To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main`.
|
|
140
151
|
|
|
141
152
|
```
|
|
142
153
|
---
|
|
@@ -146,34 +157,30 @@ $primary: #333333;
|
|
|
146
157
|
@import "main";
|
|
147
158
|
```
|
|
148
159
|
|
|
149
|
-
You can overwrite any of the [Bulma initial variables](http://versions.bulma.io/0.7.0/documentation/overview/variables/) in this way as long as they are declared before the `@import "main"
|
|
160
|
+
You can overwrite any of the [Bulma initial variables](http://versions.bulma.io/0.7.0/documentation/overview/variables/) in this way as long as they are declared before the `@import "main";`.
|
|
150
161
|
|
|
151
162
|
#### Theme Color Meta Tag
|
|
152
163
|
|
|
153
|
-
If you want to update the theme color meta tag then set
|
|
164
|
+
If you want to update the theme color meta tag then set `theme_color: '#333333'` in your `_config.yml` file.
|
|
154
165
|
|
|
155
166
|
### Sidebar Visibility
|
|
156
167
|
|
|
157
|
-
**New in 0.2**
|
|
158
|
-
|
|
159
|
-
If you want to show the sidebar with latest posts then set `show_sidebar: true` in the pages frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
|
|
168
|
+
**New in 0.2** - If you want to show the sidebar with latest posts then set `show_sidebar: true` in the page's frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
|
|
160
169
|
|
|
161
170
|
### Menubar
|
|
162
171
|
|
|
163
|
-
**New in 0.3**
|
|
164
|
-
|
|
165
|
-
The menubar gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter.
|
|
172
|
+
**New in 0.3** - The menubar gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter.
|
|
166
173
|
|
|
167
174
|
```yaml
|
|
168
175
|
show_sidebar: false
|
|
169
176
|
menubar: example_menu
|
|
170
177
|
```
|
|
171
178
|
|
|
172
|
-
You will probably want to disable
|
|
179
|
+
You will probably want to disable `show_sidebar`. Otherwise there will be little room for the page content.
|
|
173
180
|
|
|
174
181
|
#### Creating a menubar data file
|
|
175
182
|
|
|
176
|
-
Create a data file in the _data directory and use the following format (if using yml)
|
|
183
|
+
Create a data file in the `_data` directory and use the following format (if using yml).
|
|
177
184
|
|
|
178
185
|
```yaml
|
|
179
186
|
- label: Example Menu
|
|
@@ -193,11 +200,11 @@ Create a data file in the _data directory and use the following format (if using
|
|
|
193
200
|
link: /blog/
|
|
194
201
|
```
|
|
195
202
|
|
|
196
|
-
For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml
|
|
203
|
+
For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml`.
|
|
197
204
|
|
|
198
205
|
#### Multiple menus
|
|
199
206
|
|
|
200
|
-
You may make multiple menus in the same file, separated by
|
|
207
|
+
You may make multiple menus in the same file, separated by labels.
|
|
201
208
|
|
|
202
209
|
```yaml
|
|
203
210
|
- label: Menu Label
|
|
@@ -221,9 +228,7 @@ You may make multiple menus in the same file, separated by the label
|
|
|
221
228
|
|
|
222
229
|
### Tabs
|
|
223
230
|
|
|
224
|
-
**New in 0.4**
|
|
225
|
-
|
|
226
|
-
The tabs gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the front matter.
|
|
231
|
+
**New in 0.4** - `tabs` gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the front matter.
|
|
227
232
|
|
|
228
233
|
```yaml
|
|
229
234
|
title: Page with tabs
|
|
@@ -238,7 +243,7 @@ Tabs can be used in conjunction with menubar and/or sidebar if you wish.
|
|
|
238
243
|
|
|
239
244
|
#### Creating a tabs data file
|
|
240
245
|
|
|
241
|
-
Create a data file in the _data directory and use the following format (if using yml)
|
|
246
|
+
Create a data file in the `_data` directory and use the following format (if using yml).
|
|
242
247
|
|
|
243
248
|
```yaml
|
|
244
249
|
alignment: is-left
|
|
@@ -261,7 +266,7 @@ items:
|
|
|
261
266
|
|
|
262
267
|
#### Settings
|
|
263
268
|
|
|
264
|
-
You can control the alignment, style and size of
|
|
269
|
+
You can control the alignment, style, and size of tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/).
|
|
265
270
|
|
|
266
271
|
#### Active Tab Highlighting
|
|
267
272
|
|
|
@@ -269,9 +274,7 @@ It will automatically mark the active tab based on the current page.
|
|
|
269
274
|
|
|
270
275
|
#### Icons
|
|
271
276
|
|
|
272
|
-
You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery).
|
|
273
|
-
|
|
274
|
-
If you don't wish to show icons then simply omit the option from your yaml file.
|
|
277
|
+
You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery). If you don't wish to show icons then simply omit the option from your yaml file.
|
|
275
278
|
|
|
276
279
|
### Notifications
|
|
277
280
|
|
|
@@ -301,17 +304,27 @@ message="This notification does not have an icon."
|
|
|
301
304
|
icon="false" %}
|
|
302
305
|
```
|
|
303
306
|
|
|
304
|
-
###
|
|
307
|
+
### Tags
|
|
305
308
|
|
|
306
|
-
|
|
309
|
+
To include a tag use the following include.
|
|
307
310
|
|
|
308
|
-
|
|
311
|
+
```liquid
|
|
312
|
+
{% include tag.html tag="The tag text" %}
|
|
313
|
+
```
|
|
309
314
|
|
|
310
|
-
|
|
315
|
+
You can overwrite the default style (is-primary) by passing in the style in the include tag.
|
|
316
|
+
|
|
317
|
+
```liquid
|
|
318
|
+
{% include tag.html tag="The tag text" style="is-light" %}
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Google Analytics
|
|
322
|
+
|
|
323
|
+
**New in 0.2** - To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property.
|
|
311
324
|
|
|
312
|
-
|
|
325
|
+
### Footer
|
|
313
326
|
|
|
314
|
-
To add some footer links, create a yaml file in the `_data` directory using the following format
|
|
327
|
+
**New in 0.4.1** - To add some footer links, create a yaml file in the `_data` directory using the following format.
|
|
315
328
|
|
|
316
329
|
```yaml
|
|
317
330
|
- name: Blog
|
|
@@ -322,7 +335,7 @@ To add some footer links, create a yaml file in the `_data` directory using the
|
|
|
322
335
|
link: /privacy-policy/
|
|
323
336
|
```
|
|
324
337
|
|
|
325
|
-
Then add the name of your yaml file (without the .yml extension) into the footer_menu setting in the `_config.yml
|
|
338
|
+
Then add the name of your yaml file (without the .yml extension) into the `footer_menu` setting in the `_config.yml`.
|
|
326
339
|
|
|
327
340
|
```yaml
|
|
328
341
|
footer_menu: example_footer_menu
|
|
@@ -330,19 +343,15 @@ footer_menu: example_footer_menu
|
|
|
330
343
|
|
|
331
344
|
#### Hiding the footer
|
|
332
345
|
|
|
333
|
-
**New in 0.5.2**
|
|
334
|
-
|
|
335
|
-
If you would like to hide the footer on a particular page then set `hide_footer: true` in the page's frontmatter.
|
|
346
|
+
**New in 0.5.2** - If you would like to hide the footer on a particular page then set `hide_footer: true` in the page's frontmatter.
|
|
336
347
|
|
|
337
348
|
### Products
|
|
338
349
|
|
|
339
|
-
**New in 0.5**
|
|
340
|
-
|
|
341
|
-
Now you can add simple product pages to your site using collections.
|
|
350
|
+
**New in 0.5** - Now you can add simple product pages to your site using collections.
|
|
342
351
|
|
|
343
352
|
#### Product pages
|
|
344
353
|
|
|
345
|
-
Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features and rating.
|
|
354
|
+
Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features, and rating.
|
|
346
355
|
|
|
347
356
|
```yaml
|
|
348
357
|
title: Product 1 Name
|
|
@@ -380,13 +389,13 @@ You can also set default product page values here if you like, such as the layou
|
|
|
380
389
|
|
|
381
390
|
#### Product Reviews
|
|
382
391
|
|
|
383
|
-
To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a
|
|
392
|
+
To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yaml file with the name of the product_code from the product page, for example `_data/reviews/ABC124.yml`. Create the reviews using the following format:
|
|
384
393
|
|
|
385
394
|
```yaml
|
|
386
395
|
- name: Mr E Xample
|
|
387
396
|
rating: 4
|
|
388
397
|
title: Great product, highly recommended
|
|
389
|
-
date: 01
|
|
398
|
+
date: 2019-01-01
|
|
390
399
|
avatar: https://bulma.io/images/placeholders/128x128.png
|
|
391
400
|
description: >
|
|
392
401
|
The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable.
|
|
@@ -394,12 +403,12 @@ To add reviews to your product page, create a `reviews` directory in the `_data`
|
|
|
394
403
|
- name: Mrs R E View
|
|
395
404
|
rating: 5
|
|
396
405
|
title: Nice, really liked this
|
|
397
|
-
date: 02
|
|
406
|
+
date: 2019-02-02
|
|
398
407
|
description: >
|
|
399
408
|
The product worked exactly as described.
|
|
400
409
|
```
|
|
401
410
|
|
|
402
|
-
If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the
|
|
411
|
+
If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the yaml file.
|
|
403
412
|
|
|
404
413
|
#### Product Category Page
|
|
405
414
|
|
|
@@ -415,23 +424,19 @@ sort: title
|
|
|
415
424
|
|
|
416
425
|
### Scripts
|
|
417
426
|
|
|
418
|
-
**New in 0.5.2**
|
|
419
|
-
|
|
420
|
-
There are two new files within the includes directory called `head-scripts.html` and `footer-scripts.html`. These are empty files by default but allow you to add any additional JavaScript to your site, such as the script for AddThis share buttons, in the `<head>` or after the `<footer>` of the page.
|
|
427
|
+
**New in 0.5.2** - There are two new files within the includes directory called `head-scripts.html` and `footer-scripts.html`. These are empty files by default but allow you to add any additional JavaScript to your site, such as the script for AddThis share buttons, in the `<head>` or after the `<footer>` of the page.
|
|
421
428
|
|
|
422
429
|
### Callouts
|
|
423
430
|
|
|
424
|
-
**New in 0.5.4**
|
|
425
|
-
|
|
426
|
-
You can now add callouts to a page to make a landing page style layout.
|
|
431
|
+
**New in 0.5.4** - You can now add callouts to a page to make a landing page style layout.
|
|
427
432
|
|
|
428
433
|
#### Create a callout data file
|
|
429
434
|
|
|
430
435
|
Create a data file following the below format. The style is for classes to set the background colour and sizes you would like to use of the Bulma hero container for the callouts.
|
|
431
436
|
|
|
432
|
-
**New in 0.5.7** You can set the height of the callouts in the data file, such as is-small
|
|
437
|
+
**New in 0.5.7** - You can set the height of the callouts in the data file, such as `is-small`, `is-medium`, or `is-large`. If unset it will be `is-medium` by default.
|
|
433
438
|
|
|
434
|
-
The items have
|
|
439
|
+
The items have six fields, but only the title and subtitle are required. If the icon is a brand icon, such as GitHub in the below example, set `icon_brand: true`.
|
|
435
440
|
|
|
436
441
|
```yaml
|
|
437
442
|
style: is-light
|
|
@@ -451,7 +456,7 @@ items:
|
|
|
451
456
|
|
|
452
457
|
#### Set the callouts in the frontmatter
|
|
453
458
|
|
|
454
|
-
To display the callouts on your page, add a callouts property in the frontmatter and set it to the name of your data file without the extension.
|
|
459
|
+
To display the callouts on your page, add a `callouts` property in the frontmatter and set it to the name of your data file without the extension.
|
|
455
460
|
|
|
456
461
|
```yaml
|
|
457
462
|
layout: page
|
|
@@ -462,7 +467,7 @@ callouts: example_callouts
|
|
|
462
467
|
|
|
463
468
|
### Favicon
|
|
464
469
|
|
|
465
|
-
The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the
|
|
470
|
+
The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the site's `_config.yml` like this `favicon: /path/to/favicon.png`
|
|
466
471
|
|
|
467
472
|
### Showcases
|
|
468
473
|
|
|
@@ -470,13 +475,13 @@ Showcases allow you to display your work to others using a simple layout.
|
|
|
470
475
|
|
|
471
476
|
#### Creating A Showcase Datafile
|
|
472
477
|
|
|
473
|
-
Create a datafile in your
|
|
478
|
+
Create a datafile in your site's `_data` directory in the following format. Subtitle, features and tags are not required.
|
|
474
479
|
|
|
475
|
-
The description text accepts
|
|
480
|
+
The description text accepts Markdown and is run through the markdownify filter on the page.
|
|
476
481
|
|
|
477
|
-
The image_ratio will default to is-16by9 if it is not defined and accepts the [Bulma image](https://bulma.io/documentation/elements/image/) classes.
|
|
482
|
+
The `image_ratio` will default to `is-16by9` if it is not defined and accepts the [Bulma image](https://bulma.io/documentation/elements/image/) classes.
|
|
478
483
|
|
|
479
|
-
To display GitHub Stars, Forks and Watchers badges add your GitHub user and repo name to the github setting, such as `chrisrhymes/bulma-clean-theme
|
|
484
|
+
To display GitHub Stars, Forks, and Watchers badges, add your GitHub user and repo name to the `github` setting, such as `chrisrhymes/bulma-clean-theme`.
|
|
480
485
|
|
|
481
486
|
To change the default styles of the features, set `features_styles`. This uses the styles from [bulma-block-list](https://www.csrhymes.com/bulma-block-list/) npm package.
|
|
482
487
|
|
|
@@ -485,7 +490,7 @@ intro: |-
|
|
|
485
490
|
This is some introduction text for the showcases.
|
|
486
491
|
|
|
487
492
|
## Example Heading
|
|
488
|
-
It can convert
|
|
493
|
+
It can convert Markdown format
|
|
489
494
|
|
|
490
495
|
items:
|
|
491
496
|
- title: Example showcase item
|
|
@@ -577,7 +582,7 @@ Start by creating a gallery data file using the below format, for example `my_ga
|
|
|
577
582
|
large_link: https://via.placeholder.com/1200x675
|
|
578
583
|
alt: The alt text for the image
|
|
579
584
|
description: |-
|
|
580
|
-
The image description can be written in **
|
|
585
|
+
The image description can be written in **Markdown** if required
|
|
581
586
|
ratio: is-16by9
|
|
582
587
|
- link: https://via.placeholder.com/800x600
|
|
583
588
|
large_link: https://via.placeholder.com/1200x675
|
|
@@ -587,13 +592,13 @@ Start by creating a gallery data file using the below format, for example `my_ga
|
|
|
587
592
|
```
|
|
588
593
|
|
|
589
594
|
* If a ratio is not provided it will default to 16 by 9. Use [Bulma image](https://bulma.io/documentation/elements/image/) classes to define the image ratio required.
|
|
590
|
-
* The description can be
|
|
591
|
-
* The alt will be used as the
|
|
592
|
-
* The large_link displays in a modal when the image is clicked
|
|
595
|
+
* The description can be plaintext or it can be Markdown if required.
|
|
596
|
+
* The alt will be used as the image's alt text.
|
|
597
|
+
* The large_link displays in a modal when the image is clicked.
|
|
593
598
|
|
|
594
599
|
#### Displaying the gallery
|
|
595
600
|
|
|
596
|
-
In your
|
|
601
|
+
In your page's front matter add a gallery with the datafile's filename without the extension.
|
|
597
602
|
|
|
598
603
|
```yaml
|
|
599
604
|
layout: page
|
|
@@ -603,7 +608,14 @@ gallery: my_gallery
|
|
|
603
608
|
|
|
604
609
|
### Disqus
|
|
605
610
|
|
|
606
|
-
Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`.
|
|
611
|
+
Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`.
|
|
612
|
+
```
|
|
613
|
+
disqus.shortname=<example-com.disqus.com>
|
|
614
|
+
```
|
|
615
|
+
|
|
616
|
+
Need help finding your Disqus Shortname? [See this helpful post by Disqus on the matter.](https://help.disqus.com/en/articles/1717111-what-s-a-shortname)
|
|
617
|
+
|
|
618
|
+
Then you need to set your Jekyll environment to production:
|
|
607
619
|
|
|
608
620
|
```JEKYLL_ENV=production bundle exec jekyll build```.
|
|
609
621
|
|
|
@@ -613,7 +625,53 @@ Comments are enabled by default. If you want to disable them, set in the front m
|
|
|
613
625
|
comments: false
|
|
614
626
|
```
|
|
615
627
|
|
|
628
|
+
### Recipe
|
|
629
|
+
|
|
630
|
+
You can make a single page using the recipe layout, or you can use it in your blog by specifying the `layout: recipe` instead of post.
|
|
631
|
+
|
|
632
|
+
You probably want to hide the sidebar, so the recipe takes up the whole page width. If you add any additional content to the page it will appear below the recipe details.
|
|
633
|
+
|
|
634
|
+
Create a list in the front matter for the ingredients, then the method steps and it will automatically be added to the page.
|
|
616
635
|
|
|
636
|
+
The front matter will also be added to the page as schema data that is used by search engines. Please see the below example for all of the schema options available.
|
|
637
|
+
|
|
638
|
+
```yaml
|
|
639
|
+
layout: recipe
|
|
640
|
+
title: An Example Recipe Page
|
|
641
|
+
subtitle: Tastes great and easy to cook
|
|
642
|
+
author: CS Rhymes
|
|
643
|
+
date: 2021-03-02
|
|
644
|
+
show_sidebar: false
|
|
645
|
+
image: /bulma-clan-theme/img/recipe-example.jpg
|
|
646
|
+
hero_image: /bulma-clean-theme/img/recipe-example.jpg
|
|
647
|
+
ingredients:
|
|
648
|
+
- 1tsp vegetable oil
|
|
649
|
+
- 2 Carrots, finely diced
|
|
650
|
+
- 1 Onion, finely dices
|
|
651
|
+
- 1 Celery stick, finely diced
|
|
652
|
+
- 2 Cloves of Garlic, crushed
|
|
653
|
+
- 400g lean Minced Beef
|
|
654
|
+
- 400g tin of Chopped Tomatoes
|
|
655
|
+
- 2tbsp Tomato Puree
|
|
656
|
+
- 300ml Beef Stock
|
|
657
|
+
- 1tsp Worcestershire Sauce
|
|
658
|
+
- 2tsp Italian Herbs
|
|
659
|
+
- Salt and Pepper
|
|
660
|
+
method:
|
|
661
|
+
- Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
|
|
662
|
+
- Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
|
|
663
|
+
- Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
|
|
664
|
+
- Add the chopped tomatoes, tomato puree, beef stock, worcestershire sauce and italian herbs and stir. Add a pinch of salt and pepper then stir through
|
|
665
|
+
- Bring to a gentle simmer and cook for 30 minutes
|
|
666
|
+
prep_time: PT0H10M
|
|
667
|
+
cook_time: PT1H
|
|
668
|
+
total_time: PT1H10M
|
|
669
|
+
keywords: recipe,cooking
|
|
670
|
+
recipe_yield: 4
|
|
671
|
+
recipe_category: Main course
|
|
672
|
+
recipe_cuisine: Italian
|
|
673
|
+
calories: 500 calories
|
|
674
|
+
```
|
|
617
675
|
|
|
618
676
|
## Contributing
|
|
619
677
|
|
|
@@ -623,7 +681,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/chrisr
|
|
|
623
681
|
|
|
624
682
|
To set up your environment to develop this theme, run `bundle install`.
|
|
625
683
|
|
|
626
|
-
Your theme is
|
|
684
|
+
Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
|
627
685
|
|
|
628
686
|
## License
|
|
629
687
|
|
data/_includes/head.html
CHANGED
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
<meta charset="utf-8">
|
|
3
3
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
4
4
|
<meta name="theme-color" content={{ site.theme_color | default: '#ffffff' }}>
|
|
5
|
-
<title>{{ page.title }} - {{ site.title }}</title>
|
|
6
5
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
|
|
7
6
|
<link rel="shortcut icon" type="image/png"
|
|
8
7
|
{% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
|
|
9
8
|
/>
|
|
10
|
-
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
|
|
11
10
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
|
|
12
11
|
{% unless site.hide_share_buttons %}
|
|
13
12
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">
|
data/_includes/header.html
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
<nav class="navbar is-primary" >
|
|
1
|
+
<nav class="navbar is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}" x-data="{ openNav: false }">
|
|
3
2
|
<div class="container">
|
|
4
3
|
<div class="navbar-brand">
|
|
5
4
|
<a href="{{ site.baseurl }}/" class="navbar-item">
|
|
6
5
|
{{ site.title }}
|
|
7
6
|
</a>
|
|
8
|
-
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
|
|
7
|
+
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu" :class="{ 'is-active': openNav }" x-on:click="openNav = !openNav">
|
|
9
8
|
<span aria-hidden="true"></span>
|
|
10
9
|
<span aria-hidden="true"></span>
|
|
11
10
|
<span aria-hidden="true"></span>
|
|
12
11
|
</a>
|
|
13
12
|
</div>
|
|
14
|
-
<div class="navbar-menu" id="navMenu">
|
|
13
|
+
<div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
|
|
15
14
|
<div class="navbar-start">
|
|
16
15
|
<a href="{{ site.baseurl }}/" class="navbar-item {% if page.url == "/" %}is-active{% endif %}">Home</a>
|
|
17
16
|
{% if site.data.navigation %}
|
|
18
17
|
{% for item in site.data.navigation %}
|
|
19
18
|
{% if item.dropdown %}
|
|
20
|
-
<div class="navbar-item has-dropdown is-hoverable">
|
|
19
|
+
<div class="navbar-item has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
|
|
21
20
|
<a href="{{ item.link | relative_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
|
|
22
21
|
<div class="navbar-dropdown">
|
|
23
22
|
{% for subitem in item.dropdown %}
|
data/_includes/showcase.html
CHANGED
data/_includes/tag.html
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<figure class="image is-16by9">
|
|
2
|
+
<iframe src="https://player.vimeo.com/video/{{ include.video }}?color=ff9933&title=0&byline=0&portrait=0" class="has-ratio" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
|
|
3
|
+
</figure>
|
data/_includes/youtube.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<figure class="image is-16by9">
|
|
2
2
|
<iframe class="has-ratio"
|
|
3
|
-
src="https://www.youtube.com/embed/{{ include.video }}?showinfo=0"
|
|
3
|
+
src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0"
|
|
4
4
|
frameborder="0"
|
|
5
5
|
allowfullscreen
|
|
6
6
|
>
|
data/_layouts/default.html
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
{% if page.menubar and page.show_sidebar %}
|
|
2
|
-
{% assign content_width = 'is-4' %}
|
|
3
|
-
{% elsif page.menubar or page.show_sidebar %}
|
|
4
|
-
{% assign content_width = 'is-8' %}
|
|
5
|
-
{% else %}
|
|
6
|
-
{% assign content_width = 'is-12' %}
|
|
7
|
-
{% endif %}
|
|
8
1
|
<!DOCTYPE html>
|
|
9
|
-
|
|
2
|
+
{% if page.menubar or page.menubar_toc %}
|
|
3
|
+
{% assign has_left_sidebar = true %}
|
|
4
|
+
{% endif %}
|
|
5
|
+
|
|
6
|
+
{% if page.show_sidebar and has_left_sidebar %}
|
|
7
|
+
{% assign content_width = 'is-4' %}
|
|
8
|
+
{% elsif page.show_sidebar or has_left_sidebar %}
|
|
9
|
+
{% assign content_width = 'is-8' %}
|
|
10
|
+
{% else %}
|
|
11
|
+
{% assign content_width = 'is-12' %}
|
|
12
|
+
{% endif %}
|
|
13
|
+
|
|
14
|
+
<html
|
|
15
|
+
lang="{{ site.lang | default: 'en' }}"
|
|
16
|
+
{% if site.fixed_navbar %}class="has-navbar-fixed-{{ site.fixed_navbar }}"{% endif %}>
|
|
10
17
|
{% include head.html %}
|
|
11
18
|
<body>
|
|
12
19
|
{% include header.html %}
|
|
@@ -49,4 +56,3 @@
|
|
|
49
56
|
{%- include footer-scripts.html -%}
|
|
50
57
|
</body>
|
|
51
58
|
</html>
|
|
52
|
-
|
data/_layouts/post.html
CHANGED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<script type="application/ld+json">
|
|
6
|
+
{
|
|
7
|
+
"@context": "https://schema.org/",
|
|
8
|
+
"@type": "Recipe",
|
|
9
|
+
"name": "{{ page.title }}",
|
|
10
|
+
"image": [
|
|
11
|
+
"{{ page.image }}"
|
|
12
|
+
],
|
|
13
|
+
"author": {
|
|
14
|
+
"@type": "Person",
|
|
15
|
+
"name": "{{ page.author }}"
|
|
16
|
+
},
|
|
17
|
+
"datePublished": "{{ page.date }}",
|
|
18
|
+
"description": "{{ page.description }}",
|
|
19
|
+
"prepTime": "{{ page.prep_time }}",
|
|
20
|
+
"cookTime": "{{ page.cook_time }}",
|
|
21
|
+
"totalTime": "{{ page.total_time }}",
|
|
22
|
+
"keywords": "{{ page.keywords }}",
|
|
23
|
+
"recipeYield": "{{ page.recipe_yield }}",
|
|
24
|
+
"recipeCategory": "{{ page.recipe_category }}",
|
|
25
|
+
"recipeCuisine": "{{ page.recipe_cuisine }}",
|
|
26
|
+
{% if page.calories %}
|
|
27
|
+
"nutrition": {
|
|
28
|
+
"@type": "NutritionInformation",
|
|
29
|
+
"calories": "{{ page.calories }}"
|
|
30
|
+
},
|
|
31
|
+
{% endif %}
|
|
32
|
+
"recipeIngredient":
|
|
33
|
+
{{ page.ingredients | jsonify }},
|
|
34
|
+
"recipeInstructions": [
|
|
35
|
+
{% for step in page.method %}
|
|
36
|
+
{
|
|
37
|
+
"@type": "HowToStep",
|
|
38
|
+
"text": "{{ step }}"
|
|
39
|
+
{% if forloop.last == true %}
|
|
40
|
+
}
|
|
41
|
+
{% else %}
|
|
42
|
+
},
|
|
43
|
+
{% endif %}
|
|
44
|
+
{% endfor %}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<div class="columns is-multiline">
|
|
50
|
+
<div class="column is-4">
|
|
51
|
+
<div class="box has-text-centered">
|
|
52
|
+
<strong>Serves:</strong> {{ page.recipe_yield }}
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="column is-4">
|
|
56
|
+
<div class="box has-text-centered">
|
|
57
|
+
<strong>Prep time:</strong> {{ page.prep_time | date: "%k hours %M minutes" }}
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="column is-4">
|
|
61
|
+
<div class="box has-text-centered">
|
|
62
|
+
<strong>Cook time:</strong> {{ page.cook_time | date: "%k hours %M minutes" }}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="column is-4">
|
|
66
|
+
<div class="box">
|
|
67
|
+
<p class="title is-4">Ingredients</p>
|
|
68
|
+
<div class="content">
|
|
69
|
+
<ul>
|
|
70
|
+
{% for ingredient in page.ingredients %}
|
|
71
|
+
<li>{{ ingredient }}</li>
|
|
72
|
+
{% endfor %}
|
|
73
|
+
</ul>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="column is-8">
|
|
78
|
+
<p class="title is-4">Method</p>
|
|
79
|
+
<div class="content">
|
|
80
|
+
<ol>
|
|
81
|
+
{% for step in page.method %}
|
|
82
|
+
<li>{{ step }}</li>
|
|
83
|
+
{% endfor %}
|
|
84
|
+
</ol>
|
|
85
|
+
<div class="tags">
|
|
86
|
+
{% assign tags = page.keywords | split: "," %}
|
|
87
|
+
{% for tag in tags %}
|
|
88
|
+
{% include tag.html tag=tag %}
|
|
89
|
+
{% endfor %}
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="content">
|
|
95
|
+
{{ content }}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
data/assets/js/app.js
CHANGED
|
@@ -1,25 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
// Get all "navbar-burger" elements
|
|
4
|
-
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
|
5
|
-
|
|
6
|
-
// Check if there are any navbar burgers
|
|
7
|
-
if ($navbarBurgers.length > 0) {
|
|
8
|
-
|
|
9
|
-
// Add a click event on each of them
|
|
10
|
-
$navbarBurgers.forEach( el => {
|
|
11
|
-
el.addEventListener('click', () => {
|
|
12
|
-
|
|
13
|
-
// Get the target from the "data-target" attribute
|
|
14
|
-
const target = el.dataset.target;
|
|
15
|
-
const $target = document.getElementById(target);
|
|
16
|
-
|
|
17
|
-
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
|
18
|
-
el.classList.toggle('is-active');
|
|
19
|
-
$target.classList.toggle('is-active');
|
|
20
|
-
|
|
21
|
-
});
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
});
|
|
1
|
+
//
|
|
@@ -61,6 +61,12 @@ $block-list-highlight-width: 5px !default;
|
|
|
61
61
|
border-left: $block-list-highlight-width $dark solid;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
@mixin outlined($color) {
|
|
65
|
+
background: transparent;
|
|
66
|
+
color: $color;
|
|
67
|
+
border: 1px solid $color;
|
|
68
|
+
}
|
|
69
|
+
|
|
64
70
|
@each $name, $pair in $colors {
|
|
65
71
|
|
|
66
72
|
$color: nth($pair, 1);
|
|
@@ -71,20 +77,25 @@ $block-list-highlight-width: 5px !default;
|
|
|
71
77
|
background: $color;
|
|
72
78
|
color: $color-invert;
|
|
73
79
|
}
|
|
80
|
+
|
|
81
|
+
li.is-#{$name}.is-outlined {
|
|
82
|
+
@include outlined($color);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
li.is-#{$name}.is-highlighted {
|
|
86
|
+
@include outlined($color);
|
|
87
|
+
border-left: $block-list-highlight-width $color solid;
|
|
88
|
+
}
|
|
74
89
|
|
|
75
90
|
&.is-#{$name} {
|
|
76
91
|
li.is-outlined,
|
|
77
92
|
&.is-outlined > li {
|
|
78
|
-
|
|
79
|
-
color: $color;
|
|
80
|
-
border: 1px solid $color;
|
|
93
|
+
@include outlined($color);
|
|
81
94
|
}
|
|
82
95
|
|
|
83
96
|
li.is-highlighted,
|
|
84
97
|
&.is-highlighted > li {
|
|
85
|
-
|
|
86
|
-
color: $color;
|
|
87
|
-
border: 1px solid $color;
|
|
98
|
+
@include outlined($color);
|
|
88
99
|
border-left: $block-list-highlight-width $color solid;
|
|
89
100
|
}
|
|
90
101
|
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"_from": "bulma-block-list@^0.4",
|
|
3
|
-
"_id": "bulma-block-list@0.4.
|
|
2
|
+
"_from": "bulma-block-list@^0.4.1",
|
|
3
|
+
"_id": "bulma-block-list@0.4.1",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-rNMgnzX/e1MnsKXpzPuRl2kNN+xxEBqe00idycD8Wt7xg0dHlBi4xctN0roW9cFlRyvxW5zJwSufPgavaJpghQ==",
|
|
6
6
|
"_location": "/bulma-block-list",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
9
9
|
"type": "range",
|
|
10
10
|
"registry": true,
|
|
11
|
-
"raw": "bulma-block-list@^0.4",
|
|
11
|
+
"raw": "bulma-block-list@^0.4.1",
|
|
12
12
|
"name": "bulma-block-list",
|
|
13
13
|
"escapedName": "bulma-block-list",
|
|
14
|
-
"rawSpec": "^0.4",
|
|
14
|
+
"rawSpec": "^0.4.1",
|
|
15
15
|
"saveSpec": null,
|
|
16
|
-
"fetchSpec": "^0.4"
|
|
16
|
+
"fetchSpec": "^0.4.1"
|
|
17
17
|
},
|
|
18
18
|
"_requiredBy": [
|
|
19
19
|
"/"
|
|
20
20
|
],
|
|
21
|
-
"_resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.
|
|
22
|
-
"_shasum": "
|
|
23
|
-
"_spec": "bulma-block-list@^0.4",
|
|
21
|
+
"_resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.1.tgz",
|
|
22
|
+
"_shasum": "24fc9eabb216694885bacbd5cff87e8e0b6a7937",
|
|
23
|
+
"_spec": "bulma-block-list@^0.4.1",
|
|
24
24
|
"_where": "/Users/chrisrhymes/Code/bulma-clean-theme",
|
|
25
25
|
"author": {
|
|
26
26
|
"name": "chrisrhymes"
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"css-watch": "npm run css-build -- --watch",
|
|
53
53
|
"start": "npm run css-watch"
|
|
54
54
|
},
|
|
55
|
-
"version": "0.4.
|
|
55
|
+
"version": "0.4.1"
|
|
56
56
|
}
|
|
@@ -61,6 +61,12 @@ $block-list-highlight-width: 5px !default;
|
|
|
61
61
|
border-left: $block-list-highlight-width $dark solid;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
@mixin outlined($color) {
|
|
65
|
+
background: transparent;
|
|
66
|
+
color: $color;
|
|
67
|
+
border: 1px solid $color;
|
|
68
|
+
}
|
|
69
|
+
|
|
64
70
|
@each $name, $pair in $colors {
|
|
65
71
|
|
|
66
72
|
$color: nth($pair, 1);
|
|
@@ -71,20 +77,25 @@ $block-list-highlight-width: 5px !default;
|
|
|
71
77
|
background: $color;
|
|
72
78
|
color: $color-invert;
|
|
73
79
|
}
|
|
80
|
+
|
|
81
|
+
li.is-#{$name}.is-outlined {
|
|
82
|
+
@include outlined($color);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
li.is-#{$name}.is-highlighted {
|
|
86
|
+
@include outlined($color);
|
|
87
|
+
border-left: $block-list-highlight-width $color solid;
|
|
88
|
+
}
|
|
74
89
|
|
|
75
90
|
&.is-#{$name} {
|
|
76
91
|
li.is-outlined,
|
|
77
92
|
&.is-outlined > li {
|
|
78
|
-
|
|
79
|
-
color: $color;
|
|
80
|
-
border: 1px solid $color;
|
|
93
|
+
@include outlined($color);
|
|
81
94
|
}
|
|
82
95
|
|
|
83
96
|
li.is-highlighted,
|
|
84
97
|
&.is-highlighted > li {
|
|
85
|
-
|
|
86
|
-
color: $color;
|
|
87
|
-
border: 1px solid $color;
|
|
98
|
+
@include outlined($color);
|
|
88
99
|
border-left: $block-list-highlight-width $color solid;
|
|
89
100
|
}
|
|
90
101
|
}
|
data/package-lock.json
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"integrity": "sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA=="
|
|
11
11
|
},
|
|
12
12
|
"bulma-block-list": {
|
|
13
|
-
"version": "0.4.
|
|
14
|
-
"resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.
|
|
15
|
-
"integrity": "sha512-
|
|
13
|
+
"version": "0.4.1",
|
|
14
|
+
"resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.1.tgz",
|
|
15
|
+
"integrity": "sha512-rNMgnzX/e1MnsKXpzPuRl2kNN+xxEBqe00idycD8Wt7xg0dHlBi4xctN0roW9cFlRyvxW5zJwSufPgavaJpghQ==",
|
|
16
16
|
"requires": {
|
|
17
17
|
"bulma": "^0.8.0"
|
|
18
18
|
},
|
data/package.json
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bulma-clean-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.11.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- chrisrhymes
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2021-03-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -154,7 +154,9 @@ files:
|
|
|
154
154
|
- _includes/sponsors.html
|
|
155
155
|
- _includes/subscribe.html
|
|
156
156
|
- _includes/tabs.html
|
|
157
|
+
- _includes/tag.html
|
|
157
158
|
- _includes/toc.html
|
|
159
|
+
- _includes/vimeo.html
|
|
158
160
|
- _includes/youtube.html
|
|
159
161
|
- _layouts/blog.html
|
|
160
162
|
- _layouts/default.html
|
|
@@ -162,11 +164,11 @@ files:
|
|
|
162
164
|
- _layouts/post.html
|
|
163
165
|
- _layouts/product-category.html
|
|
164
166
|
- _layouts/product.html
|
|
167
|
+
- _layouts/recipe.html
|
|
165
168
|
- _posts/2018-05-28-why-use-a-static-site-generator.markdown
|
|
166
169
|
- _posts/2019-02-09-getting-started-with-bulma-clean-theme.markdown
|
|
167
170
|
- _posts/2019-07-23-introducing-some-new-layouts-to-bulma-clean-theme.markdown
|
|
168
171
|
- _posts/2020-05-08-creating-a-docs-site-with-bulma-clean-theme.markdown
|
|
169
|
-
- _posts/2020-10-17-post-with-summary.md
|
|
170
172
|
- _sass/_layout.scss
|
|
171
173
|
- _sass/_main.scss
|
|
172
174
|
- _sass/_showcase.scss
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: post
|
|
3
|
-
title: Example post with a summary
|
|
4
|
-
summary: |-
|
|
5
|
-
This is the custom summary for the post.
|
|
6
|
-
|
|
7
|
-
It can be in **markdown format** if required.
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
This is the text for the post. It won't be used as the excerpt as it will use the custom summary set in the post instead.
|
|
11
|
-
|
|
12
|
-
If the summary is not set it will use the default excerpt generated by Jekyll.
|
|
13
|
-
|
|
14
|
-
To use a custom summary, set the `summary` in the post's front matter.
|
|
15
|
-
|
|
16
|
-
```yaml
|
|
17
|
-
layout: post
|
|
18
|
-
title: Example post with a summary
|
|
19
|
-
summary: |-
|
|
20
|
-
This is the custom summary for the post.
|
|
21
|
-
|
|
22
|
-
It can be in **markdown format** if required.
|
|
23
|
-
```
|