Marco
6a6d50abdb
- PopIn (Home Hero's brand dot) switched from whileInView to animate — its translate-based entrance could push the element off-screen on a narrow phone before the IntersectionObserver ever saw it as visible, leaving it stuck invisible permanently. - Hero image: no longer wrapped in Reveal below lg: — whileInView's margin meant it stayed at opacity:0 (a white gap above the fold) on short mobile viewports until scrolled. Reveal's fade-in kept from lg: up. - "→ Label" CTA links (Tools.tsx, Blog.tsx) now use a flex row with the arrow as its own span instead of a literal inline "→" character, which doesn't reliably align to the surrounding text's cap-height. - Replaced icon-arrow-connector.svg with a new shared StepArrow component (inline SVG) across all three step sections — the old asset's color couldn't be overridden from outside the SVG file, so it could never actually become brand-orange. Bigger and better-shaped below the structural breakpoint per feedback. - Added MobileSectionTOC (SectionTOC.tsx) — a <details> accordion shown below lg: on Impressum/Datenschutz/AGB/Widerruf/Versand, which previously had no on-page navigation aid at all below lg: (the sidebar TOC is `hidden` entirely there). - Updated the figma-to-nextjs skill with 8 new dated Gotchas from this mobile-responsive pass, and expanded Step 6's verification checklist. - README: new "Mobile responsive pass" section summarizing the above.
25 lines
1.2 KiB
TypeScript
25 lines
1.2 KiB
TypeScript
// Shared "how it works" step connector — used by Challenge's, /todo-cards's,
|
|
// and /newsletter's ("Impulse & Tipps") step sections. Used to be
|
|
// /icon-arrow-connector.svg (a thin gray line+chevron) loaded via next/image;
|
|
// replaced 2026-07-24 for two reasons that both needed an inline SVG to fix:
|
|
// 1. It read as a faint gray line, not a real arrow, even after the
|
|
// object-contain aspect-ratio fix — too thin/subtle at these sizes.
|
|
// 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
|
|
// that's scoped to the SVG file's own document when loaded via <img
|
|
// src>/next/image — un-recolorable from the host page's CSS, so it could
|
|
// never actually become the brand orange used everywhere else (buttons,
|
|
// checkmarks, icons). Inline SVG sidesteps that entirely.
|
|
export function StepArrow({ className }: { className?: string }) {
|
|
return (
|
|
<svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
|
|
<path
|
|
d="M1 8H33M26 14.5L34.5 8L26 1.5"
|
|
stroke="#f6a701"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|