diff --git a/components/ProfileMore.tsx b/components/ProfileMore.tsx index 1c4c88b..edde170 100644 --- a/components/ProfileMore.tsx +++ b/components/ProfileMore.tsx @@ -5,19 +5,13 @@ import { MoreSection, PROFILE } from "@/data/content"; import { useFullBleed, usePrefersReducedMotion } from "@/hooks/useAnimations"; import "@/styles/more-section.css"; -/** - * Publishes the threshold rule's distance from the top of the document as - * `--threshold-y`, which the root background gradient reads to tint everything - * below it. Keeping this on the background instead of in an element means it - * covers the rest of the page without adding to the scrollable area. - */ function useThresholdTint(ref: React.RefObject) { + useEffect(() => { const el = ref.current; if (!el) return; const root = document.documentElement; - const publish = () => { const rect = el.getBoundingClientRect(); // The rule sits at the element's vertical centre. @@ -49,16 +43,14 @@ export default function ProfileMore() { const { ref: bleedRef, style: bleedStyle } = useFullBleed(); useThresholdTint(bleedRef); - // Sections before `moreSectionsStart` are always visible; the rest are the - // payload that lives below the threshold. const start = PROFILE.moreSectionsStart ?? 0; const above = PROFILE.moreSections.slice(0, start); const below = PROFILE.moreSections.slice(start); - // Crossing the line opens it. The reveal then latches -- crossing back up - // leaves it open, so a stray hover never yanks content out from under someone - // mid-read. Collapsing is deliberate only: a click on the label. - const cross = useCallback(() => { + const cross = useCallback((e: any) => { + if(e.pointerType=='touch'){ + return; + } setArmed(true); setOpen(true); }, []); @@ -87,11 +79,7 @@ export default function ProfileMore() { {/* The threshold. The rule sits at this box's vertical centre, and the rule and glow bleed to the viewport edges via the measured offset. Entering the band at all is what counts as crossing it. */} -
+