joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Josh Bairstow 2026-06-01 19:35:56 +10:00
commit 3ba76b4f02
90 changed files with 12507 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
docs/design-system/preview/cutout.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:26px;align-items:center}
.cut{width:150px;height:184px;position:relative;flex:none;
border-radius:8px 80px 8px 8px;overflow:hidden;
background:radial-gradient(120% 90% at 72% 12%, #C9B299 0%, #7A5C3E 38%, #3B2C1E 72%, #1E1A16 100%);}
.cut::after{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:180px;opacity:.10;mix-blend-mode:overlay}
.mark{position:absolute;right:12px;bottom:12px;width:70px;opacity:.12;filter:invert(1)}
.meta h4{font-family:var(--font-display);font-size:21px;color:var(--fg-1);margin:0 0 8px}
.meta p{font-size:12.5px;color:var(--fg-2);line-height:1.55;margin:0;max-width:280px}
.meta code{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep)}
</style></head><body>
<div class="wrap">
<div class="cut"><img class="mark" src="../assets/mark-rings.svg"></div>
<div class="meta">
<h4>Never a plain rectangle</h4>
<p>Imagery is clipped to a rounded cut-out and carries the rings watermark at 4–10%. Warm chiaroscuro placeholder shown.</p>
<p style="margin-top:8px"><code>border-radius: 6px 92px 6px 6px</code></p>
</div>
</div>
</body></html>