diff --git a/sass/baguetteBox.scss b/sass/baguetteBox.scss
new file mode 100644
index 0000000..5fa0760
--- /dev/null
+++ b/sass/baguetteBox.scss
@@ -0,0 +1,196 @@
+/*!
+ * baguetteBox.js
+ * @author feimosi
+ * @version %%INJECT_VERSION%%
+ * @url https://github.com/feimosi/baguetteBox.js
+ */
+
+#baguetteBox-overlay {
+ display: none;
+ opacity: 0;
+ position: fixed;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000000;
+ background-color: #222;
+ background-color: rgba(0,0,0,.8);
+ transition: opacity .5s ease;
+
+ &.visible {
+ opacity: 1;
+ }
+
+ .full-image {
+ display: inline-block;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+
+ figure {
+ display: inline;
+ margin: 0; // needed for mobile
+ height: 100%; // Opera 12 image stretching fix
+ }
+
+ img {
+ // IE8 fix
+ display: inline-block;
+ width: auto;
+ height: auto;
+
+ max-height: 100%;
+ max-width: 100%;
+ vertical-align: middle;
+ box-shadow: 0 0 8px rgba(0,0,0,.6);
+ }
+
+ figcaption {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ line-height: 1.8;
+ white-space: normal;
+ color: #ccc;
+ background-color: #000;
+ background-color: rgba(0,0,0,.6);
+ font-family: sans-serif;
+ }
+
+ &:before {
+ content: "";
+ display: inline-block;
+ height: 50%;
+ width: 1px;
+ margin-right:-1px;
+ }
+ }
+}
+
+#baguetteBox-slider {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ white-space: nowrap;
+ transition: left .4s ease, transform .4s ease;
+
+ &.bounce-from-right {
+ animation: bounceFromRight .4s ease-out;
+ }
+
+ &.bounce-from-left {
+ animation: bounceFromLeft .4s ease-out;
+ }
+}
+
+@keyframes bounceFromRight{
+ 0% { margin-left: 0; }
+ 50% { margin-left: -30px; }
+ 100% { margin-left: 0; }
+}
+
+@keyframes bounceFromLeft{
+ 0% { margin-left: 0; }
+ 50% { margin-left: 30px; }
+ 100% { margin-left: 0; }
+}
+
+%arrow-button {
+ top: 50%;
+ top: calc(50% - 30px);
+ width: 44px;
+ height: 60px;
+}
+
+.baguetteBox-button {
+ position: absolute;
+ cursor: pointer;
+ outline: none;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ border-radius: 15%;
+ background-color: #323232;
+ background-color: rgba(50,50,50,.5);
+ color: #ddd;
+ font: 1.6em sans-serif;
+ transition: background-color .4s ease;
+
+ &:focus,
+ &:hover {
+ background-color: rgba(50,50,50,.9);
+ }
+
+ &#next-button {
+ @extend %arrow-button;
+ right: 2%;
+ }
+
+ &#previous-button {
+ @extend %arrow-button;
+ left: 2%;
+ }
+
+ &#close-button {
+ top: 20px;
+ right: 2%;
+ right: calc(2% + 6px);
+ width: 30px;
+ height: 30px;
+ }
+
+ // Firefox fix
+ svg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+}
+
+/*
+ Preloader
+ Borrowed from http://tobiasahlin.com/spinkit/
+*/
+
+.baguetteBox-spinner {
+ width: 40px;
+ height: 40px;
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -20px;
+ margin-left: -20px;
+}
+
+.baguetteBox-double-bounce1,
+.baguetteBox-double-bounce2 {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: #fff;
+ opacity: .6;
+ position: absolute;
+ top: 0;
+ left: 0;
+ animation: bounce 2s infinite ease-in-out;
+}
+
+.baguetteBox-double-bounce2 {
+ animation-delay: -1s;
+}
+
+@keyframes bounce {
+ 0%, 100% {
+ transform: scale(0);
+ } 50% {
+ transform: scale(1);
+ }
+}
diff --git a/sass/main.scss b/sass/main.scss
index a1deaed..09a2bd9 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,4 +1,5 @@
@import "../themes/tabi/sass/main.scss";
+@import "./baguetteBox.scss";
// main.scss
@@ -34,20 +35,12 @@ article {
}
-.gallery {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 4fr));
- grid-auto-rows: auto;
- grid-auto-flow: dense;
- gap: 18px;
- margin-top: 4vmin;
- padding: 20px 0;
-}
-
.gallery img {
- border-radius: 1rem;
- box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
- transition: transform 200ms ease;
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ cursor: zoom-in;
}
.gallery img:hover {
diff --git a/themes/tabi/static/js/baguetteBox.min.js b/themes/tabi/static/js/baguetteBox.min.js
new file mode 100644
index 0000000..14bdbcb
--- /dev/null
+++ b/themes/tabi/static/js/baguetteBox.min.js
@@ -0,0 +1,7 @@
+/*!
+ * baguetteBox.js
+ * @author feimosi
+ * @version 1.12.0
+ * @url https://github.com/feimosi/baguetteBox.js
+ */
+!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.baguetteBox=t()}(this,function(){"use strict";var s,l,u,c,d,f='',g='',p='',b={},v={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)",closeX:p,leftArrow:f,rightArrow:g},m={},h=[],o=0,n=!1,i={},a=!1,y=/.+\.(gif|jpe?g|png|webp)/i,w={},k=[],r=null,x=function(e){-1!==e.target.id.indexOf("baguette-img")&&X()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,q()},C=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},B=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,X()},T=function(e){i.count++,1',b.captions&&r){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=r,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",s),c.alt=a&&a.alt||"",b.titleTag&&r&&(c.title=r),l.appendChild(c),b.async&&n&&n()}}function j(){return D(o+1)}function q(){return D(o-1)}function D(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(Y(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||Y(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||Y(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n
{% include "partials/footer.html" %}
+
+
+
+
+