bulma-clean-theme 0.10.1 → 0.10.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d810060e0eec98758c417783dd55371be2a45bb153181abd275d5dd5c652b237
-  data.tar.gz: 7dc31995e73b1924ebeca83c2a7ebb3cce43ca6463be9c39539f2b453c64a4d4
+  metadata.gz: 5c6a0cc9b71f5dbbadbe42bfa8761dfe20140160bd0f17344d2e1918227ce003
+  data.tar.gz: 2f72832cca44555c479437b4be5d37f922285d4b62e24991f00f3b045f50a038
 SHA512:
-  metadata.gz: c853f3b596c4b0a8658251a52e9dd601b4f04c7910cd1b7705f69de0282354ce7a70e805c70ccbd9da255e80f0b67a037205843346b534ea0a6f7cde4e432523
-  data.tar.gz: 168f4189d2ef90b0cacc141e1b96a969ae9ccc87c0533c3c474557024a3cf274819a5dfafb55c5871d6fcd0a3f24bb9a8d8e1bd2d728a7ac6abfcf3de251aae9
+  metadata.gz: da89ce6eb6854b055dfc78b96a1950bced3b6289aa2caa9d7fe85152d90abce0c8921c569ad9b01bd03ff2d9fc2aef944e09a375b128bf979223c9853cdf6b29
+  data.tar.gz: 4fdaa04241cacfe2e0a939a2fe0dfc0b6e9e7ee157238dc1b37d5180cb85d39cc4af117695036502ff60239168f49fa79934ed830fb1f7996ed4ec3892e4d980

data/README.md

@@ -5,6 +5,8 @@
 
 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.
+
 ## Contents
 
 * [Installation](#installation)
@@ -19,6 +21,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
     * [Menubar](#menubar)
     * [Tabs](#tabs)
     * [Notifications](#notifications)
+    * [Tags](#tags)
     * [Google Analytics](#google-analytics)
     * [Footer](#footer)
     * [Products](#products)
@@ -85,6 +88,9 @@ If you would like to darken the hero so the title stands out more, you can set `
 **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.
+
 ### 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`
@@ -134,6 +140,11 @@ For the top navigation, create a navigation.yml file in `_data` directory with t
 
 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`
 
+#### Fixed Navbar
+
+To have a fixed navbar, 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`
@@ -148,6 +159,10 @@ $primary: #333333;
 
 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
+
+If you want to update the theme color meta tag then set `theme_color: '#333333'` in your `_config.yml` file. 
+
 ### Sidebar Visibility
 
 **New in 0.2**
@@ -277,6 +292,40 @@ You can include a notification in a page or post using the below include. The me
 {% include notification.html message="This is the message for the notification" %}
 ```
 
+#### Dismissible Notifications
+
+To set a notification to be dismissible, set dismissible to 'true'
+
+```liquid
+{% include notification.html
+message="This notification is dismissable"
+dismissable="true" %}
+```
+
+#### Iconless Notifications
+
+Omit the icon by setting icon to 'false'
+
+```liquid
+{% include notification.html
+message="This notification does not have an icon."
+icon="false" %}
+```
+
+### Tags
+
+To include a tag use the following include. 
+
+```liquid
+{% include tag.html tag="The tag text" %}
+```
+
+You can overwrite the default style (is-primary) by passing in the style in the include tag.
+
+```liquid
+{% include tag.html tag="The tag text" style="is-light" %}
+```
+
 ### Google Analytics 
 
 **New in 0.2**
@@ -362,7 +411,7 @@ To add reviews to your product page, create a `reviews` directory in the `_data`
 - name: Mr E Xample
   rating: 4
   title: Great product, highly recommended
-  date: 01/01/2019
+  date: 2019-01-01
   avatar: https://bulma.io/images/placeholders/128x128.png
   description: >
     The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable. 
@@ -370,7 +419,7 @@ To add reviews to your product page, create a `reviews` directory in the `_data`
 - name: Mrs R E View
   rating: 5
   title: Nice, really liked this
-  date: 02/02/2019
+  date: 2019-02-02
   description: >
     The product worked exactly as described. 
 ```

data/_includes/head.html

@@ -1,12 +1,12 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ page.title }} - {{ site.title }}</title>
+    <meta name="theme-color" content={{ site.theme_color | default: '#ffffff' }}>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
     <link rel="shortcut icon" type="image/png"
           {% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
     />
-    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
     {% unless site.hide_share_buttons %}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">

data/_includes/header.html

@@ -1,23 +1,22 @@
-
-<nav class="navbar is-primary" >
+<nav class="navbar is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}" x-data="{ openNav: false }">
     <div class="container">
         <div class="navbar-brand">
             <a href="{{ site.baseurl }}/" class="navbar-item">
                 {{ site.title }}
             </a>
-            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
+            <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">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
             </a>
         </div>
-        <div class="navbar-menu" id="navMenu">
+        <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
             <div class="navbar-start">
                 <a href="{{ site.baseurl }}/" class="navbar-item {% if page.url == "/" %}is-active{% endif %}">Home</a>
                 {% if site.data.navigation %}
                 {% for item in site.data.navigation %}
                     {% if item.dropdown %}
-                    <div class="navbar-item has-dropdown is-hoverable">
+                    <div class="navbar-item has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
                         <a href="{{ item.link | relative_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
                         <div class="navbar-dropdown">
                             {% for subitem in item.dropdown %}

data/_includes/notification.html

@@ -1,10 +1,17 @@
-<div class="notification {{ include.status | default: 'is-warning' }}" markdown="0">
-    <article class="media">
-        <div class="media-left">
-            <span class="icon"><i class="{{ include.icon | default: 'fas fa-exclamation-circle' }} fa-lg"></i></span>
-        </div>
-        <div class="media-content">
-            <div class="content">{{ include.message | markdownify }}</div>
-        </div>
-    </article>
+<div x-data="{visible: true}" markdown="0">
+    <div class="notification {{ include.status | default: 'is-warning' }}" x-show.transition.duration.300ms="visible">
+        {% if include.dismissable %}
+            <button class="delete" x-on:click="visible = false"></button>
+        {% endif %}
+        <article class="media">
+            {% unless include.icon %}
+                <div class="media-left">
+                    <span class="icon"><i class="{{ include.icon | default: 'fas fa-exclamation-circle' }} fa-lg"></i></span>
+                </div>
+            {% endunless %}
+            <div class="media-content">
+                <div class="content">{{ include.message | markdownify }}</div>
+            </div>
+        </article>
+    </div>
 </div>

data/_includes/showcase.html

@@ -47,7 +47,7 @@
                         {% assign tags = item.tags | split: "," %}
                         <div class="tags is-centered">
                             {% for tag in tags %}
-                            <div class="tag is-dark">{{ tag }}</div>
+                                {% include tag.html tag=tag style="is-dark" %}
                             {% endfor %}
                         </div>
                         {% endif %}

data/_includes/tag.html

@@ -0,0 +1,3 @@
+<span class="tag {% if include.style %} {{ include.style }} {% else %} is-primary {% endif %}">
+    {{ include.tag }}
+</span>

data/_layouts/default.html

@@ -1,12 +1,17 @@
-{% if page.menubar and page.show_sidebar %} 
+{% if page.menubar or page.menubar_toc %}
+    {% assign has_left_sidebar = true %}
+{% endif %}
+
+{% if page.show_sidebar and has_left_sidebar  %} 
     {% assign content_width = 'is-4' %} 
-{% elsif page.menubar or page.show_sidebar %} 
+{% elsif page.show_sidebar or has_left_sidebar %} 
     {% assign content_width = 'is-8' %} 
 {% else %} 
     {% assign content_width = 'is-12' %} 
 {% endif %}
+
 <!DOCTYPE html>
-<html>
+<html {% if site.fixed_navbar %} class="has-navbar-fixed-{{ site.fixed_navbar }}" {% endif %}>
   {% include head.html %}
   <body>
     {% include header.html %}
@@ -17,7 +22,12 @@
     <section class="section">
         <div class="container">
             <div class="columns">
-                {% if page.menubar %}
+                {% if page.menubar_toc %}
+                <div class="column is-4-desktop is-4-tablet">
+                    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
+                    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+                </div>
+                {% elsif page.menubar %}
                 <div class="column is-4-desktop is-4-tablet">
                     {% include menubar.html %}
                 </div>

data/_layouts/post.html

@@ -11,7 +11,7 @@ layout: default
 
 <div class="tags">
     {% for tag in page.tags %}
-    <span class="tag is-primary">{{ tag }}</span>
+      {% include tag.html tag=tag %}
     {% endfor %}
 </div>
 

data/assets/js/app.js

@@ -1,25 +1 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  // Get all "navbar-burger" elements
-  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-  // Check if there are any navbar burgers
-  if ($navbarBurgers.length > 0) {
-
-    // Add a click event on each of them
-    $navbarBurgers.forEach( el => {
-      el.addEventListener('click', () => {
-
-        // Get the target from the "data-target" attribute
-        const target = el.dataset.target;
-        const $target = document.getElementById(target);
-
-        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-        el.classList.toggle('is-active');
-        $target.classList.toggle('is-active');
-
-      });
-    });
-  }
-
-});
+//

data/node_modules/bulma-block-list/docs/Gemfile

@@ -1,3 +1,3 @@
 source 'https://rubygems.org'
-gem "bulma-clean-theme",  '0.8'
+gem "bulma-clean-theme",  '0.10.3'
 gem 'github-pages', group: :jekyll_plugins

data/node_modules/bulma-block-list/docs/_sass/_block-list.scss

@@ -61,6 +61,12 @@ $block-list-highlight-width: 5px !default;
         border-left: $block-list-highlight-width $dark solid;
     }
 
+    @mixin outlined($color) {
+        background: transparent;
+        color: $color;
+        border: 1px solid $color;
+    }
+
     @each $name, $pair in $colors {
 
         $color: nth($pair, 1);
@@ -71,20 +77,25 @@ $block-list-highlight-width: 5px !default;
             background: $color;
             color: $color-invert;
         }
+        
+        li.is-#{$name}.is-outlined {
+            @include outlined($color);
+        }
+
+        li.is-#{$name}.is-highlighted {
+            @include outlined($color);
+            border-left: $block-list-highlight-width $color solid;
+        }
 
         &.is-#{$name} {
             li.is-outlined,
             &.is-outlined > li {
-                background: transparent;
-                color: $color;
-                border: 1px solid $color;
+                @include outlined($color);
             }
 
             li.is-highlighted,
             &.is-highlighted > li {
-                background: transparent;
-                color: $color;
-                border: 1px solid $color;
+                @include outlined($color);
                 border-left: $block-list-highlight-width $color solid;
             }
         }

data/node_modules/bulma-block-list/package.json

@@ -1,26 +1,26 @@
 {
-  "_from": "bulma-block-list@^0.4",
-  "_id": "bulma-block-list@0.4.0",
+  "_from": "bulma-block-list@^0.4.1",
+  "_id": "bulma-block-list@0.4.1",
   "_inBundle": false,
-  "_integrity": "sha512-N1jFSWXKmZrtETmbAVuy/q7TA0eb6VuyeaM8YsOue43Es55CPWshbK1vplJ+BYoxaacibs9paNhQs0y35qU+dQ==",
+  "_integrity": "sha512-rNMgnzX/e1MnsKXpzPuRl2kNN+xxEBqe00idycD8Wt7xg0dHlBi4xctN0roW9cFlRyvxW5zJwSufPgavaJpghQ==",
   "_location": "/bulma-block-list",
   "_phantomChildren": {},
   "_requested": {
     "type": "range",
     "registry": true,
-    "raw": "bulma-block-list@^0.4",
+    "raw": "bulma-block-list@^0.4.1",
     "name": "bulma-block-list",
     "escapedName": "bulma-block-list",
-    "rawSpec": "^0.4",
+    "rawSpec": "^0.4.1",
     "saveSpec": null,
-    "fetchSpec": "^0.4"
+    "fetchSpec": "^0.4.1"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.0.tgz",
-  "_shasum": "4f70d2bdeb1dbaa730c1f7cf75adcd6013b5703b",
-  "_spec": "bulma-block-list@^0.4",
+  "_resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.1.tgz",
+  "_shasum": "24fc9eabb216694885bacbd5cff87e8e0b6a7937",
+  "_spec": "bulma-block-list@^0.4.1",
   "_where": "/Users/chrisrhymes/Code/bulma-clean-theme",
   "author": {
     "name": "chrisrhymes"
@@ -52,5 +52,5 @@
     "css-watch": "npm run css-build -- --watch",
     "start": "npm run css-watch"
   },
-  "version": "0.4.0"
+  "version": "0.4.1"
 }

data/node_modules/bulma-block-list/src/block-list.scss

@@ -61,6 +61,12 @@ $block-list-highlight-width: 5px !default;
         border-left: $block-list-highlight-width $dark solid;
     }
 
+    @mixin outlined($color) {
+        background: transparent;
+        color: $color;
+        border: 1px solid $color;
+    }
+
     @each $name, $pair in $colors {
 
         $color: nth($pair, 1);
@@ -71,20 +77,25 @@ $block-list-highlight-width: 5px !default;
             background: $color;
             color: $color-invert;
         }
+        
+        li.is-#{$name}.is-outlined {
+            @include outlined($color);
+        }
+
+        li.is-#{$name}.is-highlighted {
+            @include outlined($color);
+            border-left: $block-list-highlight-width $color solid;
+        }
 
         &.is-#{$name} {
             li.is-outlined,
             &.is-outlined > li {
-                background: transparent;
-                color: $color;
-                border: 1px solid $color;
+                @include outlined($color);
             }
 
             li.is-highlighted,
             &.is-highlighted > li {
-                background: transparent;
-                color: $color;
-                border: 1px solid $color;
+                @include outlined($color);
                 border-left: $block-list-highlight-width $color solid;
             }
         }

data/package-lock.json

@@ -10,9 +10,9 @@
       "integrity": "sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA=="
     },
     "bulma-block-list": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.0.tgz",
-      "integrity": "sha512-N1jFSWXKmZrtETmbAVuy/q7TA0eb6VuyeaM8YsOue43Es55CPWshbK1vplJ+BYoxaacibs9paNhQs0y35qU+dQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/bulma-block-list/-/bulma-block-list-0.4.1.tgz",
+      "integrity": "sha512-rNMgnzX/e1MnsKXpzPuRl2kNN+xxEBqe00idycD8Wt7xg0dHlBi4xctN0roW9cFlRyvxW5zJwSufPgavaJpghQ==",
       "requires": {
         "bulma": "^0.8.0"
       },

data/package.json

@@ -11,6 +11,6 @@
   "license": "MIT",
   "dependencies": {
     "bulma": "^0.9.1",
-    "bulma-block-list": "^0.4"
+    "bulma-block-list": "^0.4.1"
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-clean-theme
 version: !ruby/object:Gem::Version
-  version: 0.10.1
+  version: 0.10.6
 platform: ruby
 authors:
 - chrisrhymes
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-28 00:00:00.000000000 Z
+date: 2021-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -154,6 +154,7 @@ files:
 - _includes/sponsors.html
 - _includes/subscribe.html
 - _includes/tabs.html
+- _includes/tag.html
 - _includes/toc.html
 - _includes/youtube.html
 - _layouts/blog.html