zhukang
1c7abd81d1
- 310 registry:skill items, 1528 files, 7 categories (hub tags) - registry.json generated by @kortix/registry buildRegistry - nested SKILL.md in sn-da-* renamed SUBSKILL.md (no phantom skills) - provenance + licenses: SOURCES.md
83 lines
3.5 KiB
HTML
83 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="fonts.css" />
|
|
<meta charset="UTF-8" />
|
|
<title>Light Leak Cinema · REEL 03</title>
|
|
<link rel="stylesheet" href="tailwind.css" />
|
|
|
|
<style>
|
|
body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; }
|
|
.frame {
|
|
position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto;
|
|
background:#1a0d08;
|
|
overflow:hidden;
|
|
}
|
|
.scene {
|
|
position:absolute; inset:0;
|
|
background:
|
|
radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%),
|
|
radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%),
|
|
linear-gradient(180deg, transparent 60%, #d97757 110%),
|
|
radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%),
|
|
linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%);
|
|
}
|
|
.grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
|
/* scratches */
|
|
.scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; }
|
|
.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); }
|
|
.perfs {
|
|
position:absolute; left:0; right:0; height:6px;
|
|
background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px);
|
|
opacity:0.5;
|
|
}
|
|
.cream { color:#f5e9d6; }
|
|
.mono { font-family:'IBM Plex Mono',monospace; }
|
|
.display { font-family:'EB Garamond','Noto Serif SC',serif; }
|
|
.chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-6" style="background:#000">
|
|
<div class="frame">
|
|
<div class="scene"></div>
|
|
|
|
<!-- scratches -->
|
|
<div class="scratch" style="left:14%;height:38%"></div>
|
|
<div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div>
|
|
<div class="scratch" style="left:71%;height:30%;top:55%"></div>
|
|
|
|
<!-- letterbox bars - actually built into aspect ratio container; perfs on top -->
|
|
|
|
<!-- top caption -->
|
|
<header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10">
|
|
<span>REEL 03 · CH I · MMXXVI</span>
|
|
<span>A Quiet Year in Berlin</span>
|
|
<span>00:03:21</span>
|
|
</header>
|
|
|
|
<!-- main text -->
|
|
<main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%">
|
|
<div class="chip mono opacity-70">Reel III · Title</div>
|
|
<h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6">
|
|
A Quiet Year<br/>
|
|
<span style="font-style:italic">in</span> Berlin.
|
|
</h1>
|
|
<p class="display mt-4 italic opacity-80 text-[22px]">
|
|
A short film about typesetting, in fourteen reels.
|
|
</p>
|
|
</main>
|
|
|
|
<!-- bottom right meta -->
|
|
<footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10">
|
|
<span>52.5200° N · 13.4050° E</span>
|
|
<span>FILMED ON 35MM · PROXY 1080P</span>
|
|
<span>FRAME · LIGHT-LEAK-CINEMA</span>
|
|
</footer>
|
|
|
|
<div class="grain"></div>
|
|
<div class="vignette"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|