i

Author: i1li

dist/404.html

@@ -36,7 +36,7 @@ canvas {
     background-blend-mode:difference;
     text-align:center;
     opacity:.65;
-    transition:all 1s;
+    transition:all .2s;
     border-radius:0 0 2rem 2rem;}
 .scrolled-down #header-verse {display:none;}
 header:hover {background:linear-gradient(to bottom, rgba(255, 0, 0, .4) 0%, rgba(0, 222, 0, .15) 6%, rgba(128, 22, 128, 0.3) 94%, rgba(255, 0, 0, .4) 100%);}
@@ -48,7 +48,7 @@ header {position:fixed;
     margin-bottom:.3rem;
     z-index:1;
     padding:1rem 0 0 0;
-    transition:all .1s ease-out;
+    transition:all .2s ease-out;
     overflow:hidden;
     background:linear-gradient(to top, rgba(255, 0, 0, .25) 0%, rgba(0, 22, 0, .3) 2%, rgba(128, 0, 128, 0.2) 98%,  rgba(0, 0, 255, .5) 100%);
     backdrop-filter:brightness(115%) contrast(90%) saturate(270%);
@@ -94,9 +94,9 @@ header {position:fixed;
 #site-title {margin-left:-.1rem;margin-top:.3rem;display:flex;align-items:center;} .scrolled-down #site-title {margin-top:-.25rem;}
 #site-title-text:hover {opacity:.77;}
 #site-title-text {opacity:.55;margin:.3em 0 0 -.3rem;}
-.img-header {height:4rem;transition:all 1s ease;
+.img-header {height:4rem;transition:all .2s ease;
 filter:drop-shadow(0 0 1rem rgba(127, 127, 127, 0.75));}
-.img-header:hover {filter:invert(100%) !important;transition:all .5s ease-in-out;scale:1.07;}
+.img-header:hover {filter:invert(100%) !important;transition:all .4s ease-in-out;scale:1.07;}
 .no-bg {background:none !important;border:none !important;}
 #site-intro {text-align:center;
     padding:.1rem 0 .2rem;
@@ -147,7 +147,7 @@ h1 {margin:0;
     text-align:left;
     width:50%;
     filter:drop-shadow(0 0 1rem rgba(255, 255, 255, 0.7));}
-h2, h3, h4, h5, h6 {margin-bottom:0.7rem;padding:0 0 0 .2rem;}
+h2, h3, h4, h5, h6 {margin-bottom:.7rem;padding:0 0 0 .2rem;}
 .article-title {text-align:center;line-height:1.4;margin:.5rem 0 0 0;filter:drop-shadow(0 0 1rem rgb(255, 0, 128))!important;}
 body, p {margin:0;
     text-align:left;
@@ -177,7 +177,7 @@ a:hover {text-decoration:dotted underline;
     background:linear-gradient(to top, rgba(22,22,222, .2), rgba(22, 222, 222, .5));}
 article {min-height:80vh;border:dotted 1px rgba(255,255,0,.1);}
 .article-header {background-image:url("../img/bg.png");
-    transition:all 1.1s ease-in;
+    transition:scale .8s ease-in;
     background-size:35%;
     background-attachment:scroll;
     border:solid 1px rgba(0,255,0,.15);
@@ -197,7 +197,7 @@ article {min-height:80vh;border:dotted 1px rgba(255,255,0,.1);}
     border-right:outset 4px rgba(255, 0, 0, 0.6);
     border-left:inset 4px rgba(255, 0, 0, 0.6);}
 .article-header-wrapper {background:linear-gradient(to bottom, rgba(0, 222, 0, .15), rgba(128, 22, 128, 0.3));
-    transition:all 1.2s ease-out;
+    transition:scale 1s ease-out;
     margin:0 -.7rem;
     z-index:2;
     border:inset .7rem rgba(255,255,100,.1);
@@ -215,7 +215,7 @@ article {min-height:80vh;border:dotted 1px rgba(255,255,0,.1);}
 .section-nav {background:linear-gradient(to right, rgb(22 222 28 / 25%) 0%, rgb(110 0 145 / 45%) 50%, rgb(222 114 22 / 25%) 100%);
     padding:0 0 .65rem;
     border:solid 1px rgba(255,0,0,.3);
-    transition:scale 2s ease;
+    transition:scale 1.2s ease;
     filter:drop-shadow(0 0 1.7rem rgba(0, 174, 255, 0.8));}
 .section-nav .col a {padding:.2rem .9rem;}
 .section-nav:hover {background:linear-gradient(to left, rgb(22 222 28 / 30%) 0%, rgb(110 0 145 / 55%) 50%, rgb(222 114 22 / 30%) 100%);
@@ -234,7 +234,7 @@ article {min-height:80vh;border:dotted 1px rgba(255,255,0,.1);}
     opacity:.8;
     padding:.3rem 2rem;
     border:solid 1px rgba(255,0,0,.3);
-    transition:all 1.5s ease;
+    transition:all 1.3s ease-in;
     filter:drop-shadow(0 0 1.5rem rgba(6, 0, 48, 0.8));}
 .article-nav-bottom:hover {background:linear-gradient(to left, rgb(22 222 28 / 22%) 0%, rgb(110 0 145 / 22%) 50%, rgb(222 114 22 / 22%) 100%);
     scale:1.02;
@@ -274,14 +274,14 @@ article {min-height:80vh;border:dotted 1px rgba(255,255,0,.1);}
     right:2.5%;
     padding:5px;
     background:rgba(128,128,128,.1);
-    opacity:0.4;}
+    opacity:.4;}
 #toTop:hover {cursor:pointer;
     background:rgba(128,128,128,.3);
-    opacity:0.9;}
+    opacity:.9;}
 .to-top {width:2.7rem;} .to-top:hover {filter:invert(100%);}
-#toTopFooter {opacity:0.5;} #toTopFooter:hover {cursor:pointer;opacity:0.9;}
+#toTopFooter {opacity:.5;} #toTopFooter:hover {cursor:pointer;opacity:.9;}
 footer {background:linear-gradient(to top, rgba(0, 0, 0, .3), rgba(128, 128, 128, 0.2));
-    transition:all 1.2s ease-in-out;
+    transition:all 1.1s ease-in-out;
     margin-right:-.7rem;
     margin-left:-.7rem;
     margin-bottom:.4rem;
@@ -300,9 +300,9 @@ footer:hover {background:linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(128,
 blockquote:hover {background:linear-gradient(to right, rgba(0, 0, 0, .15), rgba(128, 128, 128, 0.1));}
 blockquote {background:linear-gradient(to left, rgba(0, 0, 0, .15), rgba(128, 128, 128, 0.1));
     width:92%;
-    margin:0.3rem auto;
-    margin-bottom:0.3rem;
-    padding-bottom:0.3rem;
+    margin:.3rem auto;
+    margin-bottom:.3rem;
+    padding-bottom:.3rem;
     border:inset .2rem rgba(100,100,100,.2);
     border-radius:.7rem;}
 button {font-size:80%;
@@ -323,19 +323,19 @@ li {list-style-type:none;display:inline-block;}
 input, textarea {font-size:110%;background:radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100% );}
 ::placeholder {color:rgb(168, 0, 0);}
 img {opacity:1;transition:all .7s ease-in-out;border-radius:0;} img:hover {opacity:.91;}
-.img-opaq {opacity:0.66;} .img-opaq:hover {opacity:.86;}
-.img-opaq2 {opacity:0.72;} .img-opaq2:hover {opacity:.88;}
-.img-opaq3 {opacity:0.8;} .img-opaq3:hover {opacity:.9;}
-.img-opaq4 {opacity:0.85;} .img-opaq4:hover {opacity:.92;}
-.opaq80 {opacity:0.8 !important;}
+.img-opaq {opacity:.66;} .img-opaq:hover {opacity:.86;}
+.img-opaq2 {opacity:.72;} .img-opaq2:hover {opacity:.88;}
+.img-opaq3 {opacity:.8;} .img-opaq3:hover {opacity:.9;}
+.img-opaq4 {opacity:.85;} .img-opaq4:hover {opacity:.92;}
+.opaq80 {opacity:.8 !important;}
 .img-gray:hover {filter:grayscale(85%);transition:all 1s ease-in-out;}
 .img-sat:hover {filter:saturate(40);transition:all 3s ease-in-out;}
 .img-sat2:hover {filter:saturate(20);transition:all 3s ease-in-out;}
 .img-sat3:hover {filter:saturate(10);transition:all 3s ease-in-out;}
 figure {text-align:center;font-style:italic;font-size:80%;margin:0;}
 figure a {text-decoration:none;background:none!important;border:none;}
 figcaption {opacity:.7} figcaption:hover {opacity:1;}
-.img-fluid {object-fit:contain;min-width:400px;min-width:70%;margin:auto;max-width:99.5%;max-height:82vh;margin-top:0.5rem;margin-bottom:0.5rem;}
+.img-fluid {object-fit:contain;min-width:400px;min-width:70%;margin:auto;max-width:99.5%;max-height:82vh;margin-top:.5rem;margin-bottom:.5rem;}
 #fullScreenOverlay {display:none;
     position:fixed;
     z-index:999;
@@ -402,22 +402,6 @@ details > summary:hover {cursor:pointer;text-decoration:underline;}
     padding:1.5rem;
     width:75%;
 }
-.search-overlay .closeBtn {
-    position:absolute;
-    top:2rem;
-    right:4rem;
-    font-size:300%;
-    cursor:pointer;
-    margin-top:-5%;
-}
-.closeBtn {
-    top:0;
-    right:0;
-    margin:0;
-    padding:0;
-    margin-right:-3rem;
-    z-index:1;
-}
 .search-results-wrapper {
     flex-grow:1;
     overflow-y:auto;

dist/bundle-0e7a0.css

@@ -12,8 +12,7 @@
 <canvas id="canvas"></canvas>
 </div></div>
 
-<div id="searchOverlay" class="search-overlay">
-<span class="closeBtn" onclick="closeSearchOverlay()">&times;</span>
+<div id="searchOverlay" class="search-overlay"><span class="close-button" onclick="closeSearchOverlay()">&times;</span>
 <div class="search-overlay-content"><div class="search-input-container">
 <input type="text" id="searchInput" placeholder="Search...">
 </div>

dist/bundle-0e7a0.js

@@ -115,18 +115,20 @@ setTimeout(() => {
     hoverShift.forEach(element => {
       let stopAnim = null;
       let disengageTimeout = null;
-      const startAnim = throttle(() => {
+      const sharedHoverHandler = throttle((event) => {
         if (stopAnim) stopAnim();
         stopAnim = startShift(element, getRandomInterval(), true);
       }, 30);
-      element.addEventListener('mouseover', startAnim);
-      element.addEventListener('click', startAnim);
+      const sharedDisengage = debounce(() => handleDisengage(element, stopAnim), 30);
+      element.addEventListener('mouseover', sharedHoverHandler);
+      element.addEventListener('click', sharedHoverHandler);
       element.addEventListener('touchstart', () => {
         if (stopAnim) stopAnim();
         stopAnim = startShift(element, getRandomInterval(), true);
+        if (disengageTimeout) clearTimeout(disengageTimeout);
         disengageTimeout = setTimeout(() => handleDisengage(element, stopAnim), 888);
       });
-      element.addEventListener('mouseout', debounce(() => handleDisengage(element, stopAnim), 30));
+      element.addEventListener('mouseout', sharedDisengage);
     });
   }
-}, delayOtherResources2);
+}, delayOtherResources2);

dist/bundle-a12f1.css

@@ -157,13 +157,15 @@ class SimpleToggle extends HTMLElement {
 customElements.define('s-t', SimpleToggle);
 
 //basic search
+const searchInput = document.getElementById('searchInput');
+const searchResults = document.getElementById('searchResults');
+const searchOverlay = document.getElementById('searchOverlay');
 function searchSPA() {
-  const query = document.getElementById('searchInput').value.toLowerCase().trim();
-  const results = document.getElementById('searchResults');
-  results.innerHTML = '';
-  if (!query) {results.innerHTML='<p>Enter a search term</p>';results.style.display='block';return;}
-  if (query.length < 3) {results.style.display='none';return;}
-  results.style.display = 'block';
+  const query = searchInput.value.toLowerCase().trim();
+  searchResults.innerHTML = '';
+  if (!query) {searchResults.innerHTML='<p>Enter a search term</p>';searchResults.style.display='block';return;}
+  if (query.length < 3) {searchResults.style.display='none';return;}
+  searchResults.style.display = 'block';
   let hasResults = false;
   document.querySelectorAll('article').forEach(article => {
     const clone = article.cloneNode(true);
@@ -177,31 +179,40 @@ function searchSPA() {
     const i = text.indexOf(query);
     const excerpt = text.slice(Math.max(0,i-50), i+query.length+50);
     const highlighted = excerpt.replace(new RegExp(query,'gi'), m=>`<strong>${m}</strong>`);
-    results.insertAdjacentHTML('beforeend', `
+    searchResults.insertAdjacentHTML('beforeend', `
       <div class="search-result">
         <h3>${id ? `<a href="/${id}" class="search-result-link">` : ''}${title}${id ? '</a>' : ''}</h3>
         <p>...${highlighted}...</p>
       </div>
     `);
   });
-  results.querySelectorAll('.search-result-link').forEach(link =>
+  searchResults.querySelectorAll('.search-result-link').forEach(link =>
     link.addEventListener('click', closeSearchOverlay)
   );
-  if (!hasResults) results.innerHTML = '<p>No results found.</p>';
+  if (!hasResults) searchResults.innerHTML = '<p>No results found.</p>';
 }
-function handleKeyPress(e) {if (e.key === "Escape") closeSearchOverlay();}
+let sharedSearchHandler;
 function openSearchOverlay() {
-  document.getElementById("searchOverlay").style.display = "block";
-  document.getElementById("searchInput").focus();
+  searchOverlay.style.display = "block";
   document.body.style.overflow = 'hidden';
-  document.addEventListener('keydown', handleKeyPress);
-  searchSPA();
+  searchInput.focus();
+  searchResults.innerHTML='<p>Enter a search term</p>';searchResults.style.display='block';
+  sharedSearchHandler = throttle((event) => {
+    if (event.type === 'keydown' && event.key === 'Escape') {
+      closeSearchOverlay();
+    } else if (event.type === 'input') {
+      searchSPA();
+    }
+  }, 500);
+  document.addEventListener('keydown', sharedSearchHandler);
+  searchInput.addEventListener('input', sharedSearchHandler);
 }
 function closeSearchOverlay() {
-  document.getElementById("searchOverlay").style.display = "none";
+  searchOverlay.style.display = "none";
   document.body.style.overflow = 'auto';
-  document.removeEventListener('keydown', handleKeyPress);
-  document.getElementById('searchInput').value = '';
-  document.getElementById('searchResults').innerHTML = '';
+  searchInput.value = '';
+  searchResults.innerHTML = '';
+  document.removeEventListener('keydown', sharedSearchHandler);
+  searchInput.removeEventListener('input', sharedSearchHandler);
+  sharedSearchHandler = null;
 }
-document.getElementById('searchInput').addEventListener('input', throttle(() => search(), 500));