i

index.html

@@ -24,7 +24,7 @@ <h1><span id="site-title"><a href="/" class="no-bg" title="Home"><img alt="Home"
 <div id="site-info" class="article-content" style="padding:0; margin:auto;"><div class="width95 opaq80" style="margin-bottom: -.5em;">
 <h5 style="margin: .1em 0 -.8em"><i>About i&i:</i></h5></div><div class="width95"><p class="no-indent center" style="padding-left:0;">
 Designed for max efficiency, freedom, & functionality. Full code & more info at <a href="https://www.github.com/i1li/i">GitHub</a>. Best enjoyed with good music, here's some <a href="https://github.com/i1li/i#shufflejs">shuffled</a> favorites:
-</p><div class="center" style="margin-bottom:-.5em;"><button id="next" title="Next Video">⏭️ Next</button><span id="draw"></span></div>
+</p><blockquote class="center" style="margin-bottom:-.5em;"><button id="next" title="Next Video">⏭️ Next</button><span id="draw"></span></blockquote>
 <p style="padding:.7rem 0 .2rem;" class="no-indent italic90">(More music <a href="/edu/vibes">here.</a>)</p>
 <p style="padding-left:0;padding-top:0;" class="no-indent">
 Posts are generally listed in recommended reading order, so you can start by scrolling down, or click a post title:
@@ -1305,9 +1305,8 @@ <h4>Profitability Has Never Excused Criminality: A Message To Facebook, Google,
 </div></section>
 
 <section id="vibes"><a class="section-title" id="vibes" href="/edu/vibes"><h3>Encoded Vibratory Transmissions (Music)</h3></a><div class="width95">
-<details class="width95"><summary>How this was made:</summary><p>The music section uses a few custom scripts: first <a href="https://github.com/i1li/i#lightest-youtube-embed---youtube-embedjs">videos & playlists are embedded</a>, then video IDs are <a href="https://github.com/i1li/i#yt-idsjs">extracted</a> from all playlists, then everything is <a href="https://github.com/i1li/i#shufflejs">shuffled</a>. The high total video count below is from some playlists consisting of entire YouTube channels with thousands of uploads.</p></details>
-<div id="combined-list"><y-t class="no-link-embed" v="" t="Combined Shuffled Playlist"></y-t> - custom playlist combining all the videos and playlists below (currently <span id="total-videos">20,168</span> videos), automatically <a href="https://github.com/i1li/i#shufflejs">shuffled</a>.
-</div>
+<span id="combined-list"><y-t class="no-link-embed" v="" t="Combined Shuffled Playlist"></y-t> - custom playlist combining all the videos and playlists below (currently <span id="total-videos">20,168</span> videos), automatically <a href="https://github.com/i1li/i#shufflejs">shuffled</a>.</span>
+<details class="width95"><summary>Click to expand info on how this was made:</summary><p>The music section uses a few custom scripts: first <a href="https://github.com/i1li/i#lightest-youtube-embed---youtube-embedjs">videos & playlists are embedded</a>, then video IDs are <a href="https://github.com/i1li/i#yt-idsjs">extracted</a> from all playlists, then everything is <a href="https://github.com/i1li/i#shufflejs">shuffled</a>. The high total video count above is from some playlists consisting of entire channels with thousands of uploads each.</p></details>
 <div id="shuffle">
 <y-t p="PLZWCukkQGi6rJiIQpcxFbWtxo2sm1L_U2,TLWygV_OGc0" v="nxMolO9CEaU,hGQu4_fan8Q,BnEgnrUCXPY,OnYKl4KKMWY,KDljTZjoPN4,Hn1h0lXu86s,UJNFbptgnd0,EhGCsaiVm0I,Yy4pcKn0Y_k,LdyabrdFMC8,DNLMxLhr6qQ,PgWTZ3hD7vE,h6PBIPYxAJU,HGyt9Jgib7A,ibqjTt6LzWs,ZiVVDs31bYA,ALoyJNLJqOo,ijLt8T4fE08,mFSRCG4DrmI,pPXamHHDfNI,15Nqbic6HZs,i1mQsnc7KDI,5mpafLYHVd0,DxHnWi7Wk0k,NyydSocn5dM,3KbmoqMhmeE,cVFzblT5VPE,i63c3Wg5CEs,x7LmhOEnIs4,ZkPfmW84lnU,go6u0Z90t94,4Elh8WytKfA,O2K0ptoYpuc,eop2hTv7ZC4,c8cKN1rbJl4,IJrKlSkxRHA,YLS1WSgCaEw,q9HhNbL0Rww,FngDSOuCNAA,e5PqHAYuj-U,e6JqYyFJEn8,Pl7zA_I679Y,Z5NoQg8LdDk,9p8NMDcKkVw,5wMFLb0aDFk,Q2dfe2yseIM,zzHQQEFCyX0,JDWzlrMedoM,Z--77Q6H0ZU,4Sx6Ol4ZfBE,sqzFm3erSJc,zUNfZU7VfPE,ZUYJ8_tBSSQ,RptPTfXyN_M,WO6ulZR2wRQ,gLFfpzRbqn8,Ljw5eJdO4kQ,0En_vSMkMlg,odmYh_68sHg,z7XPQwbORJs,ANIX12gCtyM,EKan-HlyW9g,YQGqs3uZkoY,qHp2ooJxJRs,JN47RE0nzuc,iCRmTiMZap4,eTvJUa6Vg78,UpchxXLjOhI,hkj1nt_u2U8,NdSMeBrNp4A,xdCbfdlj5CA,-dacTxeTlEM,4D8YPDdsxYU,cutAeNVAujg,SRf1tTtvG5k,xSO1tW2niZo,32bZcFj0Nxg,bWGm_F34f38,09IavUVpD4k,wqUL_dDL6F0,52CZVfiiMpY,NwVtIPeYIeQ,FjKUQ2_uazI,wlYmw4AuJiI,-Hcv-FWqHCk,8VHNWAhvdNE,WQMU8dYMXao,sMoO8FNbRJA,XSrdTowZwH4,Ov45NfR9osk,xuvDeHnXnjY,lXhXwx2wYYY,IhgnxSSc8gQ,I56NSBduc9Q,k8OwzWNZEUI,JUSk8X1DHrQ,Gf8G3OhHW8I,yV-OYEF1u4s,zpKfh8gkgp0,sMsQ2xGG1tQ,__ebFZ4HxEk,igqGDidblGQ,lXg0Efj4EW8,qbFdqN_u-E0,5xi4qxyJrsw,L9Ca7HJpfFs,ahGnP1uUMwg,fPggjsFr55c,4d8Qey7xdkg,KCC9Qh8zutU,qeTW7fLma7A,9-dF24zvVYc,8yXUCEp0Lvk,XD-YBvkYtWk,kDgj9R9r950,-ZPTAAqTmMk,S1BuRprwXNc,MyHQlG5nBCE,Nu4HtrSJDcQ,TLWygV_OGc0,l5csTLOVrJo,E1kFxpNR6Jc" class="no-link-embed" t="Misc Tunes"></y-t><br>
 <y-t p="PLZWCukkQGi6pvDEvSqR1saV-xEc90TgVY" v="p9xCcRB1TvA,UCoUyLzzbjk,Vlzs4YB3Oxs,IcOzGMaA4zw,LCJHccAtOAA,4jaP7JOjPuE,IIv7gTlZmdI,SYsLA3gdevc,8RNo7oM2qNQ,9BmNH3LCylM,Gzi9PWiS6ns,EFYbGAuEcK0,04fEWQOwUD4,pg6lLm-feck,BcbKoY7XpJE,SVbc_Fwbt50,s9NIBZfVBW4,Kh6B8U-uVB8,OfiZXqKDR3s,VEizKmZlUAw,5zdUZ9WEyfM,5XVrtsOP_n0,8HAyKW9Pj7A,YMAEnAz0Hr0,mfzXHDBSaIQ,iirvKFByL9o,G-ofoFEAaIs,WLgTvTMYY5k,Frj14wRBhDg,Ngxjs242nbk,8-wLLhyVlLk,b1iq8y9Tvd4,LcbVqTVA_1A,UpmeswMK7cY,roTqa0EaZM4,64CACoHNBEI,Va297erJjJ4,zHDrHRmaQjQ" class="no-link-embed" t="Healing Music"></y-t><br>
@@ -1468,7 +1467,7 @@ <h4>Profitability Has Never Excused Criminality: A Message To Facebook, Google,
 <y-t v=""></y-t><br>
 <y-t class="no-link-embed" v="" t=""></y-t><br>
 class="no-embed"
-<div id="no-embeds">HT-vlfpaclM,325zULuZQTk,kvUEvsLpc9A,hndKV89tpS4,sAKQpwh79mc,-LsR5YXKd8k,P0EyrqI2LMA,lCFMfEEqErM,xfjVxmqefwc,2iAzj6sj19s,xGhNtrRVxjs,vkmtjZ3Vwlc,gCHpK7fPqjU,0l0LH_H1vXs,bTp_ULl2vjE,JAvYUFcRnO4,eWfXqgZoJD0,x4s9hPm0_9A,W7lvy5Tnuk0,qLVwdPfXPT8,_6htuHZ2RG8,Og8s3DoVo5Y,eBpKA1RPv_U,DmN5abqmMxk,7zCUaaZMyHo,XW2shZJObfE,cYkyHG1xb4Q,pK3U2ntSlzI,bBwNfsinmgo,Nu4HtrSJDcQ,gCHpK7fPqjU,yIIbm0-QJmU,jp1bKCtEbmA,GTX5uFgO2RE,bTlkgNDRTYs,wCG_LkQ2a1w,0l0LH_H1vXs,yzAwwERuqr4,A_20HcvDD_0,0F-5a11IZrc,uITMKgNymYU,PAApaKMbmoc,Dnq2Ujw_LCY,bxgT_AnuIs0,Dzwg9rZ_znk,Vx42TPAyJl4,7nhd2GwoBIU,tXXIciOWGJQ,4QAFDbJkJ_g,T9i4YWEG3ww,h0eS8T1fNPQ,tJIlom8LV0g,hSJKUpSNf8I,PZy0WiYs7VY,XIuZLuSsuPI,dEjzDsXa4d4,aozycLq5kw8</div>---->
+<div id="no-embeds">HT-vlfpaclM,8AwvSoTje0M,325zULuZQTk,kvUEvsLpc9A,hndKV89tpS4,sAKQpwh79mc,-LsR5YXKd8k,P0EyrqI2LMA,lCFMfEEqErM,xfjVxmqefwc,2iAzj6sj19s,xGhNtrRVxjs,vkmtjZ3Vwlc,gCHpK7fPqjU,0l0LH_H1vXs,bTp_ULl2vjE,JAvYUFcRnO4,eWfXqgZoJD0,x4s9hPm0_9A,W7lvy5Tnuk0,qLVwdPfXPT8,_6htuHZ2RG8,Og8s3DoVo5Y,eBpKA1RPv_U,DmN5abqmMxk,7zCUaaZMyHo,XW2shZJObfE,cYkyHG1xb4Q,pK3U2ntSlzI,bBwNfsinmgo,Nu4HtrSJDcQ,gCHpK7fPqjU,yIIbm0-QJmU,jp1bKCtEbmA,GTX5uFgO2RE,bTlkgNDRTYs,wCG_LkQ2a1w,0l0LH_H1vXs,yzAwwERuqr4,A_20HcvDD_0,0F-5a11IZrc,uITMKgNymYU,PAApaKMbmoc,Dnq2Ujw_LCY,bxgT_AnuIs0,Dzwg9rZ_znk,Vx42TPAyJl4,7nhd2GwoBIU,tXXIciOWGJQ,4QAFDbJkJ_g,T9i4YWEG3ww,h0eS8T1fNPQ,tJIlom8LV0g,hSJKUpSNf8I,PZy0WiYs7VY,XIuZLuSsuPI,dEjzDsXa4d4,aozycLq5kw8</div>---->
 
 <footer><table style="width:100%;"><tr><td style="text-align:left; width:20%; padding-left:3.5%; padding-top:.6em;"><span id="toTopFooter" onclick="topFunction()" title="Go to top"><img alt="Go to top" class="img-footer" decoding="async" src="/img/top2.png"></span></td>
 <td style="text-align:center; width:60%; vertical-align:middle; padding-top:1em; font-size:1em; opacity:.7;"><a href="https://connect4more.netlify.app" class="no-bg" title="Connect for more.">Connect</a></td>

js/background.js

@@ -2,7 +2,10 @@
 if (detectMobile()) {
     const box = document.getElementById("box");
     const overlay = document.getElementById("overlay");
-    let isWindowActive = true;
+    let isWindowActive = !document.hidden;
+    document.addEventListener('visibilitychange', () => {
+        isWindowActive = !document.hidden;
+    });
     window.addEventListener('focus', () => isWindowActive = true);
     window.addEventListener('blur', () => isWindowActive = false);
     function getRandomHueIncrement() {
@@ -76,15 +79,19 @@ if (detectMobile()) {
             }
         }
     }
-    function updateColors() {
-        if (isWindowActive) {
+    let lastUpdateTime = 0;
+    const updateInterval = 33; 
+    function updateColors(timestamp) {
+        if (isWindowActive && timestamp - lastUpdateTime >= updateInterval) {
             updateLayerState(boxState, false);
             updateLayerState(overlayState, true);
             setGradient(box, boxState);
             setGradient(overlay, overlayState, true);
+            lastUpdateTime = timestamp;
         }
+        requestAnimationFrame(updateColors);
     }
     setGradient(box, boxState);
     setGradient(overlay, overlayState, true);
-    setInterval(updateColors, 33);
+    requestAnimationFrame(updateColors);
 }

js/color-change.js

@@ -3,7 +3,7 @@ if (detectMobile()) {
 const hoverShift = document.querySelectorAll('button, a, a.dark-mode, footer, .article-nav-bottom, #site-nav a, .section-nav a');
 const alwaysShift = document.querySelectorAll('header, #site-nav .col, .section-nav .col, .article-header, footer, .article-title, #site-title, #light-dark-zoom');
 function getRandomDegree() {return Math.random() < 0.5 ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;}
-function getNewIntervalsTillNextChange() {return Math.floor(Math.random() * 22) + 11;}
+function getNewIntervalsTillNextChange() {return Math.floor(Math.random() * 11) + 7;}
 function getRandomInterval() {return 111 + Math.floor(Math.random() * 1000);}
 let isWindowActive = true;
 window.addEventListener('focus', () => isWindowActive = true);
@@ -49,7 +49,7 @@ function startShift(element, interval, isHover = false) {
         intervalCount = 0;
         intervalsTillNextChange = getNewIntervalsTillNextChange();
       }
-      currentDegree += (targetDegree - currentDegree) * 0.001;
+      currentDegree += (targetDegree - currentDegree) * (0.005 + Math.random() * 0.005);
       currentSaturation += (targetSaturation - currentSaturation) * 0.005;
       currentContrast += (targetContrast - currentContrast) * 0.01;
       currentBrightness += (targetBrightness - currentBrightness) * 0.01;