Setting the file. One moment. 34.11
Editorial
(opens in a new tab)
references/styles/editorial.html
HTML·189 lines·6 KB
layouts: overlay, pip, stack
16 frames: clean, polaroid
17 content: 产品发布 / 编辑专栏 / 大字宣言
18-->
19<!doctype html>
20<html lang="zh-CN">
21 <head>
22 <meta charset="utf-8" />
23 <title>style · editorial</title>
24 <style>
25 html,
26 body {
27 margin: 0;
28 padding: 0;
29 background: #0a0c12;
30 font-family: ui-sans-serif, system-ui, sans-serif;
31 }
32 .stage {
33 position: relative;
34 width: 1920px;
35 height: 1080px;
36 transform-origin: top left;
37 transform: scale(0.5);
38 overflow: hidden;
39 }
40 .card-host {
41 position: absolute;
42 left: 0;
43 top: 0;
44 width: 1920px;
45 height: 1080px;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="stage">
51 <div class="card-host">
52 <div class="card" data-card-id="ref-editorial">
53 <style>
54 .card[data-card-id="ref-editorial"] .root {
55 --bg: #f1e8d5;
56 --ink: #0e1018;
57 --muted: #6b6353;
58 --accent: #ff3a2d;
59 --accent2: #1f6bff;
60 --accent3: #f2cf3a;
61 /* IMPORTANT — this skill only ships Caveat / LXGW WenKai TC / Inter / Virgil.
62 Playfair Display is NOT bundled; if you list it first the font resolver
63 can't load it and you'll get inconsistent rendering across machines.
64 The editorial look uses italic-bold serif at large size — ui-serif on
65 macOS resolves to Times/New York which is close enough; for a real
66 Playfair you'd need to add the woff2 to public/fonts/. */
67 --font-head: ui-serif, "Songti SC", "Times New Roman", serif;
68 --font-body: ui-serif, "Songti SC", serif;
69 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
70
71 width: 100%;
72 height: 100%;
73 position: relative;
74 overflow: hidden;
75 background: var(--bg);
76 padding: 56px 64px;
77 box-sizing: border-box;
78 display: flex;
79 flex-direction: column;
80 justify-content: center;
81 gap: 24px;
82 color: var(--ink);
83 font-family: var(--font-body);
84 }
85 .card[data-card-id="ref-editorial"] .kicker {
86 align-self: flex-start;
87 padding: 8px 16px;
88 background: var(--ink);
89 color: var(--bg);
90 font: 700 16px/1 var(--font-mono);
91 letter-spacing: 0.22em;
92 }
93 .card[data-card-id="ref-editorial"] .title {
94 margin: 0;
95 font: italic 800 132px/0.95 var(--font-head);
96 color: var(--ink);
97 letter-spacing: -0.01em;
98 max-width: 92%;
99 }
100 .card[data-card-id="ref-editorial"] .first {
101 font-style: italic;
102 color: var(--accent);
103 }
104 .card[data-card-id="ref-editorial"] .quote-mark {
105 font: 800 220px/0.5 var(--font-head);
106 color: var(--accent);
107 position: absolute;
108 top: 24px;
109 right: 64px;
110 opacity: 0.9;
111 }
112 .card[data-card-id="ref-editorial"] .detail {
113 margin: 0;
114 font: 28px/1.5 var(--font-body);
115 color: var(--muted);
116 max-width: 78%;
117 }
118 .card[data-card-id="ref-editorial"] .hl {
119 background: linear-gradient(transparent 62%, rgba(255, 58, 45, 0.22) 62%);
120 color: var(--ink);
121 padding: 0 4px;
122 }
123 .card[data-card-id="ref-editorial"] .accents {
124 position: absolute;
125 }
126 .card[data-card-id="ref-editorial"] .block-coral {
127 top: 64px;
128 right: 88px;
129 width: 96px;
130 height: 96px;
131 background: var(--accent);
132 transform: rotate(12deg);
133 }
134 .card[data-card-id="ref-editorial"] .dot-yellow {
135 top: 200px;
136 right: 60px;
137 width: 36px;
138 height: 36px;
139 background: var(--accent3);
140 border-radius: 50%;
141 }
142 .card[data-card-id="ref-editorial"] .ring-blue {
143 bottom: 80px;
144 right: 80px;
145 width: 80px;
146 height: 80px;
147 border: 4px solid var(--accent2);
148 border-radius: 50%;
149 }
150 </style>
151
152 <div class="root">
153 <span
154 class="accents block-coral"
155 data-anim="scale-pop"
156 data-anim-at="0.15"
157 data-anim-duration="0.5"
158 ></span>
159 <span
160 class="accents dot-yellow"
161 data-anim="fade-in"
162 data-anim-at="0.35"
163 data-anim-duration="0.4"
164 ></span>
165 <span
166 class="accents ring-blue"
167 data-anim="fade-in"
168 data-anim-at="0.55"
169 data-anim-duration="0.4"
170 ></span>
171
172 <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
173 >TAKEAWAY</span
174 >
175
176 <h1 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.6">
177 <span class="first">真</span>正的创造，从拒绝套路开始。
178 </h1>
179
180 <p class="detail" data-anim="fade-in" data-anim-at="0.8" data-anim-duration="0.45">
181 停止模仿、停止套模板，把每一个想法都当作<span class="hl">第一次表达</span>。
182 只有这样，作品才会带上你的体温。
183 </p>
184 </div>
185 </div>
186 </div>
187 </div>
188 </body>
189</html>