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

17
docs/design-system/preview/greebling-grain.html Normal file
View file

@ -0,0 +1,17 @@
<!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:0;box-sizing:border-box;display:flex;font-family:var(--font-body)}
.panel{flex:1;height:160px;position:relative;display:flex;align-items:flex-end;padding:16px;box-sizing:border-box;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:200px;opacity:.04;transition:opacity var(--dur-slow) var(--ease-out)}
.panel.hi::before{opacity:.08}
.lab{position:relative;font-family:var(--font-mono);font-size:11px;color:var(--fg-2)}
.divider{width:1px;background:var(--hairline)}
</style></head><body>
<div class="wrap">
<div class="panel"><span class="lab">grain · rest 4%</span></div>
<div class="divider"></div>
<div class="panel hi"><span class="lab">grain · hover 8%</span></div>
</div>
</body></html>