math-tasks/tasks/space-exploration/CLAUDE.md

2.2 KiB

Space Exploration Task Type

Math problem worksheets with space theme: hero images, footer panoramas, icon-decorated problem cards.

Base References

  • Base template: src/templates/space-base.html (layout/styling reference)
  • Example outputs in docs/ (existing worksheets serve as reference for new ones)

What to Vary Per Worksheet

  1. Hero image — from assets/hero-images/spaceship{1-9}.jpeg
  2. Footer image — from assets/footers/planet{1-9}.jpeg
  3. Hero positionflex-row-reverse (hero right) or default (hero left)
  4. Problem icons — from assets/icons/pack1/ or pack2/. Every icon must be unique across the entire document (no repeats across pages). Shuffle minerals and plants randomly — do not sort by type
  5. Problem alignment — randomly assign justify-start, justify-center, or justify-end per card. No patterns — should look chaotic/scattered
  6. Problems — generate from the task description in the .md file

Layout Structure (do not change)

  • Page: w-[210mm] h-[297mm] white container
  • Footer: absolute bottom, h-[80mm], with white-to-transparent fade on top. No overflow-hidden on footer (causes 1px hairline artifact in PDF)
  • Footer bubble: absolute bottom-[12mm], pill-shaped with semi-transparent white bg
  • Content area: px-[12mm] pt-[4mm] pb-[65mm] flex column
  • Header: hero image w-[48%] + title block centered, flex-row-reverse for hero-right
  • Footer gradient: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%) with h-full
  • Problems: grid grid-cols-2 gap-x-3 gap-y-[3px] — 20 problems total
  • Each problem: 58px icon outside pill + text-[1.2rem] expression + w-16 answer underline inside pill
  • Font: Nunito via Google Fonts
  • Uses Tailwind CDN

Color Palette (do not change)

Element Hex
Title text text-indigo-950 (#1e1b4b)
Subtitle text-indigo-400 (#6366f1)
Card border border-indigo-100 (#e0e7ff)
Answer underline border-indigo-300 (#a5b4fc)
Card bg gradient from-white to-indigo-50/40
Footer bubble border border-indigo-200

Scripts

  • scripts/generate-worksheet3.mjs — generator for 9-page combined worksheets