Merge fcfa9328eb into f341cc549d

alchemy/static/css/fluidbox.css

@@ -0,0 +1,76 @@
+@-webkit-keyframes fluidboxLoading {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
+  50% {
+    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
+@keyframes fluidboxLoading {
+  0% {
+    transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
+  50% {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
+  100% {
+    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
+.fluidbox {
+  outline: none; }
+
+.fluidbox-overlay {
+  background-color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  cursor: -webkit-zoom-out;
+  cursor: -moz-zoom-out;
+  cursor: zoom-out;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  /* Transition time for overlay is halved to ensure that flickering doesn't happen */
+  transition: all 0.125s ease-in-out 0.125s; }
+
+.fluidbox-wrap {
+  background-position: center center;
+  background-size: cover;
+  margin: 0 auto;
+  position: relative;
+  transition: all 0.25s ease-in-out;
+  /* To prevent flickering, we delay the showing of the image */ }
+  .fluidbox-closed .fluidbox-wrap img {
+    transition: opacity 0 ease-in-out 0.25s; }
+
+.fluidbox-ghost {
+  background-size: 100% 100%;
+  background-position: center center;
+  perspective: 200px;
+  position: absolute;
+  -webkit-transition-property: opacity, -webkit-transform;
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  transition-property: opacity, transform;
+  transition-duration: 0, 0.25s;
+  transition-delay: 0.25s, 0; }
+  .fluidbox-ghost::before {
+    -webkit-animation: fluidboxLoading 1s infinite;
+    animation: fluidboxLoading 1s infinite;
+    /* You can replace this with any color you want, or even a loading gif if desired */
+    background-color: rgba(255, 255, 255, 0.85);
+    content: '';
+    transform-style: preserve-3d;
+    transition: all 0.25s ease-in-out;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20%;
+    padding-bottom: 20%;
+    /* Delay disapparing of loader for graceful transition */
+    transition-delay: 0.125s; }
+  .fluidbox-loading .fluidbox-ghost::before {
+    opacity: 1;
+    transition-delay: 0; }
+  .fluidbox-opened .fluidbox-ghost {
+    transition-delay: 0, 0; }
+
+/*# sourceMappingURL=fluidbox.css.map */

alchemy/static/css/fluidbox.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAMA,kCAIC;EAHA,EAAI;IAAE,iBAAiB,EAAE,2CAA4C;EACrE,GAAK;IAAE,iBAAiB,EAAE,iDAAiD;EAC3E,IAAK;IAAE,iBAAiB,EAAE,uDAAuD;AAElF,0BAIC;EAHA,EAAI;IAAE,SAAS,EAAE,2CAA4C;EAC7D,GAAK;IAAE,SAAS,EAAE,iDAAiD;EACnE,IAAK;IAAE,SAAS,EAAE,uDAAuD;AAI1E,SAAU;EACT,OAAO,EAAE,IAAI;;AAEd,iBAAkB;EACjB,gBAAgB,EAnBI,yBAAiB;EAoBrC,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,EAAE,aAAa;EACrB,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;;EAER,UAAU,EAAE,6BAA6D;;AAE1E,cAAe;EACd,mBAAmB,EAAE,aAAa;EAClC,eAAe,EAAE,KAAK;EACtB,MAAM,EAAE,MAAM;EACd,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,qBAAoC;;EAGhD,mCAAuB;IAAE,UAAU,EAAE,2BAA0C;;AAEhF,eAAgB;EACf,eAAe,EAAE,SAAS;EAC1B,mBAAmB,EAAE,aAAa;EAClC,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,QAAQ;EAClB,2BAA2B,EAAE,0BAA0B;EACvD,wBAAwB,EAAE,uBAAuB;EACjD,sBAAsB,EAAE,qBAAqB;EAC7C,mBAAmB,EAAE,kBAAkB;EACvC,mBAAmB,EAAE,QAAC;EACtB,gBAAgB,EAAE,QAAoB;EAEtC,uBAAU;IACT,iBAAiB,EAAE,2BAA2B;IAC9C,SAAS,EAAE,2BAA2B;;IAEtC,gBAAgB,EA3DG,yBAAiB;IA4DpC,OAAO,EAAE,EAAE;IACX,eAAe,EAAE,WAAW;IAC5B,UAAU,EAAE,qBAAoC;IAChD,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,cAAc,EAAE,GAAG;;IAEnB,gBAAgB,EAAE,MAAsB;EAGzC,yCAA4B;IAC3B,OAAO,EAAE,CAAC;IACV,gBAAgB,EAAE,CAAC;EAGpB,gCAAmB;IAAE,gBAAgB,EAAE,IAAI",
+"sources": ["fluidbox.scss"],
+"names": [],
+"file": "fluidbox.css"
+}

alchemy/static/js/LICENSE.md

@@ -0,0 +1,23 @@
+# Fluidbox
+Replicating and improving the lightbox module seen on Medium with fluid transitions.
+
+## The MIT License (MIT)
+Copyright © 2014 [Terry Mun](http://terrymun.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

alchemy/static/js/license.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Terry Mun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

alchemy/templates/base.html

@@ -27,6 +27,7 @@
     {% endif %}
 
     <link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/fluidbox.css">
 
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -47,6 +48,25 @@
 
   <script src="{{ SITEURL }}/theme/js/jquery.min.js"></script>
   <script src="{{ SITEURL }}/theme/js/bootstrap.min.js"></script>
+  <script src="{{ SITEURL }}/theme/js/jquery.fluidbox.min.js"></script>
+  <script>
+        $('.full-post a[data-fluidbox]').fluidbox();
+        // Trigger recomputing on Flexbox items, sometimes buggy width calculations due to browser recomputation of flex items
+        $('.cols').each(function() {
+            var a = [],
+                $f = $(this).find('a.fluidbox');
+
+            $f.find('img').each(function() {
+                var i = $.Deferred();
+                $(this).load(i.resolve).error(i.resolve);
+                a.push(i);
+            });
+
+            $.when.apply(null, a).done(function() {
+                $f.trigger('recompute');
+            });
+        });
+  </script>
 </body> <!-- 42 -->
 
 </html>