bulma-clean-theme 0.8.1 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 365edf96f993fdb04ab7a6a17438e902546e21b7
-  data.tar.gz: 88e83adb658f7cda5708136893e8b0f98f3fc004
+SHA256:
+  metadata.gz: d810060e0eec98758c417783dd55371be2a45bb153181abd275d5dd5c652b237
+  data.tar.gz: 7dc31995e73b1924ebeca83c2a7ebb3cce43ca6463be9c39539f2b453c64a4d4
 SHA512:
-  metadata.gz: 5bad6e57b63ca40367551dba6f41a881db24871bb643dd61de2a9df24f26585adb40c9635356ba65576219b4bb9645ee4fcd2f147b9aeebd67514ec94edb6d6a
-  data.tar.gz: 3242a63eca3d967ab9902e3f74de37660044a26c4ff56dab6bdf1a2011f68fcb9c51032c11acd69f720939a6c50a9b1eddbedb978152eb3068226c9754aa41a8
+  metadata.gz: c853f3b596c4b0a8658251a52e9dd601b4f04c7910cd1b7705f69de0282354ce7a70e805c70ccbd9da255e80f0b67a037205843346b534ea0a6f7cde4e432523
+  data.tar.gz: 168f4189d2ef90b0cacc141e1b96a969ae9ccc87c0533c3c474557024a3cf274819a5dfafb55c5871d6fcd0a3f24bb9a8d8e1bd2d728a7ac6abfcf3de251aae9

data/README.md

@@ -18,6 +18,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
     * [Sidebar Visibility](#sidebar-visibility)
     * [Menubar](#menubar)
     * [Tabs](#tabs)
+    * [Notifications](#notifications)
     * [Google Analytics](#google-analytics)
     * [Footer](#footer)
     * [Products](#products)
@@ -26,6 +27,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
     * [Favicon](#favicon)
     * [Showcases](#showcases)
     * [Sponsors](#sponsors)
+    * [Gallery](#gallery)
     * [Disqus](#disqus)
 * [Contributing](#contributing)
 * [Development](#development)
@@ -98,6 +100,19 @@ paginate_path: "/blog/page:num"
 
 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. 
+
+```yaml
+layout: post
+title: The post title
+summary: |-
+    This is the custom summary for the post.
+
+    It can be in **markdown format** if required.
+```
+
 #### Social Share Buttons
 
 Share buttons will be displayed on your posts unless you hide them by adding `hide_share_buttons: true` to your config file.
@@ -254,6 +269,13 @@ You can add icons to your tab by passing in the [Font Awesome icon class](https:
 
 If you don't wish to show icons then simply omit the option from your yaml file.
 
+### Notifications
+
+You can include a notification in a page or post using the below include. The message is required but the status defaults to 'is-warning' and the icon defaults to 'fas fa-exclamation-circle', but can be overwritten by setting the values in the includes. The message can also be written in Markdown format.
+
+```liquid
+{% include notification.html message="This is the message for the notification" %}
+```
 
 ### Google Analytics 
 
@@ -516,6 +538,45 @@ title: My Sponsors Page
 sponsors: my_sponsors
 ```
 
+### Gallery
+
+Display a simple image gallery on a page, with image descriptions.
+
+#### Create an image gallery data file
+
+Start by creating a gallery data file using the below format, for example `my_gallery.yml`. 
+
+```yaml
+- title: Image Gallery Title
+  images:
+    - link: https://via.placeholder.com/800x450
+      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
+      ratio: is-16by9
+    - link: https://via.placeholder.com/800x600
+      large_link: https://via.placeholder.com/1200x675
+      alt: The alt text for the image
+      description: The image description
+      ratio: is-4by3
+```
+
+* 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
+
+#### Displaying the gallery
+
+In your pages front matter add a gallery with the datafiles filename without the extension.
+
+```yaml
+layout: page
+title: My Image Gallery
+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: 

data/_includes/callouts.html

@@ -7,7 +7,7 @@
                     {% for callout in callouts.items %}
                         <div class="column is-4 has-text-centered">
                             {% if callout.icon %}
-                            <div class="icon is-large">
+                            <div class="icon callout-icon">
                             {% if callout.icon_brand %}
                                 <i class="fab {{ callout.icon }} fa-4x"></i>
                             {% else %}
@@ -25,7 +25,7 @@
                             {% endif %}
 
                             {% if callout.call_to_action_name %}
-                            <a href="{{ callout.call_to_action_link | absolute_url }}" class="button is-primary">
+                            <a href="{{ callout.call_to_action_link | relative_url }}" class="button is-primary">
                                 {{ callout.call_to_action_name }}
                             </a>
                             {% endif %}

data/_includes/footer.html

@@ -6,7 +6,7 @@
             {% for item in site.data[site.footer_menu] %}
             <div class="column has-text-centered">
                 <div>
-                    <a href="{{ item.link | absolute_url }}" class="link">{{ item.name }}</a>
+                    <a href="{{ item.link | relative_url }}" class="link">{{ item.name }}</a>
                 </div>
             </div>
             {% endfor %}

data/_includes/gallery.html

@@ -0,0 +1,25 @@
+{% if page.gallery %}
+    {% assign galleries=site.data.[page.gallery] %}
+    {% for gallery in galleries %}
+    <div class="columns is-multiline">
+        <div class="column is-12">
+            <p class="title is-3 has-text-centered">{{ gallery.title }}</p>
+        </div>
+        {% for image in gallery.images %}
+        <div class="column is-4-desktop is-6-tablet">
+            <div class="card">
+                <div class="card-image">
+                    {% include image-modal.html ratio=image.ratio link=image.link alt=image.alt large_link=image.large_link %}
+                </div>
+                <div class="card-content">
+                    <div class="content">
+                        {{ image.description | markdownify }}
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endfor %}
+{% endif %}

data/_includes/head.html

@@ -4,8 +4,9 @@
     <title>{{ page.title }} - {{ site.title }}</title>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
     <link rel="shortcut icon" type="image/png"
-          {% if site.favicon %} href="{{ site.favicon | absolute_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
+          {% 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>
     <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

@@ -18,15 +18,15 @@
                 {% for item in site.data.navigation %}
                     {% if item.dropdown %}
                     <div class="navbar-item has-dropdown is-hoverable">
-                        <a href="{{ item.link | absolute_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
+                        <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 %}
-                            <a href="{{ subitem.link | absolute_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
+                            <a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
                             {% endfor %}
                         </div>
                     </div>
                     {% else %}
-                    <a href="{{ item.link | absolute_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
+                    <a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
                     {% endif %}
                 {% endfor %}
                 {% endif %}

data/_includes/hero.html

@@ -4,7 +4,7 @@
             <h1 class="title is-2">{{ page.title }}</h1>
             <p class="subtitle is-3">{{ page.subtitle }}</p>
             {% if page.hero_link %}
-                <a href="{{ page.hero_link | absolute_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
+                <a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
             {% endif %}
         </div>
     </div>

data/_includes/image-modal.html

@@ -0,0 +1,18 @@
+<div x-data="{ open: false }">
+    <a @click="open = true" title="View large image">
+        <figure class="image {{ include.ratio | default: is-16by9 }}">
+            <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
+        </figure>
+    </a>
+    <div class="modal" :class="{ 'is-active': open }">
+        <div class="modal-background" @click="open = false"></div>
+        <div class="modal-content">
+            {% if include.large_link %}
+                <img src="{{ include.large_link | absolute_url }}" alt="{{ include.alt }}">
+            {% else %}
+                <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
+            {% endif %}
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="{ open = false }"></button>
+    </div>
+</div>

data/_includes/menubar.html

@@ -6,11 +6,11 @@
     <ul class="menu-list">
         {% for item in menu.items %}
         <li>
-            <a href="{{ item.link | absolute_url }}" class="{% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
+            <a href="{{ item.link | relative_url }}" class="{% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
             {% if item.items %}
             <ul>
                 {% for subitem in item.items %}
-                <li><a href="{{ subitem.link | absolute_url }}" class="{% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a></li>
+                <li><a href="{{ subitem.link | relative_url }}" class="{% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a></li>
                 {% endfor %}
             </ul>
             {% endif %}

data/_includes/notification.html

@@ -0,0 +1,10 @@
+<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>

data/_includes/post-card.html

@@ -13,7 +13,11 @@
             {% if post.image %}
             <a class="title is-4" href="{{ site.baseurl }}{{ post.url }}">{{ post.title}}</a>
             {% endif %}
-            <p>{{ post.excerpt }}</p>
+            {% if post.summary %}
+                {{ post.summary | markdownify }}
+            {% else %}
+                <p>{{ post.excerpt }}</p>
+            {% endif %}
         </div>
         <div class="has-text-centered">
             <a href="{{ site.baseurl }}{{ post.url }}" class="button is-primary">Read more</a>

data/_includes/showcase.html

@@ -8,7 +8,7 @@
     {% for item in showcase.items %}
         <section class="showcase">
             <figure class="image {% if item.image_ratio %} {{ item.image_ratio }} {% else %} is-16by9 {% endif %}">
-                <img src="{{ item.image | absolute_url }}" />
+                <img src="{{ item.image | relative_url }}" />
             </figure>
             <div class="showcase-content">
                 <div class="columns is-centered">

data/_includes/tabs.html

@@ -5,7 +5,7 @@
     <ul>
     {% for tab in tabs.items %}
         <li {% if tab.link == page.url %} class="is-active" {% endif %}>
-            <a href="{{ tab.link | absolute_url }}">
+            <a href="{{ tab.link | relative_url }}">
                 {% if tab.icon %}
                 <span class="icon is-small"><i class="fas {{ tab.icon }}" aria-hidden="true"></i></span>
                 {% endif %}

data/_includes/youtube.html

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

data/_layouts/default.html

@@ -26,6 +26,7 @@
                     {% include tabs.html %}
                     {% include showcase.html %}
                     {% include sponsors.html %}
+                    {% include gallery.html %}
                     {{ content }}
                 </div>
                 {% if site.posts and page.show_sidebar %}

data/_layouts/product-category.html

@@ -14,7 +14,7 @@ show_sidebar: false
   {% for product in sorted_products %}
   <div class="column is-4-desktop is-6-tablet">
 
-    <a href="{{ product.url | absolute_url }}">
+    <a href="{{ product.url | relative_url }}">
 
       <div class="card">
 

data/_posts/2020-10-17-post-with-summary.md

@@ -0,0 +1,23 @@
+---
+layout: post
+title: Example post with a summary
+summary: |-
+    This is the custom summary for the post.
+
+    It can be in **markdown format** if required.
+---
+
+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. 
+
+If the summary is not set it will use the default excerpt generated by Jekyll.
+
+To use a custom summary, set the `summary` in the post's front matter. 
+
+```yaml
+layout: post
+title: Example post with a summary
+summary: |-
+    This is the custom summary for the post.
+
+    It can be in **markdown format** if required.
+```

data/_sass/_layout.scss

@@ -20,4 +20,18 @@ div.highlight {
 
 .hero-darken {
     background-color: rgba($hero-darken, 0.5);
+}
+
+.content {
+    figure {
+        margin: 0;
+    }
+}
+
+.callout {
+    &-icon {
+        width: 4rem;
+        height: 4rem;
+        margin-bottom: 0.75rem;
+    }
 }

data/_sass/_main.scss

@@ -7,6 +7,8 @@ $primary: #188eac !default;
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
 
+$modal-content-width: 800px;
+
 @import "../node_modules/bulma/bulma.sass";
 $hero-darken: $dark !default;
 

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

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

data/node_modules/bulma-block-list/docs/_config.yml

@@ -0,0 +1,15 @@
+title: Bulma Block List
+description: >- # this means to ignore newlines until "baseurl:"
+  Bulma Block List is a simple scss package extending Bulma with block style list elements
+baseurl: "/bulma-block-list"
+url: "https://www.csrhymes.com"
+gh_sponsor: chrisrhymes
+favicon: /favicon.ico
+google_analytics: UA-49024852-2
+remote_theme: chrisrhymes/bulma-clean-theme
+
+# Build settings
+markdown: kramdown
+plugins:
+  - jekyll-feed
+  - github-pages

data/node_modules/bulma-block-list/docs/_data/menu.yaml

@@ -0,0 +1,20 @@
+- label: Docs
+  items:
+    - name: How To Use
+      link: '/#how-to-use'
+    - name: Alignment
+      link: '/#alignment'
+    - name: Sizes
+      link: '/#sizes'
+    - name: Colours
+      link: '/#colours'
+    - name: Outlined
+      link: '/#outlined'
+    - name: Has Radius
+      link: '/#has-radius'
+    - name: Is Highlighted
+      link: '/#highlighted'
+    - name: List Item Overrides
+      link: '/#list-item-overrides'
+    - name: Combinations
+      link: '/#combinations'

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

@@ -0,0 +1,92 @@
+@charset "utf-8";
+
+$block-list-separator: 0.25rem !default;
+$block-list-highlight-width: 5px !default;
+
+.content {
+    ul.block-list {
+      list-style: none;
+      margin-left: 0;
+    }
+  }
+
+.block-list {
+    list-style: none;
+
+    li {
+        padding: ($gap / 2);
+        background: $light;
+        margin-bottom: $block-list-separator;
+    }
+
+    li.is-left,
+    &.is-left > li {
+        text-align: left;
+    }
+
+
+    li.is-centered,
+    &.is-centered > li {
+        text-align: center;
+    }
+
+    li.is-right,
+    &.is-right > li {
+        text-align: right;
+    }
+
+    li.is-small,
+    &.is-small > li {
+        font-size: $small-font-size;
+        padding: ($gap / 3);
+    }
+
+    li.is-normal,
+    &.is-normal > li {
+        font-size: $body-font-size;
+    }
+
+    li.is-large,
+    &.is-large > li {
+        font-size: $size-large;
+    }
+
+    li.has-radius,
+    &.has-radius > li {
+        border-radius: $radius;
+    }
+
+    li.is-highlighted,
+    &.is-highlighted > li {
+        border-left: $block-list-highlight-width $dark solid;
+    }
+
+    @each $name, $pair in $colors {
+
+        $color: nth($pair, 1);
+        $color-invert: nth($pair, 2);
+
+        li.is-#{$name},
+        &.is-#{$name} > li {
+            background: $color;
+            color: $color-invert;
+        }
+
+        &.is-#{$name} {
+            li.is-outlined,
+            &.is-outlined > li {
+                background: transparent;
+                color: $color;
+                border: 1px solid $color;
+            }
+
+            li.is-highlighted,
+            &.is-highlighted > li {
+                background: transparent;
+                color: $color;
+                border: 1px solid $color;
+                border-left: $block-list-highlight-width $color solid;
+            }
+        }
+    }
+}