Update docs

agaubatz · Aug 14, 2018 · 53265cb · 53265cb
1 parent 157423f
commit 53265cb
Show file tree

Hide file tree

Showing 23 changed files with 133 additions and 23 deletions.
diff --git a/docs/example/css/master.css b/docs/example/css/master.css
@@ -365,7 +365,37 @@ a:hover {
   width: 100%;
 }
 
-@media (min-width: 800px) {
+.gallery__item a[href$=".gif"] {
+  position: relative;
+
+  display: block;
+}
+
+.gallery__item a[href$=".gif"]::after {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+
+  display: none;
+
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+
+  background: rgba(0, 0, 0, 0.25);
+
+  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");
+
+  align-items: center;
+  justify-content: center;
+}
+
+.gallery__item a[href$=".gif"].show-overlay::after {
+  display: flex;
+}
+
+@media (min-width: 500px) {
   .gallery__item {
     width: 50%;
   }

diff --git a/docs/example/images/header.jpg b/docs/example/images/header.jpg
diff --git a/docs/example/images/pizza-01.jpg.thumb.jpg b/docs/example/images/pizza-01.jpg.thumb.jpg
diff --git a/docs/example/images/pizza-02.jpg.thumb.jpg b/docs/example/images/pizza-02.jpg.thumb.jpg
diff --git a/docs/example/images/pizza-03.jpg.thumb.jpg b/docs/example/images/pizza-03.jpg.thumb.jpg
diff --git a/docs/example/images/pizza-04.jpg.thumb.jpg b/docs/example/images/pizza-04.jpg.thumb.jpg
diff --git a/docs/example/images/pizza-05.jpg.thumb.jpg b/docs/example/images/pizza-05.jpg.thumb.jpg
diff --git a/docs/example/images/pizza.gif.thumb.jpg b/docs/example/images/pizza.gif.thumb.jpg
diff --git a/docs/example/index.html b/docs/example/index.html
@@ -6,12 +6,12 @@
 
     <title>Pizza Burger Studio</title>
 
-    <link rel="shortcut icon" href="images/favicon.ico?t=1533927023047">
+    <link rel="shortcut icon" href="images/favicon.ico?t=1534256235802">
 
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="./css/master.css">
 
-    <!-- Generated by presskit.html 0.10.0 (https://github.com/pixelnest/presskit.html). -->
+    <!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
   </head>
   <body>
     <div class="page grid">
@@ -213,32 +213,32 @@ <h2 id="images">Images</h2>
             <div class="gallery clearfix" id="gallery">
               <div class="gallery__item">
                 <a href="images/pizza-01.jpg">
-                  <img src="images/pizza-01.jpg" alt="pizza-01">
+                  <img src="images/pizza-01.jpg.thumb.jpg" alt="pizza-01">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/pizza-02.jpg">
-                  <img src="images/pizza-02.jpg" alt="pizza-02">
+                  <img src="images/pizza-02.jpg.thumb.jpg" alt="pizza-02">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/pizza-03.jpg">
-                  <img src="images/pizza-03.jpg" alt="pizza-03">
+                  <img src="images/pizza-03.jpg.thumb.jpg" alt="pizza-03">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/pizza-04.jpg">
-                  <img src="images/pizza-04.jpg" alt="pizza-04">
+                  <img src="images/pizza-04.jpg.thumb.jpg" alt="pizza-04">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/pizza-05.jpg">
-                  <img src="images/pizza-05.jpg" alt="pizza-05">
+                  <img src="images/pizza-05.jpg.thumb.jpg" alt="pizza-05">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/pizza.gif">
-                  <img src="images/pizza.gif" alt="pizza">
+                  <img src="images/pizza.gif.thumb.jpg" alt="pizza">
                 </a>
               </div>
             </div>
@@ -380,8 +380,8 @@ <h2 id="contact">Contact</h2>
     <script src="./js/masonry.min.js"></script>
     <script src="./js/imagesloaded.min.js"></script>
     <script>
-      // Add masonry layout on the galleries.
       document.addEventListener('DOMContentLoaded', function onContentLoaded() {
+        // Add masonry layout on the galleries.
         var galleries = document.querySelectorAll('.gallery');
 
         for (var i = 0; i < galleries.length; i++) {
@@ -395,7 +395,47 @@ <h2 id="contact">Contact</h2>
             });
           })(i);
         }
-      })
+
+        // Add mini-player to gifs.
+        var gifLinks = document.querySelectorAll('a[href$=".gif"]');
+        for (var i = 0; i < gifLinks.length; i++) {
+          (function (index) {
+            var link = gifLinks[index];
+            var img = link.querySelector('img');
+
+            // Don't add the mini-player if no thumbnail.
+            // It's already a gif, so no need to turn it on.
+            if (img.src.indexOf('.thumb.jpg') === -1) {
+              return
+            }
+
+            link.className = 'show-overlay'
+
+            link.onclick = function (e) {
+              // Make it work on IE8.
+              if (e.preventDefault) {
+                const openLinkInBackground = e.ctrlKey || e.metaKey;
+
+                // Stop default behavior, except if ctrl/cmd modifier is used.
+                // In this case, we want the link to go through and open
+                // its target in a background tab.
+                if (!openLinkInBackground) e.preventDefault();
+                e.stopPropagation();
+              } else {
+                // We don't care for the special background tab behavior on old IE.
+                e.returnValue = false;
+              }
+
+              // Remove overlay and remove thumbnail section of the image.
+              link.className = '';
+              img.src = img.src.replace('.thumb.jpg', '');
+
+              // Remove event listener after first trigger.
+              link.onclick = null;
+            }
+          }(i));
+        }
+      });
     </script>
 
     <script src="./js/hamburger.js"></script>

diff --git a/docs/example/product/images/burger-01.jpg.thumb.jpg b/docs/example/product/images/burger-01.jpg.thumb.jpg
diff --git a/docs/example/product/images/burger-02.jpg.thumb.jpg b/docs/example/product/images/burger-02.jpg.thumb.jpg
diff --git a/docs/example/product/images/burger-03.jpg.thumb.jpg b/docs/example/product/images/burger-03.jpg.thumb.jpg
diff --git a/docs/example/product/images/burger-04.jpg.thumb.jpg b/docs/example/product/images/burger-04.jpg.thumb.jpg
diff --git a/docs/example/product/images/header.jpg b/docs/example/product/images/header.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-01.jpg b/docs/example/product/images/wallpapers/bagel-01.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-01.jpg.thumb.jpg b/docs/example/product/images/wallpapers/bagel-01.jpg.thumb.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-02.jpg b/docs/example/product/images/wallpapers/bagel-02.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-02.jpg.thumb.jpg b/docs/example/product/images/wallpapers/bagel-02.jpg.thumb.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-03.jpg b/docs/example/product/images/wallpapers/bagel-03.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-03.jpg.thumb.jpg b/docs/example/product/images/wallpapers/bagel-03.jpg.thumb.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-04.jpg b/docs/example/product/images/wallpapers/bagel-04.jpg
diff --git a/docs/example/product/images/wallpapers/bagel-04.jpg.thumb.jpg b/docs/example/product/images/wallpapers/bagel-04.jpg.thumb.jpg
diff --git a/docs/example/product/index.html b/docs/example/product/index.html
@@ -6,12 +6,12 @@
 
     <title>My Super Game - Pizza Burger Studio</title>
 
-    <link rel="shortcut icon" href="images/favicon.ico?t=1533927022910">
+    <link rel="shortcut icon" href="images/favicon.ico?t=1534256235503">
 
     <link rel="stylesheet" href="../css/normalize.css">
     <link rel="stylesheet" href="../css/master.css">
 
-    <!-- Generated by presskit.html 0.10.0 (https://github.com/pixelnest/presskit.html). -->
+    <!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
   </head>
   <body>
     <div class="page grid">
@@ -240,22 +240,22 @@ <h2 id="images">Images</h2>
             <div class="gallery clearfix" id="gallery">
               <div class="gallery__item">
                 <a href="images/burger-01.jpg">
-                  <img src="images/burger-01.jpg" alt="burger-01">
+                  <img src="images/burger-01.jpg.thumb.jpg" alt="burger-01">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/burger-02.jpg">
-                  <img src="images/burger-02.jpg" alt="burger-02">
+                  <img src="images/burger-02.jpg.thumb.jpg" alt="burger-02">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/burger-03.jpg">
-                  <img src="images/burger-03.jpg" alt="burger-03">
+                  <img src="images/burger-03.jpg.thumb.jpg" alt="burger-03">
                 </a>
               </div>
               <div class="gallery__item">
                 <a href="images/burger-04.jpg">
-                  <img src="images/burger-04.jpg" alt="burger-04">
+                  <img src="images/burger-04.jpg.thumb.jpg" alt="burger-04">
                 </a>
               </div>
             </div>
@@ -265,22 +265,22 @@ <h3 class="capitalize" id="gallery-wallpapers">wallpapers</h3>
               <div class="gallery clearfix">
                 <div class="gallery__item">
                   <a href="images/wallpapers/bagel-01.jpg">
-                    <img src="images/wallpapers/bagel-01.jpg" alt="bagel-01">
+                    <img src="images/wallpapers/bagel-01.jpg.thumb.jpg" alt="bagel-01">
                   </a>
                 </div>
                 <div class="gallery__item">
                   <a href="images/wallpapers/bagel-02.jpg">
-                    <img src="images/wallpapers/bagel-02.jpg" alt="bagel-02">
+                    <img src="images/wallpapers/bagel-02.jpg.thumb.jpg" alt="bagel-02">
                   </a>
                 </div>
                 <div class="gallery__item">
                   <a href="images/wallpapers/bagel-03.jpg">
-                    <img src="images/wallpapers/bagel-03.jpg" alt="bagel-03">
+                    <img src="images/wallpapers/bagel-03.jpg.thumb.jpg" alt="bagel-03">
                   </a>
                 </div>
                 <div class="gallery__item">
                   <a href="images/wallpapers/bagel-04.jpg">
-                    <img src="images/wallpapers/bagel-04.jpg" alt="bagel-04">
+                    <img src="images/wallpapers/bagel-04.jpg.thumb.jpg" alt="bagel-04">
                   </a>
                 </div>
               </div>
@@ -504,8 +504,8 @@ <h2 id="contact">Contact</h2>
     <script src="../js/masonry.min.js"></script>
     <script src="../js/imagesloaded.min.js"></script>
     <script>
-      // Add masonry layout on the galleries.
       document.addEventListener('DOMContentLoaded', function onContentLoaded() {
+        // Add masonry layout on the galleries.
         var galleries = document.querySelectorAll('.gallery');
 
         for (var i = 0; i < galleries.length; i++) {
@@ -519,7 +519,47 @@ <h2 id="contact">Contact</h2>
             });
           })(i);
         }
-      })
+
+        // Add mini-player to gifs.
+        var gifLinks = document.querySelectorAll('a[href$=".gif"]');
+        for (var i = 0; i < gifLinks.length; i++) {
+          (function (index) {
+            var link = gifLinks[index];
+            var img = link.querySelector('img');
+
+            // Don't add the mini-player if no thumbnail.
+            // It's already a gif, so no need to turn it on.
+            if (img.src.indexOf('.thumb.jpg') === -1) {
+              return
+            }
+
+            link.className = 'show-overlay'
+
+            link.onclick = function (e) {
+              // Make it work on IE8.
+              if (e.preventDefault) {
+                const openLinkInBackground = e.ctrlKey || e.metaKey;
+
+                // Stop default behavior, except if ctrl/cmd modifier is used.
+                // In this case, we want the link to go through and open
+                // its target in a background tab.
+                if (!openLinkInBackground) e.preventDefault();
+                e.stopPropagation();
+              } else {
+                // We don't care for the special background tab behavior on old IE.
+                e.returnValue = false;
+              }
+
+              // Remove overlay and remove thumbnail section of the image.
+              link.className = '';
+              img.src = img.src.replace('.thumb.jpg', '');
+
+              // Remove event listener after first trigger.
+              link.onclick = null;
+            }
+          }(i));
+        }
+      });
     </script>
 
     <script src="../js/hamburger.js"></script>