journalistic-portrait-cn

Southern People Weekly Magazine Layout Skill

Replicates the visual identity of Southern People Weekly (南方人物周刊) as HTML web pages.

Reference Source

• Type: Uploaded PDF artifact (native PDF)
• Reference File Type: PDF
• Style origin: Extracted from concrete 4-page PDF visual analysis
• Language: Chinese (Simplified) with occasional English labels

Supported Outputs

Format	Supported	Notes
HTML (static web page)	Yes	Primary output
PDF	Yes	Via print-to-PDF from browser
DOCX	No	Not applicable for magazine layout
PPTX	No	Not applicable for magazine layout

Default output: HTML static web page (single-file or multi-page).

Workflow

1. Read references/style_contract.md for the complete visual style specification.
2. Read references/structure_contract.md for the page structure rules and layout patterns.
3. Generate HTML following all contracts and the 4 Frontend Iron Rules below.
4. Validate each page type against the checklist in the Iron Rules section.

The 4 Frontend Iron Rules (MANDATORY — MUST APPEAR VERBATIM)

These 4 rules must be explicitly written into the generated HTML/CSS and strictly followed:

---

Rule 1: Cover Layering (z-index Stack)

封面分层：准确提取原件色彩，切勿将红边框设为全局背景。用 z-index 分三层：底层暗调背景图、中层报头、顶层边框与导读。

The cover page MUST use a 3-layer z-index stack. Never set the red border as a global background.

• Layer 0 (z-index: 0): Darkened full-bleed cover photo with gradient overlay
• Layer 1 (z-index: 1): Masthead "南方" + "人物周刊" + cover headline text
• Layer 2 (z-index: 2): Red border frame + right-side TOC teasers + bottom info bar

CSS skeleton:

.cover-container { position: relative; width: 100%; aspect-ratio: 3/4; min-height: 900px; overflow: hidden; }
.cover-bg        { position: absolute; z-index: 0; inset: 20px; }
.cover-bg img    { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.cover-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.45)); }
.cover-masthead  { position: absolute; z-index: 1; inset: 20px; display: flex; flex-direction: column; }
.cover-frame     { position: absolute; z-index: 2; inset: 0; border: 12px solid #D90712; pointer-events: none; }
.cover-frame::after { content: ''; position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,0.6); }
.cover-teasers   { position: absolute; z-index: 2; right: 60px; bottom: 120px; color: #fff; text-align: right; }
.cover-bottom-bar { position: absolute; z-index: 2; bottom: 20px; left: 20px; right: 20px; }