PayloadCredit.astro (2866B)
1 --- 2 import Icon from './Icon.astro'; 3 import { url } from '../lib/url'; 4 interface Props { topic: string; sourceUrl: string; sha: string } 5 const { topic, sourceUrl, sha } = Astro.props; 6 --- 7 <aside class="patt-credit corners" aria-label="Attribution"> 8 <span class="patt-badge">mirror</span> 9 <span class="patt-credit__text"> 10 Mirrored from <a href="https://github.com/swisskyrepo/PayloadsAllTheThings" target="_blank" rel="noopener">PayloadsAllTheThings</a> 11 <span class="muted">›</span> {topic} 12 <span class="patt-lic">MIT · <a href={url('credits')}>credits</a> · <code>{sha.slice(0, 7)}</code></span> 13 </span> 14 <a class="patt-src" href={sourceUrl} target="_blank" rel="noopener" aria-label="View source on GitHub"> 15 <Icon name="github" style="width:15px;height:15px;" /> source 16 </a> 17 </aside> 18 19 <style> 20 /* ---- Credit panel as a terminal plate ---------------------------------- 21 The same object the prose callouts are (prose.css): a square plate with 22 corner brackets, a left accent bar, and JetBrains Mono provenance 23 micro-labels. Cross-theme in the same direction, too — on the cream 24 page the palette is pinned to night so the panel reads as a terminal; 25 on the night page it flips to a dawn (cream) plate, paper floating on 26 the dark. The pin is written out (as the callout's is) rather than 27 taken from `.plate`/`.plate-dawn`, so the flip stays one rule. */ 28 .patt-credit { 29 --base: #191724; --surface: #1f1d2e; --overlay: #26233a; 30 --text: #e0def4; --subtle: #908caa; --muted: #8b87a3; 31 --love: #eb6f92; --gold: #f6c177; --rose: #ebbcba; 32 --pine: #9ccfd8; --foam: #9ccfd8; --iris: #c4a7e7; 33 --rule: rgba(224, 222, 244, 0.16); 34 --fg: var(--text); --fg-dim: var(--subtle); --fg-faint: var(--muted); 35 --accent: var(--iris); 36 background: var(--surface); 37 border: 1px solid var(--rule); 38 border-left: 2px solid var(--accent); 39 padding: 0.85rem 1.05rem; 40 } 41 /* Night page: flip the same object to a dawn (cream) plate. */ 42 :global(:root[data-theme='dark']) .patt-credit { 43 --base: #faf4ed; --surface: #fffaf3; --overlay: #f2e9e1; 44 --text: #575279; --subtle: #635f7c; --muted: #6e6a86; 45 --love: #b4637a; --gold: #ea9d34; --rose: #d7827e; 46 --pine: #286983; --foam: #56949f; --iris: #907aa9; 47 --rule: rgba(87, 82, 121, 0.22); 48 --accent: var(--iris); 49 } 50 /* Provenance metadata is terminal furniture: badge, licence line (sha 51 included) and the source link all set in JetBrains Mono. */ 52 .patt-badge, 53 .patt-lic, 54 .patt-src { 55 font-family: var(--font-term, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace); 56 } 57 .patt-badge { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); } 58 .patt-src:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); } 59 </style>