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

30
docs/design-system/preview/greebling-accents.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground-dark);padding:0;box-sizing:border-box;display:flex;font-family:var(--font-body)}
.panel{flex:1;height:180px;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:240px;opacity:.06;mix-blend-mode:screen}
.m{position:absolute;filter:invert(60%) sepia(18%) saturate(360%) brightness(95%);transition:opacity var(--dur-slow) var(--ease-out)}
.lab{position:absolute;left:16px;bottom:12px;font-family:var(--font-mono);font-size:11px;color:var(--fg-on-dark-2);z-index:2}
.divider{width:1px;background:var(--hairline-on-dark)}
/* loose, non-rigid placement */
.a1{width:96px;top:24px;left:34px;transform:rotate(-4deg);opacity:.26}
.a2{width:30px;top:104px;left:150px;transform:rotate(6deg);opacity:.3}
.a3{width:50px;top:54px;right:54px;opacity:.24}
.b1{width:80px;top:34px;left:60px;transform:rotate(3deg);opacity:.28}
.b2{width:34px;bottom:40px;left:40px;opacity:.28}
.b3{width:44px;top:30px;right:40px;opacity:.26}
</style></head><body>
<div class="wrap">
<div class="panel">
<img class="m a1" src="../assets/accent-ringdots.svg"><img class="m a2" src="../assets/accent-pipes.svg"><img class="m a3" src="../assets/accent-dots.svg">
<span class="lab">simple marks · loose placement · visit-three subtlety</span>
</div>
<div class="divider"></div>
<div class="panel">
<img class="m b1" src="../assets/accent-dots.svg"><img class="m b2" src="../assets/accent-concentric.svg"><img class="m b3" src="../assets/accent-ringdots.svg">
<span class="lab">non-rigid · throughout</span>
</div>
</div>
</body></html>