Imagesbyolofsson.se/imagesbyolofsson-se
7
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(footer): hover-glow links to lyxlimo + karleksguiden (#25)

Browse Source 
MainLayout footer now includes attribution: 'Crafting digital
experiences for lyxlimo.se & karleksguiden.se' visible on all pages.

On index page only: hovering lyxlimo.se tints hero-logo with
green (#4fd1c5 teal), hovering karleksguiden.se tints with
magenta (#c026d3). Mouseleave restores default white smoky-path
animation. Mechanism reuses existing data-logo-tint attribute on
#text-wrapper.

Removed logo-pulse functionality entirely (threadLogoIn/Out paths,
runLogoPulse function, LOGO_PROBABILITY, updateLogoThreadPaths,
resize/scroll listeners for logo threads). Hover-based UX replaces
the random pulse approach per Linus design preference.
This commit is contained in:
Linus Olofsson
2026-05-21 06:01:25 +02:00
committed by GitHub
parent fb80bd0f2b
commit fa3a953a96
3 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/WaveBackground.astro
+1 -12
View File
@@ -72,8 +72,6 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
<path id="thread1" d="M-1000 200 Q 400 400 900 200 T 2600 200" fill="none" stroke="url(#gradSec)" stroke-width="0.5" class="opacity-50" data-pulse-path="true" />
<path id="thread2" d="M-1000 800 Q 600 600 1100 800 T 2600 800" fill="none" stroke="url(#gradSec)" stroke-width="0.8" class="opacity-60" data-pulse-path="true" />
<path id="threadLogoIn" d="M 0 0 L 0 0" fill="none" stroke="url(#gradPurple)" stroke-width="0.6" class="opacity-50" />
<path id="threadLogoOut" d="M 0 0 L 0 0" fill="none" stroke="url(#gradMain)" stroke-width="0.6" class="opacity-45" />
</g>
<g id="box-trail-group"></g>
@@ -411,9 +409,8 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
}
const SPLIT_PROBABILITY = 0.55;
const LOGO_PROBABILITY = 0.50;
function isLogoTargetVisible(): HTMLElement | null {
function _unused_isLogoTargetVisible(): HTMLElement | null {
const el = document.querySelector<HTMLElement>('[data-logo-target]');
if (!el) return null;
const rect = el.getBoundingClientRect();
@@ -605,14 +602,6 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
return;
}
// 20% chans för logo-pulse OM logo är synlig
const wantLogo = Math.random() < LOGO_PROBABILITY;
if (wantLogo && isLogoTargetVisible()) {
runLogoPulse(14000 + Math.random() * 4000);
schedule();
return;
}
const boxes = refreshBoxes();
const intersecting: SVGPathElement[] = [];
const nonIntersecting: SVGPathElement[] = [];
src/layouts/MainLayout.astro
+6
View File
@@ -30,6 +30,12 @@ const { title } = Astro.props;
</main>
<footer class="border-t border-neutral-800 py-8 text-center text-gray-500 text-sm bg-neutral-900 relative z-40">
<p class="mb-2">
Crafting digital experiences for
<a href="https://lyxlimo.se/" target="_blank" rel="noopener noreferrer" data-glow-link="green" class="text-gray-400 hover:text-white transition-colors">lyxlimo.se</a>
&amp;
<a href="https://karleksguiden.se/" target="_blank" rel="noopener noreferrer" data-glow-link="magenta" class="text-gray-400 hover:text-white transition-colors">karleksguiden.se</a>
</p>
<p>&copy; {new Date().getFullYear()} Images by Olofsson. All rights reserved.</p>
</footer>
src/pages/index.astro
+25
View File
@@ -140,6 +140,17 @@ import WaveBackground from '../components/WaveBackground.astro';
text-shadow: 0 0 25px rgba(79,209,197,0.85), 0 0 50px rgba(79,209,197,0.55);
transition: text-shadow 0.6s ease;
}
#text-wrapper[data-logo-tint="magenta"] ~ * .smoky-path,
#text-wrapper[data-logo-tint="magenta"] .smoky-path {
animation: none !important;
stroke: #c026d3 !important;
opacity: 0.95 !important;
filter: url(#fog-filter) drop-shadow(0 0 12px rgba(192,38,211,0.7));
}
#text-wrapper[data-logo-tint="magenta"] h1 {
text-shadow: 0 0 25px rgba(192,38,211,0.85), 0 0 50px rgba(192,38,211,0.55);
transition: text-shadow 0.6s ease;
}
#text-wrapper h1 {
transition: text-shadow 0.8s ease;
}
@@ -283,4 +294,18 @@ import WaveBackground from '../components/WaveBackground.astro';
}, { threshold: 0.1 });
if (footer) observer.observe(footer);
// FOOTER-LÄNKAR HOVER: ändra logo-glow när användare hovrar lyxlimo/karleksguiden-länkar
const glowLinks = document.querySelectorAll<HTMLElement>('[data-glow-link]');
glowLinks.forEach(link => {
link.addEventListener('mouseenter', () => {
if (!textWrapper) return;
const tint = link.getAttribute('data-glow-link');
if (tint) textWrapper.setAttribute('data-logo-tint', tint);
});
link.addEventListener('mouseleave', () => {
if (!textWrapper) return;
textWrapper.removeAttribute('data-logo-tint');
});
});
</script>