admin/sporthunde_nordeifel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix alignment, restore sticky menu, and fix 3D logo effect

Browse Source
This commit is contained in:
Antigravity
2026-06-09 16:08:02 +00:00
parent a566965b31
commit 11742c3e95
2 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
script.js
View File

@@ -11,17 +11,15 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// Logo 3D effect on mousemove // Logo 3D effect on mousemove
const logo = document.querySelector('.logo'); const logo = document.querySelector('.logo-small');
const hero = document.querySelector('.hero');
if(window.matchMedia("(pointer: fine)").matches) { if(logo && window.matchMedia("(pointer: fine)").matches) {
hero.addEventListener('mousemove', (e) => { document.addEventListener('mousemove', (e) => {
const rect = hero.getBoundingClientRect(); const x = e.clientX;
const x = e.clientX - rect.left; const y = e.clientY;
const y = e.clientY - rect.top;
const centerX = rect.width / 2; const centerX = window.innerWidth / 2;
const centerY = rect.height / 2; const centerY = window.innerHeight / 2;
// Calculate rotation (inverted for natural feel) // Calculate rotation (inverted for natural feel)
const rotateX = ((y - centerY) / centerY) * -15; const rotateX = ((y - centerY) / centerY) * -15;
@@ -30,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}); });
hero.addEventListener('mouseleave', () => { document.addEventListener('mouseleave', () => {
logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`; logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
}); });
} }

8
styles.css
View File

@@ -87,6 +87,7 @@ body {
.page-layout { .page-layout {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: flex-start;
} }
} }
@@ -120,8 +121,6 @@ body {
.hero { .hero {
text-align: center; text-align: center;
position: relative; position: relative;
overflow: hidden;
padding-top: 2rem;
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@@ -296,13 +295,10 @@ p {
height: fit-content; height: fit-content;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
padding: 2rem;
border-radius: 24px; border-radius: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
position: relative;
overflow: hidden;
} }
.sidebar::before { .sidebar::before {
@@ -311,6 +307,8 @@ p {
top: 0; left: 0; right: 0; height: 3px; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent); background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent);
z-index: 1; z-index: 1;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
} }
@media(min-width: 900px) { @media(min-width: 900px) {