bulma-clean-theme 0.9.1 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a22759881c56ee79be3fa1ae67957044ccc68b4754372f2ee716dac227da6478
-  data.tar.gz: 9815893be1fd2952dab4db36eb11a85cd14437219c36a1fa6ed05be9fbccd2fd
+  metadata.gz: f3c61d847f693897cdbfddf0da1554a22a53eed4d4824e560c8747e9ab360ba0
+  data.tar.gz: c618eddbb02cad70ac06b8428ed398a345d9e0d79e2197d94345ee52196bd2fa
 SHA512:
-  metadata.gz: 7a5be72f27ea377e38efa66bddad991a83b4024f87a14c31f110c20f3a1bbea7181c11616920f22a5d9460999f5ad707ba7c52720cf27d9696bed513b0c25fd5
-  data.tar.gz: 324b9660f804d6e2ec1a1b353efa70d643d70393b357a4ddabe7a1dd8561c3c43a43388c3eeda51857e6f620b1a8e14bdf0836ec4c84248343f2726a467d5502
+  metadata.gz: 9d544f037cb07a00c4f21049c73da0a3d586ee67486180bca86de7393bd760e4c392e91ba441e26010417bce43386631048d96f59313b1ef0636fc042d1a109e
+  data.tar.gz: 176fd2160f4189f21ae5646b56fb8693a1bf76d9b9405c78f6dc6095973a09f9adeda903fa3a5f7c81295e7ca8083e4a7227b55c1a972fdafd1fdebe7fd5faf9

data/README.md

@@ -529,11 +529,13 @@ Start by creating a gallery data file using the below format, for example `my_ga
 - 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
@@ -542,6 +544,7 @@ 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
 
 #### Displaying the gallery
 

data/_includes/gallery.html

@@ -9,9 +9,7 @@
         <div class="column is-4-desktop is-6-tablet">
             <div class="card">
                 <div class="card-image">
-                    <figure class="image {{ image.ratio | default: is-16by9 }}">
-                        <img src="{{ image.link | absolute_url }}" alt="{{ image.alt }}">
-                    </figure>
+                    {% 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">

data/_includes/head.html

@@ -6,6 +6,7 @@
     <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>
     <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/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/_sass/_layout.scss

@@ -20,4 +20,10 @@ div.highlight {
 
 .hero-darken {
     background-color: rgba($hero-darken, 0.5);
+}
+
+.content {
+    figure {
+        margin: 0;
+    }
 }

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;
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-clean-theme
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.9.2
 platform: ruby
 authors:
 - chrisrhymes
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-23 00:00:00.000000000 Z
+date: 2020-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -155,6 +155,7 @@ files:
 - _includes/head.html
 - _includes/header.html
 - _includes/hero.html
+- _includes/image-modal.html
 - _includes/latest-posts.html
 - _includes/menubar.html
 - _includes/pagination.html