i

css/style.css

@@ -46,26 +46,24 @@ header {background: linear-gradient(to bottom, rgba(0, 222, 0, .15), rgba(128, 2
     transition: all .5s ease-in-out;
     scale:1.07;}
 .no-bg {background: none !important;border: none !important;}
-#site-intro {padding-bottom: .4em;
+#site-intro {text-align: center;
+    padding: .1em 0 .2em;
     -webkit-backdrop-filter:brightness(90%)contrast(111%)saturate(555%)blur(.04em); 
     backdrop-filter:brightness(90%)contrast(111%)saturate(555%)blur(.04em);
     border-radius:.5em;}
-#site-intro, #site-info p{text-align: center;
+#site-info p{text-align: center;
     margin-right: 1vw;
     margin-left: 1vw;
-    margin-bottom: .1em;
-    line-height: 1.1;}
+    margin-bottom: .1em;}
 #site-info {-webkit-backdrop-filter:blur(.07em)saturate(250%); backdrop-filter:blur(.07em)saturate(250%); padding-bottom:.1em;}
 #welcome {background: linear-gradient(to top, rgba(22,22,222, .1), rgba(22, 222, 222, .1));
-    line-height: 1.3;
     backdrop-filter: contrast(333%) grayscale(50%);
     -webkit-backdrop-filter: contrast(333%) grayscale(50%);
     border-radius: .3em .3em .5em .5em;
     border: 1px solid rgba(0, 171, 63, 0.6);}
 #site-nav {background: linear-gradient(to bottom, rgba(222, 22, 22, .35), rgba(128, 0, 128, 0.3));
-    font-size: 1.1em;
-    line-height: 1.3;
     padding: .2em 0 .7em;
+    font-size: 1.1em;
     backdrop-filter: brightness(100%) contrast(220%);
     -webkit-backdrop-filter: brightness(100%) contrast(220%);
     border: 1px solid rgba(4, 223, 231, 0.4);}

index.html

@@ -17,19 +17,20 @@ <h1><span id="site-title"><a href="/" class="no-bg" title="Home"><img alt="Home"
 <span class="mode-toggle"><button id="mode-toggle" title="Dark / Light">🌙 / ☀️</button></span></span></td></tr></table></header>
 
 <div class="container"><div class="row justify-content-center"><div class="col-md-9">
-<div id="welcome"><p class="no-indent" id="site-intro">
-Welcome to a selection of original writing & inspiring content devoted to foundations of community awareness: free speech, free thought, & free spirit.
+<div id="welcome"><p class="no-indent width90" id="site-intro">
+Welcome to original writing & inspiring content devoted to foundations of community awareness: free speech, free thought, & free spirit.
 </p>
-<div id="site-info" class="article-content"><div class="width95 opaq80" style="margin-bottom: -.5em;">
-<h5 style="margin-top:.1em; margin-bottom:.1em"><i>About i&i:</i></h5></div><div class="width90"><p>
-This site is 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"><button id="next" title="Next Video">⏭️ Next</button><span id="draw"></span></div><p>
+<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 style="padding-left: 0;" class="no-indent">
 Posts are generally listed in recommended reading order, so you can start by scrolling down, or click a post title:
 </p></div></div></div>
 
 <nav id="site-nav" aria-labelledby="all-posts">
-<h5 id="all-posts" class="width95" style="margin-top:0; margin-bottom:.1em"><a href="/" title="Home" class="unstyled-link opaq80"><i>All posts:</i></a></h5>
+<div class="width95 opaq80">
+<h5 id="all-posts" style="margin:0;"><a href="/" title="Home" class="unstyled-link opaq80"><i>All posts:</i></a></h5></div>
 <div class="row row-cols-auto justify-content-center center width95">
 <div class="col"><a title="Logomachy: War With Words" href="/logomachy">Logomachy</a></div>
 <div class="col"><a title="Dystopia Convergence" href="/dystopia">Dystopia Convergence</a></div>

js/script.js

@@ -93,13 +93,32 @@ images.forEach(function(img) {
   });
 });
 
-// Random Color On Hover Or Click - Rotate hue between -315 and 315 degrees, excluding -45 to 45. While hover active, shift 5 degrees per .1 second
+// Random Color On Hover, Click, Or Touch - Rotate hue between -315 and 315 degrees, excluding -45 to 45. While hover active, shift 5 degrees per .1 second
 const hover = document.querySelectorAll('button, a, a.dark-mode');
 hover.forEach(element => {
   let intervalId;
+  let disengageTimeout;
   element.addEventListener('mouseover', handleHover);
   element.addEventListener('click', handleClick);
+  element.addEventListener('touchstart', handleTouch);
   function handleHover() {
+    startColorShift();
+  }
+  function handleClick() {
+    clearInterval(intervalId);
+    startColorShift();
+  }
+  function handleTouch() {
+    clearInterval(intervalId);
+    startColorShift();
+    disengageTimeout = setTimeout(handleDisengage, 888);
+  }
+  function handleDisengage() {
+    clearInterval(intervalId);
+    element.style.filter = 'none';
+    element.style.webkitFilter = 'none';
+  }
+  function startColorShift() {
     const isNegative = Math.random() < 0.5;
     let randomDegree = isNegative ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;
     element.style.filter = `hue-rotate(${randomDegree}deg)`;
@@ -110,15 +129,7 @@ hover.forEach(element => {
       element.style.webkitFilter = `hue-rotate(${randomDegree}deg)`;
     }, 100);
   }
-  function handleClick() {
-    clearInterval(intervalId);
-    handleHover();
-  }
-  element.addEventListener('mouseout', () => {
-    element.style.filter = 'none';
-    element.style.webkitFilter = 'none';
-    clearInterval(intervalId);
-  });
+  element.addEventListener('mouseout', () => {handleDisengage()});
 });
 
 // Single Page Application