jekyll-theme-simplex 0.9.5.1 → 0.9.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '018a6a5f2af74af998326fc1916d92c5064a6225a1488ed6e7d89efbcf643caa'
-  data.tar.gz: 63ede6dc44bc801e35e7bb7db32135004f78fd55f0b6099c99cf0f63f532455a
+  metadata.gz: 1251d5010926fa8ab805effd541c8e71dbbcac4a1ccfa269c6b6135a8cf5c385
+  data.tar.gz: cfd4c10677d13731ee0613356daf35086dbac9e0c850d3882be9f6c60a03c880
 SHA512:
-  metadata.gz: b42d2ba7eb31fc8df60ff8c299a6e8a48f511e3261307f0eba3eb583df676e2c8e519f9239a8dea9e4b659f2cdfefaec7b9bca4d0d8ca9a828828b2c72c9a4b5
-  data.tar.gz: fcf9a760f971c3f98c7133432962d84bb94960cbff3b2c5489f7c693b37f1fdb1f73e3a8ba6cfdf413b787018691b644e43b9e9abaa2c68a4b4da56057de3543
+  metadata.gz: f08231a46883310d187e14de416fc8977361512d339ddae28d8885758c061cc58c00619d2d7ca815c3cd973844ce79b6e8c0db65f902bddba374a27f4d432ec4
+  data.tar.gz: 7ea776e9e5bf9f0e179c4b391f7b9a04994b07f4aaff967fa93a4e8082ca6afb6d3567d6e35cece214266fb5c3508d3ad2fb4e52c01a0182510e8653036c53b0

data/README.md

@@ -16,6 +16,12 @@ A *simple* yet neat blogging theme. Developed for the [golas blog](https://golas
 ### Dark mode
 ![Dark mode preview](previewDark.gif)
 
+### Buttons
+![Buttons preview](previewButtons.png)
+
+### Lity Lightbox 
+Supports images, videos, iFrames and more. See below for syntax.
+
 ## ℹ Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -120,10 +126,50 @@ author: andy #Author's nick.
 Your markdown content here.
 ```
 
-### Syntax highlighting
-The theme uses Pygments CSS files created by [@richleland](https://github.com/richleland). If you want to modify the highlighting styles, just download different CSS or create your own - see [Jekyll docs](https://jekyllrb.com/docs/liquid/tags/#stylesheets-for-syntax-highlighting).
+### ⚡ Syntax highlighting
+The theme uses Pygments CSS created by [@richleland](https://github.com/richleland). If you want to modify the highlighting styles, just download different CSS or create your own - see [Jekyll docs](https://jekyllrb.com/docs/liquid/tags/#stylesheets-for-syntax-highlighting).
+
+Note - `@media` is used to manage different styles for light and dark web browser mode. See `_variables.scss` file for details.
+
+### 📷 Inserting pictures
+Classic Markdown syntax is supported. However, to be able to use the lightbox feature, you have to use HTML syntax. Minimal example:
+```html
+<a href="/assets/example.jpg" data-lity>
+  <img src="/assets/example_thumbnail.jpg"/>
+</a>
+```
+
+To provide image description use this syntax:
+```html
+<div class="sx-picture">
+  <a href="/assets/example.jpg" data-lity>
+    <img src="/assets/example_thumbnail.jpg"/>
+  </a>
+  <span class="sx-subtitle">My picture description.</span>
+</div>
+```
+
+**Do not forget the `data-lity` attribute.**
+
+#### ↔ Centering
+To center pictures, put the code inside a `div` with `sx-center` class like this:
+```html
+<div markdown=1 class="sx-center">
+  ![My picture](/assets/example.jpg)
+</div>
+```
+
+### 🔘 Buttons
+Buttons can be inserted with the following syntax. Just replace `theme` with `red`, `green`, `blue`, `orange`, `purple` or `brown`, specify the target link in `href` attribute and the icon in `src` attribute.
+```html
+<div class='sx-button'>
+  <a href='https://your.link.here.example.com/' class='sx-button__content theme'>
+    <img src='/assets/img/icons/example_icon.svg'/>#{text}
+  </a>
+</div>
+```
 
-Note - `@media` is used to supply different styles for light and dark browser mode. See `_variables.scss` file for details.
+Markdown attribute can be omitted if you don't use markdown inside the block (e.g. by using the lightbox syntax).
 
 ### ℹ Notes
 [1] Hue can be either one of the predefined colors or any of the CSS `color` attribute supported values (hex, rgb...).
@@ -151,6 +197,17 @@ You can use following predefined colors:
 ```
 These colors are CSS variables, usage: `var(--var-name)`
 
+## Add-ons
+Add-ons are distributed as Jekyll plugins. Just download any desired `.rb` file from the repository `_plugin` folder and put it in your `_plugin` folder.
+
+### Buttons (button.rb)
+Adds a tag to simplify insertion of buttons:
+```
+{% button red|https://www.example.com/|/assets/img/icons/cog.svg %}
+Download binary
+{% endbutton %}
+```
+
 ## 🤝 Contributing
  
 Bug reports and pull requests are welcome on [GitHub](https://github.com/andreondra/jekyll-theme-simplex).
@@ -164,9 +221,13 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-simplex.gemspec` accordingly.
 
-## Credit
+## Credits
 Includes icons by [uxwing](https://uxwing.com/).
 
+The lightbox feature is provided by [Lity](https://github.com/jsor/lity) licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
+Uses [jQuery](https://github.com/jquery/jquery) JavaScript plugin licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
 ## ⚖ License
 © Ondrej Golasowski. The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 

data/_includes/head.html

@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="{{ site.url }}/assets/fonts/fonts.css"/>
 <link rel="stylesheet" href="{{ site.url }}/assets/style.css"/>
+<link rel="stylesheet" href="{{ site.url }}/assets/js/lity.min.css"/>
 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

data/_includes/scripts.html

@@ -1,2 +1,3 @@
 <script src="{{ site.url }}/assets/js/jquery.slim.min.js"></script>
+<script src="{{ site.url }}/assets/js/lity.min.js"></script>
 <script src="{{ site.url }}/assets/js/tools.js"></script>

data/_sass/_global.scss

@@ -120,6 +120,7 @@ table:not([class]){
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: $t-smooth;
 
         &.red{background-color: var(--c-themeHueRed);}
         &.orange{background-color: var(--c-themeHueOrange);}
@@ -133,5 +134,24 @@ table:not([class]){
             height: 1rem;
             filter: brightness(0) invert(1);
         }
+
+        &:hover{
+            letter-spacing: .05rem;
+        }
     }
 }
+
+.sx-subtitle{
+    font-style: italic;
+    color: var(--c-subtitle);
+}
+
+.sx-picture{
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    margin: 1.5rem 0;
+}

data/_sass/_page.scss

@@ -14,4 +14,8 @@
         justify-content: flex-start;
         align-items: center;
     }
+
+    img{
+        max-width: 100%;
+    }
 }

data/_sass/_post.scss

@@ -92,6 +92,9 @@
         h1{
             font-size: 1.8rem;
         }
+        img{
+            max-width: 100%;
+        }
     }
 
     &__navigator{

data/_sass/_variables.scss

@@ -74,6 +74,8 @@
 
     --c-tableBorder: var(--c-themePrimaryDark);
 
+    --c-subtitle: var(--c-themeTerniaryDark);
+
     //Syntax highlighting.
     .highlight .hll { background-color: #ffffcc }
     .highlight .c { color: #8f5902; font-style: italic } /* Comment */
@@ -190,6 +192,8 @@
 
         --c-tableBorder: var(--c-themePrimaryLight);
 
+        --c-subtitle: var(--c-themeTerniaryLight);
+
         //Syntax highlighting.
         .highlight pre { background-color: #272822; }
         .highlight .hll { background-color: #272822; }

data/assets/js/lity.min.css

@@ -0,0 +1,3 @@
+/*! Lity - v2.4.1 - 2020-04-26
+* http://sorgalla.com/lity/
+* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}

data/assets/js/lity.min.js

@@ -0,0 +1,5 @@
+/*! Lity - v2.4.1 - 2020-04-26
+* http://sorgalla.com/lity/
+* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */
+
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof module&&"object"==typeof module.exports?module.exports=b(a,require("jquery")):a.lity=b(a,a.jQuery||a.Zepto)}("undefined"!=typeof window?window:this,function(a,b){"use strict";function c(a){var b=B();return N&&a.length?(a.one(N,b.resolve),setTimeout(b.resolve,500)):b.resolve(),b.promise()}function d(a,c,d){if(1===arguments.length)return b.extend({},a);if("string"==typeof c){if(void 0===d)return void 0===a[c]?null:a[c];a[c]=d}else b.extend(a,c);return this}function e(a){for(var b,c=decodeURI(a.split("#")[0]).split("&"),d={},e=0,f=c.length;e<f;e++)c[e]&&(b=c[e].split("="),d[b[0]]=b[1]);return d}function f(a,c){return a+(a.indexOf("?")>-1?"&":"?")+b.param(c)}function g(a,b){var c=a.indexOf("#");return-1===c?b:(c>0&&(a=a.substr(c)),b+a)}function h(a){return b('<span class="lity-error"></span>').append(a)}function i(a,c){var d=c.opener()&&c.opener().data("lity-desc")||"Image with no description",e=b('<img src="'+a+'" alt="'+d+'"/>'),f=B(),g=function(){f.reject(h("Failed loading image"))};return e.on("load",function(){if(0===this.naturalWidth)return g();f.resolve(e)}).on("error",g),f.promise()}function j(a,c){var d,e,f;try{d=b(a)}catch(a){return!1}return!!d.length&&(e=b('<i style="display:none !important"></i>'),f=d.hasClass("lity-hide"),c.element().one("lity:remove",function(){e.before(d).remove(),f&&!d.closest(".lity-content").length&&d.addClass("lity-hide")}),d.removeClass("lity-hide").after(e))}function k(a){var c=J.exec(a);return!!c&&o(g(a,f("https://www.youtube"+(c[2]||"")+".com/embed/"+c[4],b.extend({autoplay:1},e(c[5]||"")))))}function l(a){var c=K.exec(a);return!!c&&o(g(a,f("https://player.vimeo.com/video/"+c[3],b.extend({autoplay:1},e(c[4]||"")))))}function m(a){var c=M.exec(a);return!!c&&(0!==a.indexOf("http")&&(a="https:"+a),o(g(a,f("https://www.facebook.com/plugins/video.php?href="+a,b.extend({autoplay:1},e(c[4]||""))))))}function n(a){var b=L.exec(a);return!!b&&o(g(a,f("https://www.google."+b[3]+"/maps?"+b[6],{output:b[6].indexOf("layer=c")>0?"svembed":"embed"})))}function o(a){return'<div class="lity-iframe-container"><iframe frameborder="0" allowfullscreen allow="autoplay; fullscreen" src="'+a+'"/></div>'}function p(){return z.documentElement.clientHeight?z.documentElement.clientHeight:Math.round(A.height())}function q(a){var b=v();b&&(27===a.keyCode&&b.options("esc")&&b.close(),9===a.keyCode&&r(a,b))}function r(a,b){var c=b.element().find(G),d=c.index(z.activeElement);a.shiftKey&&d<=0?(c.get(c.length-1).focus(),a.preventDefault()):a.shiftKey||d!==c.length-1||(c.get(0).focus(),a.preventDefault())}function s(){b.each(D,function(a,b){b.resize()})}function t(a){1===D.unshift(a)&&(C.addClass("lity-active"),A.on({resize:s,keydown:q})),b("body > *").not(a.element()).addClass("lity-hidden").each(function(){var a=b(this);void 0===a.data(F)&&a.data(F,a.attr(E)||null)}).attr(E,"true")}function u(a){var c;a.element().attr(E,"true"),1===D.length&&(C.removeClass("lity-active"),A.off({resize:s,keydown:q})),D=b.grep(D,function(b){return a!==b}),c=D.length?D[0].element():b(".lity-hidden"),c.removeClass("lity-hidden").each(function(){var a=b(this),c=a.data(F);c?a.attr(E,c):a.removeAttr(E),a.removeData(F)})}function v(){return 0===D.length?null:D[0]}function w(a,c,d,e){var f,g="inline",h=b.extend({},d);return e&&h[e]?(f=h[e](a,c),g=e):(b.each(["inline","iframe"],function(a,b){delete h[b],h[b]=d[b]}),b.each(h,function(b,d){return!d||(!(!d.test||d.test(a,c))||(f=d(a,c),!1!==f?(g=b,!1):void 0))})),{handler:g,content:f||""}}function x(a,e,f,g){function h(a){k=b(a).css("max-height",p()+"px"),j.find(".lity-loader").each(function(){var a=b(this);c(a).always(function(){a.remove()})}),j.removeClass("lity-loading").find(".lity-content").empty().append(k),m=!0,k.trigger("lity:ready",[l])}var i,j,k,l=this,m=!1,n=!1;e=b.extend({},H,e),j=b(e.template),l.element=function(){return j},l.opener=function(){return f},l.options=b.proxy(d,l,e),l.handlers=b.proxy(d,l,e.handlers),l.resize=function(){m&&!n&&k.css("max-height",p()+"px").trigger("lity:resize",[l])},l.close=function(){if(m&&!n){n=!0,u(l);var a=B();if(g&&(z.activeElement===j[0]||b.contains(j[0],z.activeElement)))try{g.focus()}catch(a){}return k.trigger("lity:close",[l]),j.removeClass("lity-opened").addClass("lity-closed"),c(k.add(j)).always(function(){k.trigger("lity:remove",[l]),j.remove(),j=void 0,a.resolve()}),a.promise()}},i=w(a,l,e.handlers,e.handler),j.attr(E,"false").addClass("lity-loading lity-opened lity-"+i.handler).appendTo("body").focus().on("click","[data-lity-close]",function(a){b(a.target).is("[data-lity-close]")&&l.close()}).trigger("lity:open",[l]),t(l),b.when(i.content).always(h)}function y(a,c,d){a.preventDefault?(a.preventDefault(),d=b(this),a=d.data("lity-target")||d.attr("href")||d.attr("src")):d=b(d);var e=new x(a,b.extend({},d.data("lity-options")||d.data("lity"),c),d,z.activeElement);if(!a.preventDefault)return e}var z=a.document,A=b(a),B=b.Deferred,C=b("html"),D=[],E="aria-hidden",F="lity-"+E,G='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),iframe,object,embed,[contenteditable],[tabindex]:not([tabindex^="-"])',H={esc:!0,handler:null,handlers:{image:i,inline:j,youtube:k,vimeo:l,googlemaps:n,facebookvideo:m,iframe:o},template:'<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button></div></div></div>'},I=/(^data:image\/)|(\.(png|jpe?g|gif|svg|webp|bmp|ico|tiff?)(\?\S*)?$)/i,J=/(youtube(-nocookie)?\.com|youtu\.be)\/(watch\?v=|v\/|u\/|embed\/?)?([\w-]{11})(.*)?/i,K=/(vimeo(pro)?.com)\/(?:[^\d]+)?(\d+)\??(.*)?$/,L=/((maps|www)\.)?google\.([^\/\?]+)\/?((maps\/?)?\?)(.*)/i,M=/(facebook\.com)\/([a-z0-9_-]*)\/videos\/([0-9]*)(.*)?$/i,N=function(){var a=z.createElement("div"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return b[c];return!1}();return i.test=function(a){return I.test(a)},y.version="2.4.1",y.options=b.proxy(d,y,H),y.handlers=b.proxy(d,y,H.handlers),y.current=v,b(z).on("click.lity","[data-lity]",y),y});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-simplex
 version: !ruby/object:Gem::Version
-  version: 0.9.5.1
+  version: 0.9.6
 platform: ruby
 authors:
 - Ondrej Golasowski
@@ -72,7 +72,6 @@ files:
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
-- _plugins/button.rb
 - _sass/_feed.scss
 - _sass/_footer.scss
 - _sass/_global.scss
@@ -101,7 +100,6 @@ files:
 - assets/fonts/RobotoSlab-Regular.woff
 - assets/fonts/RobotoSlab-Regular.woff2
 - assets/fonts/fonts.css
-- assets/hqdefault.jpg
 - assets/img/icons/arrow_left.svg
 - assets/img/icons/arrow_right.svg
 - assets/img/icons/brush.svg
@@ -116,6 +114,8 @@ files:
 - assets/img/icons/simplex_logo.svg
 - assets/img/icons/web.svg
 - assets/js/jquery.slim.min.js
+- assets/js/lity.min.css
+- assets/js/lity.min.js
 - assets/js/tools.js
 - assets/style.scss
 homepage: https://github.com/andreondra/jekyll-theme-simplex

data/_plugins/button.rb

@@ -1,26 +0,0 @@
-module Jekyll
-    class ButtonTagBlock < Liquid::Block
-  
-        def initialize(tag_name, text, tokens)
-            super
-            @input = text
-        end
-
-        def render(context)
-            
-            input_split = split_params(@input)
-            theme = input_split[0].strip
-            link = input_split[1].strip
-            icon = input_split[2].strip
-
-            text = super
-            "<div class='sx-button'><a href='#{link}' class='sx-button__content #{theme}'><img src='#{icon}'/>#{text}</a></div>"
-        end
-
-        def split_params(params)
-            params.split("|")
-        end
-    end
-end
-  
-Liquid::Template.register_tag('button', Jekyll::ButtonTagBlock)