art page wip

Author: simondotm

_includes/team.html

@@ -1,4 +1,8 @@
 
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">
+    new WOW().init();
+</script>
 <section id="contact">
 
 
@@ -52,4 +56,105 @@ <h6>{{post.bio}}</h6>
         </div><!--end row-->
     </div>
 
+    <style>
+        #art {
+            /* Prevent vertical gaps */
+            line-height: 0;
+            
+            -webkit-column-count: 6;
+            -webkit-column-gap:   2px;
+            -moz-column-count:    6;
+            -moz-column-gap:      2px;
+            column-count:         6;
+            column-gap:           2px;  
+        }
+
+        #art img {
+            /* Just in case there are inline attributes */
+            width: 100% !important;
+            height: auto !important;
+        }
+
+        @media (max-width: 1200px) {
+            #art {
+                -moz-column-count:    6;
+                -webkit-column-count: 6;
+                column-count:         6;
+            }
+        }
+        @media (max-width: 1000px) {
+            #art {
+                -moz-column-count:    5;
+                -webkit-column-count: 5;
+                column-count:         5;
+            }
+        }
+        @media (max-width: 800px) {
+            #art {
+                -moz-column-count:    4;
+                -webkit-column-count: 4;
+                column-count:         4;
+            }
+        }
+        @media (max-width: 400px) {
+            #art {
+                -moz-column-count:    3;
+                -webkit-column-count: 3;
+                column-count:         3;
+            }
+        }        
+        .art-container {
+            overflow:hidden;
+            margin-bottom: 2px;
+
+        }
+        .art-effect {
+            opacity: 1;
+            transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
+            transform-origin: center;
+        }
+
+        .art-effect:hover {
+            transform: scale(1.05);
+            opacity: 0.5;
+        }
+    </style>
+    <script>
+
+        document.addEventListener('DOMContentLoaded', (event) => {
+            console.log("DOMContentLoaded")
+            var myList = document.querySelector('#art');
+            for (var i = myList.children.length; i >= 0; i--) {
+                myList.appendChild(myList.children[Math.random() * i | 0]);
+            }
+        })        
+    </script>
+
+
+    <section id="art">
+        {% for image in site.static_files %}
+            {% if image.path contains 'img/art' %}
+                <div class="art-container">
+                    <img src="{{ site.baseurl }}{{ image.path }}" class="art-effect" alt="">
+                </div>
+            {% endif %}
+        {% endfor %}
+    </section>
+
+    <!--
+    <div class="row">
+
+        {% for image in site.static_files %}
+            {% if image.path contains 'img/media' %}
+                <div class="col-lg-2 col-md-2 mb-4 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"">
+
+                    <img src="{{ site.baseurl }}{{ image.path }}" class="img-fluid mb-4" width="320px" alt="">
+
+                </div>
+            {% endif %}
+        {% endfor %}
+
+    </div>
+-->
+
 </section>