bulma-clean-theme 0.10.6 → 0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c6a0cc9b71f5dbbadbe42bfa8761dfe20140160bd0f17344d2e1918227ce003
-  data.tar.gz: 2f72832cca44555c479437b4be5d37f922285d4b62e24991f00f3b045f50a038
+  metadata.gz: 411147a7d028879cd29523fb38f6df85bcaaa60dbd1f32f56720d9f8b51bf988
+  data.tar.gz: 59c0abdb9a67097f3e5e0d71a2ef264300ac958d90e65a44efbd4c752d0fb060
 SHA512:
-  metadata.gz: da89ce6eb6854b055dfc78b96a1950bced3b6289aa2caa9d7fe85152d90abce0c8921c569ad9b01bd03ff2d9fc2aef944e09a375b128bf979223c9853cdf6b29
-  data.tar.gz: 4fdaa04241cacfe2e0a939a2fe0dfc0b6e9e7ee157238dc1b37d5180cb85d39cc4af117695036502ff60239168f49fa79934ed830fb1f7996ed4ec3892e4d980
+  metadata.gz: 00f7bb88affdc05ec4244e3d00bfbaa0b513df006ac9103c24ac6ff05cf544511742407e399c8da0826ecef690e58e71bd4405c8df16ea9f2881260148ac61a8
+  data.tar.gz: 307d0c09cb5290057a5ca47f687a24a91372478c91b9e9dcc4761925aea6b43ee05a6e9aa041c8b2d4535f920903a1fa559c19aad653a0b4618b5f13bbe56476

data/README.md

@@ -3,18 +3,21 @@
 [![Gem Version](https://badge.fury.io/rb/bulma-clean-theme.svg)](https://badge.fury.io/rb/bulma-clean-theme)
 ![Gem](https://img.shields.io/gem/dt/bulma-clean-theme.svg)
 
-This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern looking site to start with. 
+This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern-looking site to start with. 
 
-The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for it's interactive components, such as mobile navbar and notifications.
+The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for its interactive components, such as mobile navbar and notifications.
 
 ## Contents
 
 * [Installation](#installation)
 * [Usage](#usage)
+    * [Lang](#lang)
     * [Pages](#pages)
         * [Page Hero](#page-hero)
         * [Table Of Contents](#table-of-contents)
     * [Posts](#posts)
+        * [Post Excerpt and Summary](#post-excerpt-and-summary)
+        * [Series](#series)
     * [Navigation](#navigation)
     * [Colours and Styles](#colours-and-styles)
     * [Sidebar Visibility](#sidebar-visibility)
@@ -32,6 +35,7 @@ The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for it's interact
     * [Sponsors](#sponsors)
     * [Gallery](#gallery)
     * [Disqus](#disqus)
+    * [Recipe](#recipe)
 * [Contributing](#contributing)
 * [Development](#development)
 * [Licence](#licence)
@@ -39,7 +43,7 @@ The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for it's interact
 
 ## Installation
 
-**This theme requires Jekyll 3.8 so it is compatible with GitHub Pages.**
+**This theme requires Jekyll 3.9 to be compatible with GitHub Pages.**
 
 Add this line to your Jekyll site's `Gemfile`:
 
@@ -63,52 +67,50 @@ Or install it yourself as:
 
 ## Usage
 
-### Pages 
+### Lang
 
-Create your pages as individual markdown files and use the `layout: page` for normal pages. Set the pages title and subtitle in the front matter and it will appear in the hero.
+The html lang attribute is set to `en` by default but you can override this in the _config.yml file `lang: en`
+
+### Pages
+
+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.
 
 #### Page Hero
 
-**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 sites `_config.yml`
+**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`.
 
-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 
+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`.
 
-**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.
+**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.
 
-**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.
+**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.
 
-**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.
+**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.
 
 #### Table Of Contents
 
-**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. 
+**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. 
 
-**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.
+**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.
 
 ### Posts
 
-If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with the `layout: post`. Next create a `blog` directory with an index.html file that has `layout: blog`
+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`.
 
-Set the paginate and the paginate_path up in the `_config.yaml` to configure the posts per page and the blog pagination path.
+Set `paginate` and `paginate_path` in your site's `_config.yaml` to configure the posts per page and blog pagination path.
 
 ```yaml
 paginate: 5
 paginate_path: "/blog/page:num"
 ```
 
-**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 sites `_config.yml`
+**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`.
 
-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
+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`.
 
 #### Post Excerpt and Summary
 
-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. 
+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. 
 
 ```yaml
 layout: post
@@ -116,7 +118,56 @@ title: The post title
 summary: |-
     This is the custom summary for the post.
 
-    It can be in **markdown format** if required.
+    It can be in **Markdown format** if required.
+```
+
+#### Series
+
+From version 0.12, you can now make a post a part of a series of posts, linking to the other posts in the series, by creating a `series` data file and then setting the series in each of the post's front matter.
+
+The current post in the list is highlighted to help give context of where you are in the series.
+
+##### Blog Series Data File
+
+Start by creating a yml file in the _data directory, for example `my_blog_series.yml`. Give the series a title and, optionally, a description.
+
+##### Sections
+
+Next add sections. Each section can have a label (optional) and items. Each item is the title of an existing blog post. If the title is not found then the link will be empty.
+
+If you just want one list without labels, then omit the label and just add the items.
+
+```yaml
+title: The series title
+sections:
+  - items:
+      - title: Why use a static site generator
+      - title: Getting started with Bulma Clean Theme for Jekyll
+```
+
+Here is a full example with multiple sections with labels.
+
+```yaml
+title: The series title
+description: The series description text
+sections:
+  - label: The first section
+    items:
+      - title: Why use a static site generator
+      - title: Getting started with Bulma Clean Theme for Jekyll
+  - label: Another section
+    items:
+      - title: Introducing some new layouts to Bulma Clean Theme
+      - title: Creating a docs site with Bulma Clean Theme
+      - title: Creating a post series
+```
+
+##### Update your posts
+
+Finally, add the series setting to your front matter in each post you want the series to show in.
+
+```yaml
+series: my_blog_series
 ```
 
 #### Social Share Buttons
@@ -126,7 +177,7 @@ Share buttons will be displayed on your posts unless you hide them by adding `hi
 
 ### Navigation
 
-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.
+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.
 
 ```yaml
 - name: Page 1
@@ -138,16 +189,16 @@ For the top navigation, create a navigation.yml file in `_data` directory with t
       link: /page-2/
 ```
 
-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`
+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`.
 
 #### Fixed Navbar
 
-To have a fixed navbar, you can set `fixed_navbar: top` or `fixed_navbar: bottom` respectively in your
+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
 `_config.yml`.
 
 ### Colours and Styles
 
-To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main`
+To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main`.
 
 ```
 ---
@@ -157,7 +208,7 @@ $primary: #333333;
 @import "main";
 ```
 
-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"'`
+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";`.
 
 #### Theme Color Meta Tag
 
@@ -165,26 +216,22 @@ If you want to update the theme color meta tag then set `theme_color: '#333333'`
 
 ### Sidebar Visibility
 
-**New in 0.2**
-
-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`
+**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`.
 
 ### Menubar
 
-**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. 
+**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. 
 
 ```yaml
 show_sidebar: false
 menubar: example_menu
 ```
 
-You will probably want to disable the show_sidebar otherwise there will be little room for the page content. 
+You will probably want to disable `show_sidebar`. Otherwise there will be little room for the page content. 
 
 #### Creating a menubar data file
 
-Create a data file in the _data directory and use the following format (if using yml)
+Create a data file in the `_data` directory and use the following format (if using yml).
 
 ```yaml
 - label: Example Menu
@@ -204,11 +251,11 @@ Create a data file in the _data directory and use the following format (if using
       link: /blog/
 ```
 
-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`
+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`.
 
 #### Multiple menus
 
-You may make multiple menus in the same file, separated by the label
+You may make multiple menus in the same file, separated by labels.
 
 ```yaml
 - label: Menu Label
@@ -232,9 +279,7 @@ You may make multiple menus in the same file, separated by the label
 
 ### Tabs
 
-**New in 0.4**
-
-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. 
+**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. 
 
 ```yaml
 title: Page with tabs
@@ -249,7 +294,7 @@ Tabs can be used in conjunction with menubar and/or sidebar if you wish.
 
 #### Creating a tabs data file
 
-Create a data file in the _data directory and use the following format (if using yml)
+Create a data file in the `_data` directory and use the following format (if using yml).
 
 ```yaml
 alignment: is-left
@@ -272,7 +317,7 @@ items:
 
 #### Settings
 
-You can control the alignment, style and size of the tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/). 
+You can control the alignment, style, and size of tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/). 
 
 #### Active Tab Highlighting
 
@@ -280,9 +325,7 @@ It will automatically mark the active tab based on the current page.
 
 #### Icons
 
-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.
+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.
 
 ### Notifications
 
@@ -328,15 +371,11 @@ You can overwrite the default style (is-primary) by passing in the style in the
 
 ### Google Analytics 
 
-**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
+**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.
 
 ### Footer
 
-**New in 0.4.1**
-
-To add some footer links, create a yaml file in the `_data` directory using the following format
+**New in 0.4.1** - To add some footer links, create a yaml file in the `_data` directory using the following format.
 
 ```yaml
 - name: Blog
@@ -347,7 +386,7 @@ To add some footer links, create a yaml file in the `_data` directory using the
   link: /privacy-policy/
 ```
 
-Then add the name of your yaml file (without the .yml extension) into the footer_menu setting in the `_config.yml`
+Then add the name of your yaml file (without the .yml extension) into the `footer_menu` setting in the `_config.yml`.
 
 ```yaml
 footer_menu: example_footer_menu
@@ -355,19 +394,15 @@ footer_menu: example_footer_menu
 
 #### Hiding the footer
 
-**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.
+**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.
 
 ### Products
 
-**New in 0.5**
-
-Now you can add simple product pages to your site using collections. 
+**New in 0.5** - Now you can add simple product pages to your site using collections. 
 
 #### Product pages
 
-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. 
+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. 
 
 ```yaml
 title: Product 1 Name
@@ -405,7 +440,7 @@ You can also set default product page values here if you like, such as the layou
 
 #### Product Reviews
 
-To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yml 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:
+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:
 
 ```yaml
 - name: Mr E Xample
@@ -424,7 +459,7 @@ To add reviews to your product page, create a `reviews` directory in the `_data`
     The product worked exactly as described. 
 ```
 
-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 yml.
+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.
 
 #### Product Category Page
 
@@ -440,23 +475,21 @@ sort: title
 
 ### Scripts
 
-**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.
+**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.
 
 ### Callouts
 
-**New in 0.5.4**
+**New in 0.5.4** - You can now add callouts to a page to make a landing page style layout. 
 
-You can now add callouts to a page to make a landing page style layout. 
+* [Example of page with callouts - notice the 'calls to action' below the header.](http://www.csrhymes.com/bulma-clean-theme/landing/)
 
 #### Create a callout data file
 
 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. 
 
-**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.
+**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.
 
-The items have 6 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`.
+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`.
 
 ```yaml
 style: is-light
@@ -476,7 +509,7 @@ items:
 
 #### Set the callouts in the frontmatter
 
-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.
+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.
 
 ```yaml
 layout: page
@@ -487,7 +520,7 @@ callouts: example_callouts
 
 ### Favicon
 
-The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the sites `_config.yml` like this `favicon: /path/to/favicon.png`
+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`
 
 ### Showcases
 
@@ -495,13 +528,13 @@ Showcases allow you to display your work to others using a simple layout.
 
 #### Creating A Showcase Datafile
 
-Create a datafile in your sites `_data` directory in the following format. Subtitle, features and tags are not required. 
+Create a datafile in your site's `_data` directory in the following format. Subtitle, features and tags are not required. 
 
-The description text accepts markdown and is run through the markdownify filter on the page.
+The description text accepts Markdown and is run through the markdownify filter on the page.
 
-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.
+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.
 
-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`
+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`.
 
 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.
 
@@ -510,7 +543,7 @@ intro: |-
   This is some introduction text for the showcases.
   
   ## Example Heading
-  It can convert markdown format
+  It can convert Markdown format
 
 items:
   - title: Example showcase item
@@ -602,7 +635,7 @@ Start by creating a gallery data file using the below format, for example `my_ga
       large_link: https://via.placeholder.com/1200x675
       alt: The alt text for the image
       description: |-
-        The image description can be written in **markdown** if required
+        The image description can be written in **Markdown** if required
       ratio: is-16by9
     - link: https://via.placeholder.com/800x600
       large_link: https://via.placeholder.com/1200x675
@@ -612,13 +645,13 @@ Start by creating a gallery data file using the below format, for example `my_ga
 ```
 
 * 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. 
-* The description can be plain text or it can be markdown if required. 
-* The alt will be used as the images alt text.
-* The large_link displays in a modal when the image is clicked
+* The description can be plaintext or it can be Markdown if required. 
+* The alt will be used as the image's alt text.
+* The large_link displays in a modal when the image is clicked.
 
 #### Displaying the gallery
 
-In your pages front matter add a gallery with the datafiles filename without the extension.
+In your page's front matter add a gallery with the datafile's filename without the extension.
 
 ```yaml
 layout: page
@@ -628,7 +661,14 @@ gallery: my_gallery
 
 ### Disqus
 
-Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`. Then you need to set your Jekyll environment to production: 
+Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`. 
+```
+disqus.shortname=<example-com.disqus.com>  
+```
+
+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)  
+
+Then you need to set your Jekyll environment to production: 
 
 ```JEKYLL_ENV=production bundle exec jekyll build```. 
 
@@ -638,7 +678,53 @@ Comments are enabled by default. If you want to disable them, set in the front m
 comments: false
 ```
 
+### Recipe
+
+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.
+
+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.
 
+Create a list in the front matter for the ingredients, then the method steps and it will automatically be added to the page.
+
+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.
+
+```yaml
+layout: recipe
+title: An Example Recipe Page
+subtitle: Tastes great and easy to cook
+author: CS Rhymes
+date: 2021-03-02
+show_sidebar: false
+image: /bulma-clan-theme/img/recipe-example.jpg
+hero_image: /bulma-clean-theme/img/recipe-example.jpg
+ingredients:
+    - 1tsp vegetable oil
+    - 2 Carrots, finely diced
+    - 1 Onion, finely dices
+    - 1 Celery stick, finely diced
+    - 2 Cloves of Garlic, crushed
+    - 400g lean Minced Beef
+    - 400g tin of Chopped Tomatoes
+    - 2tbsp Tomato Puree
+    - 300ml Beef Stock
+    - 1tsp Worcestershire Sauce
+    - 2tsp Italian Herbs
+    - Salt and Pepper
+method:
+    - 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
+    - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
+    - Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
+    - 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
+    - Bring to a gentle simmer and cook for 30 minutes
+prep_time: PT0H10M
+cook_time: PT1H
+total_time: PT1H10M
+keywords: recipe,cooking
+recipe_yield: 4
+recipe_category: Main course
+recipe_cuisine: Italian
+calories: 500 calories
+```
 
 ## Contributing
 
@@ -648,7 +734,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/chrisr
 
 To set up your environment to develop this theme, run `bundle install`.
 
-Your theme is setup 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.
+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.
 
 ## License
 

data/_includes/series.html

@@ -0,0 +1,32 @@
+{% assign series = site.data.[page.series] %}
+{% assign posts = site.posts %}
+
+<p class="title is-5 is-spaced">{{ series.title }}</p>
+
+{% if series.description %}
+    <p>{{ series.description }}</p>
+{% endif %}
+
+{% for section in series.sections %}
+
+{% if section.label %}
+    <p class="title is-6">{{ section.label }}</p>
+{% endif %}
+
+<ul class="block-list is-small is-outlined">
+    {% for item in section.items %}
+        {% assign post = posts | where: "title", item.title %}
+
+        {% if page.url == post[0].url %}
+            <li class="is-highlighted is-dark">
+                <p>{{ item.title }}</p>
+            </li>
+        {% else %}
+            <li>
+                <a href="{{ site.baseurl }}{{ post[0].url }}" class="is-flex" >{{ item.title }}</a>
+            </li>
+        {% endif %}
+
+    {% endfor %}
+</ul>
+{% endfor %}

data/_includes/vimeo.html

@@ -0,0 +1,3 @@
+<figure class="image is-16by9">
+    <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>
+</figure>

data/_includes/youtube.html

@@ -1,6 +1,6 @@
 <figure class="image is-16by9"> 
     <iframe class="has-ratio" 
-        src="https://www.youtube.com/embed/{{ include.video }}?showinfo=0" 
+        src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0" 
         frameborder="0" 
         allowfullscreen
         >

data/_layouts/default.html

@@ -1,17 +1,19 @@
+<!DOCTYPE html>
 {% if page.menubar or page.menubar_toc %}
-    {% assign has_left_sidebar = true %}
+{% assign has_left_sidebar = true %}
 {% endif %}
 
-{% if page.show_sidebar and has_left_sidebar  %} 
-    {% assign content_width = 'is-4' %} 
-{% elsif page.show_sidebar or has_left_sidebar %} 
-    {% assign content_width = 'is-8' %} 
-{% else %} 
-    {% assign content_width = 'is-12' %} 
+{% if page.show_sidebar and has_left_sidebar  %}
+{% assign content_width = 'is-4' %}
+{% elsif page.show_sidebar or has_left_sidebar %}
+{% assign content_width = 'is-8' %}
+{% else %}
+{% assign content_width = 'is-12' %}
 {% endif %}
 
-<!DOCTYPE html>
-<html {% if site.fixed_navbar %} class="has-navbar-fixed-{{ site.fixed_navbar }}" {% endif %}>
+<html
+ lang="{{ site.lang | default: 'en' }}"
+ {% if site.fixed_navbar %}class="has-navbar-fixed-{{ site.fixed_navbar }}"{% endif %}>
   {% include head.html %}
   <body>
     {% include header.html %}
@@ -21,7 +23,7 @@
     {% include callouts.html %}
     <section class="section">
         <div class="container">
-            <div class="columns">
+            <div class="columns is-multiline">
                 {% if page.menubar_toc %}
                 <div class="column is-4-desktop is-4-tablet">
                     {% assign contentsTitle = page.toc_title | default: 'Contents' %}
@@ -40,7 +42,7 @@
                     {{ content }}
                 </div>
                 {% if site.posts and page.show_sidebar %}
-                <div class="column is-4-desktop is-12-tablet">
+                <div class="column is-4-desktop is-4-tablet">
                     {% include latest-posts.html %}
                 </div>
                 {% endif %}
@@ -54,4 +56,3 @@
     {%- include footer-scripts.html -%}
   </body>
 </html>
-

data/_layouts/post.html

@@ -6,6 +6,10 @@ layout: default
 
     <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
 
+    {% if page.series %}
+        {% include series.html %}
+    {% endif %}
+
     {{ content }}
 </div>