Merge pull request #10 from bitshifters/bug-fixes

mobile view fixes

Author: simondotm

_includes/art.html

@@ -4,11 +4,11 @@
             /* Prevent vertical gaps */
             line-height: 0;
 
-            -webkit-column-count: 8;
+            -webkit-column-count: 7;
             -webkit-column-gap:   2px;
-            -moz-column-count:    8;
+            -moz-column-count:    7;
             -moz-column-gap:      2px;
-            column-count:         8;
+            column-count:         7;
             column-gap:           2px;  
         }
 
@@ -20,31 +20,31 @@
 
         @media (max-width: 1200px) {
             #art {
-                -moz-column-count:    8;
-                -webkit-column-count: 8;
-                column-count:         8;
+                -moz-column-count:    6;
+                -webkit-column-count: 6;
+                column-count:         6;
             }
         }
         @media (max-width: 1000px) {
-            #art {
-                -moz-column-count:    7;
-                -webkit-column-count: 7;
-                column-count:         7;
-            }
-        }
-        @media (max-width: 800px) {
             #art {
                 -moz-column-count:    5;
                 -webkit-column-count: 5;
                 column-count:         5;
             }
         }
-        @media (max-width: 400px) {
+        @media (max-width: 800px) {
             #art {
                 -moz-column-count:    4;
                 -webkit-column-count: 4;
                 column-count:         4;
             }
+        }
+        @media (max-width: 500px) {
+            #art {
+                -moz-column-count:    3;
+                -webkit-column-count: 3;
+                column-count:         3;
+            }
         }        
         .art-container {
             overflow:hidden;
@@ -151,7 +151,7 @@
     </script>
 
 
-    <section id="art">
+    <section id="art" class="container">
         {% for image in site.static_files %}
             {% if image.path contains 'img/art' %}
                 <div class="art-container">

_includes/css/shader.css

@@ -9,4 +9,14 @@
   position: absolute;
   left: 20px;
   top: 20px;
-}
+}
+
+
+
+@media(max-width:1024px) {
+    #shaderView {
+        visibility: hidden;
+    }
+
+}
+

_includes/shader.html

@@ -25,8 +25,6 @@ <h1 class="text-warning">Inner Heading 1</h1>
 
             import * as THREE from 'https://unpkg.com/three@0.127.0/build/three.module.js';
 
-            let SHADER_HEIGHT = 300
-
             let container;
             container = document.getElementById( 'shaderCanvas' );
             if (!container)