Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ```
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <style>
- @import url("https://fontsapi.zeoseven.com/309/main/result.css"); /* KingHwaOldSong */
- :root{
- --paper-a: #f7f5f0;
- --paper-b: #eee8dc;
- --ink: #2f2f2f;
- --muted: #6a645c;
- --bronze: #a89f91;
- --line: rgba(0,0,0,.08);
- }
- .tsuki-logline {
- position: relative;
- margin: 18px auto 26px;
- max-width: 1120px; /* максимум, дальше не растёт */
- width: 100%; /* занимает доступную ширину родителя */
- color: var(--ink);
- background:
- repeating-linear-gradient(
- 0deg,
- rgba(0,0,0,.012) 0px,
- rgba(0,0,0,.012) 1px,
- rgba(0,0,0,0) 22px
- ),
- linear-gradient(135deg, var(--paper-a), var(--paper-b));
- border-radius: 2px;
- box-shadow:
- 0 10px 30px -12px rgba(0,0,0,.18),
- 0 0 0 1px rgba(0,0,0,.035),
- inset 0 0 18px rgba(255,255,255,.55);
- overflow: hidden;
- }
- .tsuki-logline::before{
- content:"";
- position:absolute;
- inset: 10px;
- border: 1px solid rgba(168,159,145,.22);
- pointer-events:none;
- }
- .tsuki-logline::after{
- content:"FIELD NOTE";
- position:absolute;
- right: 14px;
- top: 12px;
- font: 700 0.62rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
- letter-spacing: .22em;
- color: rgba(168,159,145,.9);
- transform: rotate(-2deg);
- text-transform: uppercase;
- pointer-events:none;
- }
- .logline-inner{
- padding: 18px 18px 16px 18px;
- }
- .logline-head{
- display:flex;
- flex-wrap:wrap;
- gap: 8px 10px;
- align-items: baseline;
- padding-bottom: 10px;
- border-bottom: 1px dashed var(--line);
- }
- .logline-time{
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
- font-size: 0.78rem;
- color: var(--muted);
- letter-spacing: .02em;
- white-space: nowrap;
- }
- .logline-sep{
- color: var(--bronze);
- opacity: .7;
- transform: translateY(-1px);
- }
- .logline-place{
- font-family: "KingHwaOldSong", "kinghwaoldsong", "Playfair Display", "Noto Serif SC", serif;
- font-size: 1.02rem;
- font-weight: 400;
- }
- .logline-scene{
- margin-top: 12px;
- font-family: "Playfair Display", "Noto Serif SC", serif;
- font-size: 0.95rem;
- line-height: 1.65;
- color: #3a3a3a;
- text-align: justify;
- }
- .logline-quote{
- margin-top: 12px;
- padding: 12px 12px 12px 14px;
- border-left: 2px solid rgba(168,159,145,.55);
- background: rgba(255,255,255,.28);
- box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
- }
- .logline-quote span{
- display:block;
- font-family: "KingHwaOldSong", "kinghwaoldsong", "Playfair Display", serif;
- font-size: 1.05rem;
- line-height: 1.55;
- color: #2e2e2e;
- font-style: italic;
- }
- @media (max-width: 520px){
- .tsuki-logline{
- max-width: 100%;
- margin: 14px auto 22px;
- }
- .logline-inner{ padding: 14px 14px 12px; }
- .tsuki-logline::before{ inset: 8px; }
- .logline-place{ font-size: 0.98rem; }
- .logline-scene{ font-size: 0.92rem; }
- .logline-quote span{ font-size: 1.0rem; }
- }
- </style>
- <div class="tsuki-logline">
- <div class="logline-inner">
- <div class="logline-head">
- <span class="logline-time">$1</span>
- <span class="logline-sep">｜</span>
- <span class="logline-place">$2</span>
- </div>
- <div class="logline-scene">$3</div>
- <div class="logline-quote">
- <span>$4</span>
- </div>
- </div>
- </div>
- </body>
- </html>
- ```
Advertisement
Add Comment
Please, Sign In to add comment
