From 46e3949a2168f81a38bb015b47eba128b41ed0cf Mon Sep 17 00:00:00 2001 From: Melvin Ragusa Date: Fri, 30 Jan 2026 05:50:30 +0100 Subject: [PATCH] fix: FancyCursor hover behaviour on normal text --- index.html | 2 +- src/components/layout/FancyCursor.css | 9 +-- src/components/layout/FancyCursor.tsx | 2 +- src/components/sections/Hero.module.css | 64 +++++---------------- src/components/sections/Services.module.css | 33 +++++++++-- src/styles/theme.css | 4 +- 6 files changed, 49 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index c8d552f..5f7108b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ Ragusa IT-Consulting | Webentwicklung & IT-Beratung - +
diff --git a/src/components/layout/FancyCursor.css b/src/components/layout/FancyCursor.css index 2fcda05..da3723d 100644 --- a/src/components/layout/FancyCursor.css +++ b/src/components/layout/FancyCursor.css @@ -59,12 +59,9 @@ /* Global cursor hiding */ @media (hover: hover) and (pointer: fine) { - body, - a, - button, - input, - textarea, - [role="button"] { + html, + body, + * { cursor: none !important; } } diff --git a/src/components/layout/FancyCursor.tsx b/src/components/layout/FancyCursor.tsx index b839076..79b4911 100644 --- a/src/components/layout/FancyCursor.tsx +++ b/src/components/layout/FancyCursor.tsx @@ -25,7 +25,7 @@ export const FancyCursor = memo(() => { // Coercing to boolean with `!!` is a micro-optimization. const isResize = !!el?.closest('#custom-resize-handle'); - const isText = !!el?.closest('input[type="text"], input[type="email"], textarea, [contenteditable="true"]'); + const isText = !!el?.closest('input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), textarea, [contenteditable="true"]'); const isLink = !!el?.closest('a, button, [role="button"], input[type="submit"], input[type="button"]'); // These classes are toggled based on the hovered element. diff --git a/src/components/sections/Hero.module.css b/src/components/sections/Hero.module.css index fc9351a..bb4b624 100644 --- a/src/components/sections/Hero.module.css +++ b/src/components/sections/Hero.module.css @@ -38,88 +38,54 @@ } .text { - max-width: 800px; - text-align: center; + max-width: 900px; + text-align: left; + padding-left: var(--space-md); } .greeting { - font-size: 1.125rem; - font-weight: 500; + font-size: 1.25rem; + font-weight: 600; color: var(--md-sys-color-primary); margin-bottom: var(--space-md); letter-spacing: 0.05em; text-transform: uppercase; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .title { - font-size: clamp(2.5rem, 6vw, 5rem); - font-weight: 700; - line-height: 1.1; + font-size: clamp(3.5rem, 9vw, 6.5rem); + font-weight: 800; + line-height: 1.05; margin-bottom: var(--space-lg); - background: linear-gradient( - 135deg, - var(--md-sys-color-on-surface) 0%, - var(--md-sys-color-primary) 50%, - var(--md-sys-color-on-surface) 100% - ); - background-size: 200% auto; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: shimmer 3s ease-in-out infinite; - filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); -} - -@keyframes shimmer { - 0%, 100% { - background-position: 0% center; - } - 50% { - background-position: 100% center; - } + color: var(--md-sys-color-on-surface); + letter-spacing: -0.02em; } .tagline { display: flex; flex-wrap: wrap; align-items: center; - justify-content: center; + justify-content: flex-start; gap: 0.5em; - font-size: clamp(1.25rem, 3vw, 2rem); + font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--md-sys-color-on-surface); opacity: 0.9; margin-bottom: var(--space-2xl); - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + max-width: 600px; } .typed { color: var(--md-sys-color-primary); - font-weight: 600; + font-weight: 700; min-width: 200px; text-align: left; } -.cursor { - display: inline-block; - margin-left: 2px; - animation: blink 1s step-end infinite; -} - -@keyframes blink { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0; - } -} - .cta { display: flex; flex-wrap: wrap; align-items: center; - justify-content: center; + justify-content: flex-start; gap: var(--space-md); } diff --git a/src/components/sections/Services.module.css b/src/components/sections/Services.module.css index d3486ca..713608e 100644 --- a/src/components/sections/Services.module.css +++ b/src/components/sections/Services.module.css @@ -24,23 +24,44 @@ } .grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + display: flex; gap: var(--space-xl); + overflow-x: auto; + padding-bottom: var(--space-xl); + padding-top: var(--space-xl); + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; /* Firefox */ + margin: 0 calc(var(--space-lg) * -1); /* Negative margin to touch edges */ + padding-left: var(--space-lg); /* Padding to offset negative margin */ + padding-right: var(--space-lg); +} + +.grid::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ } .cardWrapper { - height: 100%; + flex: 0 0 320px; + scroll-snap-align: start; } .serviceCard { height: 100%; display: flex; flex-direction: column; + min-height: 300px; + background: var(--md-sys-color-surface-container); + border: 1px solid var(--md-sys-color-outline-variant); +} + +@media (min-width: 768px) { + .cardWrapper { + flex: 0 0 400px; + } } @media (min-width: 1024px) { - .grid { - grid-template-columns: repeat(4, 1fr); - } + /* On very large screens, we can center it if few items, or keep scrolling */ + /* Keeping scrolling for the "horizontal scroll" aesthetic */ } diff --git a/src/styles/theme.css b/src/styles/theme.css index c4d6269..529d94c 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -53,8 +53,8 @@ --md-sys-color-scrim: #000000; /* Typography */ - --md-sys-typescale-display-font: 'Inter', sans-serif; - --md-sys-typescale-body-font: 'Inter', sans-serif; + --md-sys-typescale-display-font: 'Sora', sans-serif; + --md-sys-typescale-body-font: 'Sora', sans-serif; --md-sys-typescale-code-font: 'JetBrains Mono', monospace; /* Spacing */