From 79b9908a0ca44704685544b30eccbb1879985211 Mon Sep 17 00:00:00 2001
From: Simon M <podvilla@gmail.com>
Date: Tue, 6 Apr 2021 14:02:32 +0100
Subject: [PATCH] mobile view fixes

---
 _includes/art.html       | 30 +++++++++++++++---------------
 _includes/css/shader.css | 12 +++++++++++-
 _includes/shader.html    |  2 --
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/_includes/art.html b/_includes/art.html
index 42e6b36..bab6265 100644
--- a/_includes/art.html
+++ b/_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">
diff --git a/_includes/css/shader.css b/_includes/css/shader.css
index 42b9d88..2f45ed4 100644
--- a/_includes/css/shader.css
+++ b/_includes/css/shader.css
@@ -9,4 +9,14 @@
   position: absolute;
   left: 20px;
   top: 20px;
-}
\ No newline at end of file
+}
+
+
+
+@media(max-width:1024px) {
+    #shaderView {
+        visibility: hidden;
+    }
+
+}
+
diff --git a/_includes/shader.html b/_includes/shader.html
index 98c077c..c805972 100644
--- a/_includes/shader.html
+++ b/_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)