31 lines
2.1 KiB
HTML
31 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>双区对照与大留白 · 排版示例</title>
|
|
<style>
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:#e4e6e1;color:#243230}
|
|
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
|
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
|
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
|
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
|
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
|
.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
|
|
.pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
|
|
@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
|
|
.pl-sheet.split-contrast .dark{position:absolute;left:0;top:48%;width:100%;height:52%;background:var(--deep)}.pl-sheet.split-contrast .title{left:7%;top:12%;font-size:7.5em}.pl-sheet.split-contrast .answer{position:absolute;left:7%;top:59%;font-size:7.5em;line-height:1.1;color:var(--paper);margin:0}.pl-sheet.split-contrast .copy{left:7%;bottom:10%;width:80%;color:var(--paper)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="pl-frame"><article class="pl-sheet split-contrast" aria-label="双区对照与大留白排版示例">
|
|
<div class="dark" aria-hidden="true"></div>
|
|
<h1 class="title">看见留白</h1>
|
|
<h2 class="answer">读懂秩序</h2>
|
|
<p class="copy">从空间到关系 / TWO PERSPECTIVES</p>
|
|
<div class="edition"><span>FORM / STUDIES</span><span>2026 · 11</span></div>
|
|
</article></div>
|
|
</body>
|
|
</html>
|