ReadyM Category Styling

Theme component for the ReadyM forum category homepage. It is designed to be installed alongside the existing Category List Banners component.

What it changes

• Constrains category logo containers and images to 64 × 64 on all viewports.
• Replaces the three group banner color fills with separate image backgrounds.
• Keeps the ReadyM abstract SVG and uses intentionally defocused cinematic artwork for OB:MP and WukongMP.
• Replaces the visible text headings with the ReadyM, OB:MP, and WukongMP logos in the lower-left corner.
• Keeps each logo at the same responsive height as the previous heading text.
• Adds a dark edge/bottom gradient so the logos remain readable.
• Leaves the extension's other zero-height banner nodes untouched.

Required Category List Banners setting

Keep the existing extension installed and set its banner list to:

5;transparent;ReadyM|21;transparent;OB:MP|10;transparent;WukongMP

The IDs are configurable in this component if the first category in a group changes later.

Install on staging

1. Commit this directory to a Git repository owned by ReadyM.
2. In Discourse, open Admin → Appearance → Themes & components.
3. Install the Git repository as a theme component.
4. Attach it to Pyx's Modern Theme after Category List Banners.
5. Confirm the default placeholder images appear.
6. Test at 390, 430, 768, 1440, and 2560 px widths before production.

Replacing the banner artwork or logos

Preferred production workflow: replace the relevant file in assets/, update its path in about.json if the filename changes, commit the change, and update the component from Git. This keeps deployed imagery reviewable and prevents a component update from discarding an admin-only upload.

Recommended banner artwork:

• 1920 × 320 minimum, or the same approximate 6:1 ratio at a larger size.
• Keep important faces and landmarks away from the lower-left project logo.
• Avoid embedding the group title in the banner artwork; the component overlays the corresponding transparent PNG logo.
• A strong blur is intentional here: the image is atmosphere, while the project logo remains the sharp focal point.
• WebP or optimized JPEG is appropriate for photographic final assets.

Recommended logo artwork:

• Transparent PNG or SVG with closely trimmed transparent bounds.
• A wide, horizontal lockup works best; the component preserves its aspect ratio inside a 32–72 px responsive height.

The component settings expose upload controls for all three banner images and all three logos, so replacements do not require CSS changes.

Styling controls

The main controls are in common/common.scss:

• Banner height: height: clamp(9rem, 12vw, 16rem)
• Logo position: left and bottom inside the banner ::after
• Logo height: height: clamp(2rem, 4vw, 4.5rem)
• Image crop: background-position and background-size
• Readability overlay: the two gradients inside ::before