joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

link hover effect

Browse source
This commit is contained in:
Joshua Seigler 2025-06-10 00:41:07 -04:00
parent 1559a3c68c
commit b91bb04c2e
3 changed files with 83 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
site/_includes/-footer.njk
View file

@ -18,4 +18,6 @@
<a href="https://unofficehours.com/random.html" rel="noopener">Random</a> <a href="https://unofficehours.com/random.html" rel="noopener">Random</a>
<a href="https://unofficehours.com" rel="noopener">List</a> <a href="https://unofficehours.com" rel="noopener">List</a>
</section> </section>
</footer> </footer>
<div id="effects">
</div>

65
site/_includes/base.njk
View file

@ -1,30 +1,31 @@
--- ---
title: Joshua's Homepage title: Joshua's Homepage
--- ---
{%- set computedTitle = tag | capitalize if tag else title -%} {%- set computedTitle = tag | capitalize if tag else title -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/> <link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{ buildTime }}"/>
<link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention" /> <link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention"/>
<title>{{ computedTitle }} - {{ site.title }}</title> <title>{{ computedTitle }} - {{ site.title }}</title>
<meta name="description" content="{{ description }}" /> <meta name="description" content="{{ description }}"/>
<meta property="og:title" content="{{ computedTitle }}" /> <meta property="og:title" content="{{ computedTitle }}"/>
<meta property="og:type" content="{{ article }}" /> <meta property="og:type" content="{{ article }}"/>
<meta property="og:url" content="{{ page.url | absoluteURL }}" /> <meta property="og:url" content="{{ page.url | absoluteURL }}"/>
<meta name="twitter:title" content="{{ computedTitle }}" /> <meta name="twitter:title" content="{{ computedTitle }}"/>
<meta name="twitter:description" content="{{ description }}" /> <meta name="twitter:description" content="{{ description }}"/>
{% if cover %} {% if cover %}
<meta property="og:image" content="{{ cover | absoluteURL }}" /> <meta property="og:image" content="{{ cover | absoluteURL }}"/>
<meta name="twitter:image" content="{{ cover | absoluteURL }}" /> <meta name="twitter:image" content="{{ cover | absoluteURL }}"/>
{% endif %} {% endif %}
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary"/>
<meta name="generator" content="{{ eleventy.generator }}"> <meta name="generator" content="{{ eleventy.generator }}">
<script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script> <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
</head> </head>
<body data-font="english" data-path="{{page.url}}"> <body data-font="english" data-path="{{ page.url }}">
{% include "-header.njk" %} {% include "-header.njk" %}
<main> <main>
{{ content | safe }} {{ content | safe }}
@ -32,12 +33,50 @@ title: Joshua's Homepage
{% include "-footer.njk" %} {% include "-footer.njk" %}
</body> </body>
<script> <script>
const body = document.documentElement || document.body;
function setScrollAmount() { function setScrollAmount() {
const body = document.documentElement || document.body;
body.style.setProperty("--scrollLengthPx", body.scrollTop); body.style.setProperty("--scrollLengthPx", body.scrollTop);
} }
setScrollAmount(); setScrollAmount();
document.addEventListener("scroll", setScrollAmount); document.addEventListener("scroll", setScrollAmount);
document.addEventListener("resize", setScrollAmount); document.addEventListener("resize", setScrollAmount);
function rippleListener(el) {
return (evt) => {
const {
top,
right,
bottom,
left,
} = evt.target.getBoundingClientRect();
const effects = body.querySelector("#effects");
const newEffect = document.createElement("div");
newEffect.classList.add("effect-instance");
const padding = '10rem';
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`;
newEffect.style.width = `calc(${right - left}px + 2 * ${padding})`;
newEffect.style.height = `calc(${bottom - top}px + 2 * ${padding})`;
newEffect.style.borderRadius = `${Math.min(bottom - top, right - left) / 2}px`;
effects.appendChild(newEffect);
const reverser = () => {
newEffect.getAnimations().forEach(anim => {
anim.pause();
anim.updatePlaybackRate(5);
anim.reverse();
anim.addEventListener('finish', () => {
if (effects.contains(newEffect)) {
effects.removeChild(newEffect);
}
});
});
}
el.addEventListener('mouseleave', reverser);
el.addEventListener('blur', reverser);
}
}
Array.from(document.querySelectorAll('a[href],.nav-toggle-button')).forEach(el => {
el.addEventListener('mouseenter', rippleListener(el));
el.addEventListener('focus', rippleListener(el));
});
</script> </script>
</html> </html>

28
site/_includes/css/site.css
View file

File diff suppressed because one or more lines are too long