mobile css

4 files changed, 34 insertions, 11 deletions

diff --git a/docs/js/player.js b/docs/js/player.js
index f262454..25fdfd6 100644
--- a/docs/js/player.js
+++ b/docs/js/player.js
@@ -25,6 +25,9 @@ const player = (function(){
       let el = document.createElement('li')
       el.innerHTML = track.title
       el.addEventListener('click', () => {
+        if (is_mobile) {
+          hidePlaylist()
+        }
         shards.rebuild()
         play(i)
       })
@@ -65,7 +68,12 @@ const player = (function(){
     }
   }
   function togglePlaylist() {
+    site.navigateHash('')
     document.querySelector('.playlist').classList.toggle('visible')
   }
+  function hidePlaylist() {
+    document.querySelector('.playlist').classList.remove('visible')
+  }
   init()
+  return { hidePlaylist }
 })()
\ No newline at end of file
diff --git a/docs/js/shards.js b/docs/js/shards.js
index 6512e70..28abca0 100644
--- a/docs/js/shards.js
+++ b/docs/js/shards.js
@@ -19,10 +19,12 @@ const shards = (function(){
     document.querySelector('h1').addEventListener('click', () => {
       sounds.play('click')
       rebuild()
+      site.navigateHash('')
+      player.hidePlaylist()
     })
   }
   function build(){
-    count = choice([5,7,7,11,11,13,13])
+    count = choice(is_mobile ? [5,7] : [5,7,7,11,11])
     light = cielab.gradient(count)
     dark = cielab.gradient(count)
     let el
@@ -69,7 +71,7 @@ const shards = (function(){
   function step() {
     t += 1
     light = cielab.gradient(count)
-    let w = { min: randrange(20, 40), max: randrange(10, 90) }
+    let w = { min: is_mobile ? randrange(40, 90) : randrange(20, 40), max: randrange(10, 90) }
     if (w.min > w.max) {
       w.min += 10
     }
diff --git a/docs/js/site.js b/docs/js/site.js
index 59d09f9..df9d657 100644
--- a/docs/js/site.js
+++ b/docs/js/site.js
@@ -8,6 +8,7 @@ const site = (function(){
   } else {
     document.body.parentNode.classList.add('day')
   }
+  preload('img/pause-inv.png')
   setTimeout(() => {
     document.body.classList.remove('loading')
     navigateHash(window.location.hash)
@@ -18,8 +19,18 @@ const site = (function(){
     document.querySelector("#twitter_addr").innerHTML = twitter
     document.querySelector("#twitter_addr").href = 'https://twitter.com/' + twitter
   }, 0)
+  toArray(document.querySelectorAll('.menu a')).forEach(a => {
+    a.addEventListener("click", e => {
+      e.preventDefault()
+      sounds.play('click')
+      navigateHash(e.target.href)
+    })
+  })
   function navigateHash(url){
-    let new_section = url.split('#')[1]
+    if (is_mobile) {
+      player.hidePlaylist()
+    }
+    let new_section = (url || "").split('#')[1]
     if (section) {
       document.body.classList.remove(section)
       links.forEach(link => link.classList.remove('active'))
@@ -33,16 +44,11 @@ const site = (function(){
     }
     // window.location.hash = section || ""
   }
-  toArray(document.querySelectorAll('.menu a')).forEach(a => {
-    a.addEventListener("click", e => {
-      e.preventDefault()
-      sounds.play('click')
-      navigateHash(e.target.href)
-    })
-  })
   function preload(src) {
     const img = new Image
     img.src = src
   }
-  preload('img/pause-inv.png')
+  return {
+    navigateHash: navigateHash
+  }
 })()
diff --git a/docs/js/util.js b/docs/js/util.js
index 9455825..e40db4a 100644
--- a/docs/js/util.js
+++ b/docs/js/util.js
@@ -1,3 +1,10 @@
+const is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const is_ipad = (navigator.userAgent.match(/iPad/i))
+const is_android = (navigator.userAgent.match(/Android/i))
+const is_mobile = is_iphone || is_ipad || is_android
+const is_desktop = !is_mobile;
+document.body.parentNode.classList.add(is_desktop ? 'desktop' : 'mobile')
+
 function avg(a,b,n){ return (a*(n-1) + b)/n }
 function rand(n){ return Math.random()*n }
 function randint(n) { return ~~(Math.random()*n) }