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

22
docs/design-system/preview/buttons.html Normal file
View file

@ -0,0 +1,22 @@
<!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:28px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
button{font-family:var(--font-body);font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
.solid{background:var(--ink-900);color:var(--bone-50);border:none;padding:11px 22px;border-radius:var(--radius-sm)}
.solid:hover{background:var(--espresso-700)}
.ghost{background:transparent;color:var(--ink-900);border:1px solid var(--hairline-strong);padding:10px 21px;border-radius:var(--radius-sm)}
.ghost:hover{border-color:var(--ink-900)}
.textlink{background:none;border:none;color:var(--ink-900);padding:6px 2px;position:relative;font-size:13px}
.textlink::after{content:"";position:absolute;left:2px;bottom:2px;height:1px;width:0;background:var(--accent-deep);transition:width var(--dur-base) var(--ease-out)}
.textlink:hover::after{width:calc(100% - 4px)}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);width:100%}
</style></head><body>
<div class="wrap">
<button class="solid">Read the latest</button>
<button class="ghost">View work</button>
<button class="textlink">Get in touch →</button>
<span class="lab">solid · ghost · text-link (ochre underline grows on hover)</span>
</div>
</body></html>