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

cooler glows

Browse source
This commit is contained in:
Joshua Seigler 2025-06-22 01:08:24 -04:00
parent 8aeff65c2a
commit dbb7f59197
2 changed files with 17 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/effects.js vendored
View file

@ -67,6 +67,7 @@ function addEffect({ target }) {
) { ) {
return; return;
} }
const color = window.getComputedStyle(target).getPropertyValue('--glowColor');
const rects = Array.from(target.getClientRects()); const rects = Array.from(target.getClientRects());
Array.from(target.children).forEach((child) => { Array.from(target.children).forEach((child) => {
rects.push(...Array.from(child.getClientRects())); rects.push(...Array.from(child.getClientRects()));
@ -81,6 +82,7 @@ function addEffect({ target }) {
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`; newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`;
newEffect.style.width = `calc(${width}px + 2 * ${padding})`; newEffect.style.width = `calc(${width}px + 2 * ${padding})`;
newEffect.style.height = `calc(${height}px + 2 * ${padding})`; newEffect.style.height = `calc(${height}px + 2 * ${padding})`;
newEffect.style.setProperty('--glowColor', color);
effectsLayer.appendChild(newEffect); effectsLayer.appendChild(newEffect);
}); });
} }

25
site/_includes/css/site.css
View file

@ -123,8 +123,9 @@ mark {
text-decoration-thickness: 0.1rem; text-decoration-thickness: 0.1rem;
} }
a { a, label {
color: inherit; color: inherit;
--glowColor: var(--c-accent);
} }
a[href] { a[href] {
appearance: none; appearance: none;
@ -140,16 +141,16 @@ nav label:has(input:focus-visible),
nav label:has(input:checked) { nav label:has(input:checked) {
outline: none; outline: none;
color: var(--c-text-dark); color: var(--c-text-dark);
background-color: var(--c-accent); background-color: var(--glowColor);
box-shadow: box-shadow:
0 0 0.5rem var(--c-accent), 0 0 0.5rem var(--glowColor),
0 0 1rem var(--c-accent); 0 0 1rem var(--glowColor);
text-decoration: none; text-decoration: none;
border-radius: 0.5rem; border-radius: 0.5rem;
& img { & img {
box-shadow: box-shadow:
0 0 0.5rem var(--c-accent), 0 0 0.5rem var(--glowColor),
0 0 1rem var(--c-accent); 0 0 1rem var(--glowColor);
} }
} }
:is(a[href], button, nav label):focus-visible, :is(a[href], button, nav label):focus-visible,
@ -162,7 +163,11 @@ nav label:has(input:focus-visible) {
&::before { &::before {
content: "#"; content: "#";
} }
--glowColor: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.3);
color: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.8); color: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.8);
&:hover {
color: var(--c-text-dark);
}
} }
main p img { main p img {
@ -293,7 +298,7 @@ ul.collection {
> li { > li {
list-style-type: none; list-style-type: none;
> aside { > aside {
display: inline-block; display: inline;
} }
> p { > p {
&::before { &::before {
@ -754,9 +759,9 @@ body .isso-post-action {
border-radius: 0.5rem; border-radius: 0.5rem;
background: radial-gradient( background: radial-gradient(
ellipse farthest-side at 50% 50%, ellipse farthest-side at 50% 50%,
var(--c-accent) 10%, var(--glowColor) 10%,
color-mix(in lch, var(--c-accent), transparent) 25%, color-mix(in lch, var(--glowColor), transparent) 25%,
color-mix(in lch, var(--c-accent), transparent 80%) 35%, color-mix(in lch, var(--glowColor), transparent 80%) 35%,
transparent transparent
); );
animation: 1s ease normal forwards ripple; animation: 1s ease normal forwards ripple;