journalistic-portrait-cn

Southern People Weekly Magazine Layout Skill

Replicates the visual identity of Southern People Weekly (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

Read references/style_contract.md for the complete visual style specification.
Read references/structure_contract.md for the page structure rules and layout patterns.
Generate HTML following all contracts and the 4 Frontend Iron Rules below.
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)

Cover layering: Accurately extract the colors from the original, and never set the red border as a global background. Use z-index to divide into three layers: the bottom dark-toned background image, the middle masthead, and the top border and teasers.

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): Masthand "Southern" + "People Weekly" + 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; }

Cover checklist:

Masthand reads "Southern" + "People Weekly" (NOT "Southern People Weekly" as one line)
Slogan "Portraits of the Times" centered at top
Right-side teaser boxes present (P62 Culture, P70 Entertainment, +P38 International)
"International" teaser has white circle with red "+" icon
Bottom info bar with ISSN, barcode, QR code, price, issue info, website
Red border #D90712 exactly 12px, with inner white line

Rule 2: Image-Text Collision Prevention (No Absolute Images)

Prevent image-text overlap: Images on inner pages must never use position: absolute. You must use float with margin to push text away, and force the parent container to apply clearfix.

Inner-page images MUST NEVER use position: absolute. Always use float with margin to push text away. Parent container MUST apply clearfix.

.article-image { float: right; margin: 0 0 1em 1.5em; max-width: 48%; }
.article-image.left { float: left; margin: 0 1.5em 1em 0; }
.article-column::after { content: ""; display: table; clear: both; }

Image checklist:

NO position: absolute on any inner-page image
Images use float: right or float: left with margin
Parent container has clearfix (::after with clear: both)
Caption is right-aligned below image

Rule 3: Layout Collapse Prevention (No Fixed Heights)

Prevent layout collapse: It is absolutely forbidden to set a fixed height on text containers. Globally force the application of word-wrap: break-word and box-sizing: border-box.

NEVER assign fixed height to text containers. Globally enforce box-sizing and word-wrap.

* { box-sizing: border-box; }
.text-container,
.column,
.article-body { height: auto !important; word-wrap: break-word; overflow-wrap: break-word; }

Layout checklist:

No fixed height on any text container
box-sizing: border-box applied globally
word-wrap: break-word and overflow-wrap: break-word on all text containers
Layout uses min-height instead of height where needed

Rule 4: High-Density Text Fill

High-density filling: Set body text line-height to around 1.5. You must strictly require downstream AI: each page of body text must generate 800-1000 characters, completely filling the multi-column grid, and strictly preventing blank space at the bottom.

Set body text line-height: 1.5. Every article page MUST generate 800-1000 characters of body text per page to completely fill the multi-column grid. Prevent bottom whitespace.

.article-body { line-height: 1.5; font-size: 15px; }

Density checklist:

line-height: 1.5 on body text
Each article page generates 800-1000 characters
Both columns filled to near bottom
No excessive whitespace at page bottom (target <15% empty)
If text is short, expand content or combine pages

Page Type Quick Reference

Page Type	Key Rule	Critical Check
Cover	Rule 1 (3-layer z-index)	Teasers + bottom bar present
Table of Contents	Single page only	All content on one page
Article (first page)	Rules 2-4, dual-column from page 1	Never single-column
Article (continuation)	Rules 2-4	800-1000 chars, filled columns

Typography Strategy

Primary CJK font: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
Reference fonts from PDF: PingFangSC-Regular + Helvetica
Heading weight: 700 (bold)
Body weight: 400 (regular)
All text elements use the same font stack for CJK compatibility.

Color Palette

Token	Hex	Usage
`--spw-red`	`#D90712`	Cover border, accent marks, decorative bars, end triangle
`--spw-red-dark`	`#B0060F`	Hover states
`--spw-black`	`#1A1A1A`	Body text, headings
`--spw-gray`	`#666666`	Captions, secondary text, author info
`--spw-gray-light`	`#999999`	Page numbers, tertiary labels
`--spw-white`	`#FFFFFF`	Page background, cover text
`--spw-cream`	`#F5F0E8`	Alternate section backgrounds

Known Issues to Prevent (from Judge Feedback)

NEVER create blank pages between cover and TOC or TOC and articles
NEVER use single-column layout on first page of articles - dual-column always
NEVER omit the cover teasers (right-side boxes) or bottom info bar
NEVER split TOC across multiple pages - keep on one page
NEVER leave 50%+ whitespace at bottom of article pages
ALWAYS place page numbers consistently (bottom-left or bottom-right)
ALWAYS use grid-template-columns: 1fr 1fr for dual-column, not column-count