• Changelog

v0.3.0

Related projects: Fusite

UX and styling improvements for the Fuscripts site.

Added

  • Responsive image widths from caption tags: Images in Notion can now include \[w:XX%\] for desktop width, \[mw:XX%\] for mobile width, or \[w:80% mw:50%\] for both. Uses CSS custom properties (--dw, --mw) set inline on figure/img elements, with media query rules in the stylesheet for responsive behavior.
  • Tech tag wave-tilt animation: Project card technology tags now have a staggered 3D wave-tilt and light reflex effect on hover. Each tag tilts and shines sequentially using CSS-only animations with custom property delay indexing.

    • Changed

  • Image width approach: Replaced direct inline max-width styles with CSS custom properties, enabling responsive behavior that inline styles alone cannot express (media queries cannot be used in inline styles).

    • Technical

  • parseImageCaptionWidth() updated in both fusite/commons/src/utils/notion.ts and fusite/commons/src/services/imageProcessor.ts to parse \[w:\] and \[mw:\] tags
  • New buildImageStyleAttr() helper generates style="--dw: X%; --mw: Y%" attributes
  • processNotionImage() in imageProcessor now accepts optional displayMobileWidth parameter
  • CSS rules added to main.css using attribute selectors (figure\[style*="--dw"\]) for desktop and @media (max-width: 640px) for mobile
  • Tech tag animation uses @keyframes tagWaveTilt and @keyframes tagReflex with --tag-i custom property for stagger delay