paperclipai/paperclip-docs
1
0 Fork 0
mirror of https://github.com/paperclipai/paperclip-docs.git synced 2026-11-07 06:16:07 -10:00
Code Issues Packages Projects Releases Wiki Activity

merge: main into nightly (brand alignment + mobile top-bar fixes #17)

Browse Source
This commit is contained in:
Aron Prins committed 2026-05-28 18:08:42 +02:00
2 parents 51b9fe35bb 515366b322
commit b0416956ef
3 files changed
+88 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/app.js
+3 -5
View File
@@ -16,8 +16,7 @@ const TIER_ORDER = ['Learn', 'Administration', 'Reference'];
/* ─── Theme bootstrap (before first paint of body) ──────────────────────── */
(function() {
const saved = localStorage.getItem('pc-guides-theme')
|| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
const saved = localStorage.getItem('pc-guides-theme') || 'dark';
if (saved === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
else document.documentElement.removeAttribute('data-theme');
})();
@@ -559,9 +558,8 @@ function initSearch() {
input.addEventListener('focus', () => { if (input.value.trim()) renderSearchResults(input.value); });
// Open modal from the navbar trigger button
const trigger = document.getElementById('search-trigger');
if (trigger) trigger.addEventListener('click', openSearchModal);
// Open modal from any navbar trigger button (desktop right + mobile left)
document.querySelectorAll('.js-search-open').forEach(btn => btn.addEventListener('click', openSearchModal));
// Click backdrop to close
const backdrop = document.getElementById('search-modal-backdrop');
site/index.html
+21 -6
View File
@@ -4,6 +4,13 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Paperclip Docs</title>
<script>
/* Apply theme before first paint (dark by default) to avoid a flash. */
(function () {
var saved = localStorage.getItem('pc-guides-theme') || 'dark';
if (saved === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
@@ -17,6 +24,16 @@
<header id="header" class="navbar">
<div class="navbar-inner">
<div class="navbar-left">
<button class="icon-btn navbar-hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
<path d="M3 5h12M3 9h12M3 13h12"/>
</svg>
</button>
<button class="navbar-search-btn navbar-search-mobile js-search-open" aria-label="Search docs" aria-haspopup="dialog">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true">
<circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/>
</svg>
</button>
<a href="https://paperclip.ing/blog" class="navbar-link">Blog</a>
<a href="#" class="navbar-link" data-nav="home">Docs</a>
<a href="https://github.com/paperclipai/paperclip" class="navbar-link navbar-link--icon" target="_blank" rel="noopener" aria-label="GitHub">
@@ -34,18 +51,16 @@
<a class="navbar-logo-link navbar-logo-sub" href="https://docs.paperclip.ing">Docs</a>
</div>
<div class="navbar-right">
<button class="icon-btn" id="hamburger" aria-label="Open menu" aria-expanded="false">
<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
<path d="M3 5h12M3 9h12M3 13h12"/>
</svg>
</button>
<button id="search-trigger" class="navbar-search-btn" aria-label="Search docs" aria-haspopup="dialog">
<button id="search-trigger" class="navbar-search-btn js-search-open" aria-label="Search docs" aria-haspopup="dialog">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true">
<circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/>
</svg>
<span class="navbar-search-label">Search</span>
<kbd class="navbar-search-kbd">⌘K</kbd>
</button>
<a href="https://github.com/paperclipai/paperclip" class="navbar-link navbar-link--icon navbar-github-mobile" target="_blank" rel="noopener" aria-label="GitHub">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
</a>
<a href="https://github.com/paperclipai/paperclip" class="navbar-cta" target="_blank" rel="noopener">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
Star<span class="navbar-cta-count" data-star-count hidden></span>
site/styles.css
+64 -34
View File
@@ -11,13 +11,18 @@
--graphite: #52585d; /* secondary text */
--ash: #9a958a; /* muted text */
--void: #141413; /* charcoal */
--green: #22c55e; /* accent */
--mint: #dcfce7; /* accent tint */
--amber: #f59e0b;
--red: #b23030;
--green: #22c55e; /* signal / success */
--green-deep: #188a3c; /* success deep */
--mint: #dcfce7; /* success soft tint */
--amber: #f59e0b; /* warning */
--amber-deep: #b45309; /* warning deep */
--blue: #2563eb; /* info */
--blue-deep: #1d4ed8; /* info deep */
--red: #dc2626; /* error */
--red-deep: #991b1b; /* error deep */
--sidebar-w: 272px;
--content-max: 760px;
--content-max: 920px; /* fills the 1280 layout (1232 inner − 272 sidebar − 40 gap) so the doc body lines up with header/footer */
--outer-px: 24px;
--layout-max: 1280px;
@@ -29,8 +34,12 @@
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--radius-sm: 8px;
--radius: 12px;
/* Brand radius scale — "each radius signals meaning" */
--radius-xs: 4px; /* status pills, code chips, table cells */
--radius-sm: 10px; /* inputs, small cards, buttons, menus */
--radius: 16px; /* default card / panel / feature block (md) */
--radius-lg: 24px; /* large surfaces */
--radius-pill: 9999px; /* PRIMARY CTA ONLY */
--transition: 0.2s ease;
}
@@ -42,8 +51,8 @@
--stone: #2f2c28; /* rule / border */
--stone-dark: #3a3836; /* border hover */
--ink: #f3e6c4; /* manila — primary text */
--graphite: #b5b0a8; /* secondary text */
--ash: #9a958a; /* muted text */
--graphite: #9a958a; /* secondary text (brand --text-2 dark) */
--ash: #8a8579; /* muted text — raised from brand #6E6960 for WCAG AA (~5:1) since --ash is reused for normal-size text */
--void: #0d0d0d;
--mint: rgba(34,197,94,0.12);
}
@@ -59,6 +68,7 @@
body {
background: var(--linen); color: var(--ink);
font-family: var(--font-body); line-height: 1.65;
font-feature-settings: 'ss01' 1, 'cv11' 1;
min-height: 100vh;
transition: background 0.25s, color 0.25s;
}
@@ -131,6 +141,12 @@
align-items: center;
gap: 0.35rem;
}
/* GitHub icon shown next to Star on mobile only (desktop uses the left nav link) */
.navbar-github-mobile { display: none; }
.navbar-github-mobile svg { width: 18px; height: 18px; }
/* Search trigger duplicated on the left for mobile; hidden on desktop.
Scoped to .navbar-left so it beats the base .navbar-search-btn display. */
.navbar-left .navbar-search-mobile { display: none; }
.navbar-cta {
display: inline-flex;
align-items: center;
@@ -159,7 +175,7 @@
padding: 0 10px 0 10px;
background: transparent;
border: 1px solid var(--stone);
border-radius: 9999px;
border-radius: var(--radius-sm);
color: var(--graphite);
font-family: var(--font-body);
font-size: 0.85rem;
@@ -178,7 +194,7 @@
color: var(--ash);
background: var(--linen);
border: 1px solid var(--stone);
border-radius: 5px;
border-radius: var(--radius-xs);
padding: 1px 5px;
pointer-events: none;
}
@@ -223,7 +239,7 @@
max-width: 600px;
background: var(--white);
border: 1px solid var(--stone);
border-radius: var(--radius);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
animation: search-pop 0.16s var(--transition) both;
@@ -252,7 +268,7 @@
position: absolute; right: 16px; top: 28px; transform: translateY(-50%);
font-size: 11px; color: var(--ash);
background: var(--linen); border: 1px solid var(--stone);
border-radius: 5px; padding: 1px 6px;
border-radius: var(--radius-xs); padding: 1px 6px;
font-family: var(--font-mono);
pointer-events: none;
}
@@ -349,7 +365,7 @@
#landing-title {
font-family: var(--font-serif);
font-size: clamp(40px, 6vw, 64px);
font-weight: 600; line-height: 1.05; letter-spacing: -0.03em;
font-weight: 600; line-height: 1.05; letter-spacing: -0.04em;
color: var(--ink); margin-bottom: 20px;
}
#landing-title em { font-style: italic; color: inherit; }
@@ -372,7 +388,7 @@
.card:hover { border-color: var(--stone-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,26,26,0.04); }
.card-icon {
width: 36px; height: 36px; border-radius: 9px;
width: 36px; height: 36px; border-radius: var(--radius-sm);
background: var(--parchment); border: 1px solid var(--stone);
display: flex; align-items: center; justify-content: center;
color: var(--graphite); margin-bottom: 4px;
@@ -508,6 +524,9 @@
}
.sb-back:hover { color: var(--ink); background: var(--parchment); }
.sb-back svg { width: 12px; height: 12px; }
/* Desktop sidebar has no horizontal padding + overflow-y forces overflow-x:auto,
which clips a negative margin. Align flush instead so the chevron isn't cut off. */
#sidebar .sb-back { margin-left: 0; padding-left: 10px; }
.sb-section { margin-bottom: 4px; }
@@ -616,7 +635,7 @@
background: var(--linen);
}
.meta-row .chip {
padding: 2px 8px; border-radius: 99px;
padding: 2px 8px; border-radius: var(--radius-xs);
background: var(--parchment); border: 1px solid var(--stone);
font-size: 11px; color: var(--graphite);
}
@@ -634,9 +653,9 @@
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.page-actions .pa-btn:hover { border-color: var(--stone-dark); color: var(--ink); }
.page-actions .pa-copy { border-radius: 99px 0 0 99px; padding-left: 12px; }
.page-actions .pa-copy { border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding-left: 12px; }
.page-actions .pa-caret {
border-radius: 0 99px 99px 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
border-left: none;
padding: 5px 8px;
}
@@ -683,7 +702,7 @@
padding: 20px 22px;
background: var(--parchment);
border: 1px solid var(--stone);
border-radius: 12px;
border-radius: var(--radius);
display: flex; flex-wrap: wrap; align-items: center;
gap: 14px 20px;
}
@@ -700,7 +719,7 @@
padding: 7px 12px;
background: var(--white);
border: 1px solid var(--stone);
border-radius: 8px;
border-radius: var(--radius-sm);
font-size: 13px; font-weight: 500;
color: var(--graphite);
text-decoration: none;
@@ -729,7 +748,7 @@
padding: 5px 10px 5px 12px;
background: var(--white);
border: 1px solid var(--stone);
border-radius: 99px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 11.5px; font-weight: 500;
color: var(--graphite); cursor: pointer;
@@ -746,7 +765,7 @@
.toc-toggle[aria-expanded="true"] > svg:last-of-type { transform: rotate(180deg); color: var(--ink); }
.toc-toggle .count {
font-size: 10px; color: var(--ash);
background: var(--parchment); border-radius: 99px;
background: var(--parchment); border-radius: var(--radius-xs);
padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.toc-toggle[aria-expanded="true"] .count { background: var(--white); }
@@ -867,14 +886,16 @@
#article code {
font-family: var(--font-mono); font-size: 0.87rem;
font-variant-numeric: tabular-nums;
background: var(--parchment); border: 1px solid var(--stone);
border-radius: 5px; padding: 1px 6px; color: var(--ink);
border-radius: var(--radius-xs); padding: 1px 6px; color: var(--ink);
}
#article pre {
background: var(--void); color: #d4d4d4;
border-radius: var(--radius-sm); padding: 18px 20px;
overflow-x: auto; margin-bottom: 20px;
font-family: var(--font-mono); font-size: 0.87rem; line-height: 1.6;
font-variant-numeric: tabular-nums;
}
#article pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
@@ -957,24 +978,24 @@
.callout-icon svg { width: 16px; height: 16px; }
.callout-note .callout-icon { color: var(--graphite); }
.callout-info .callout-icon { color: #1d4ed8; }
.callout-tip .callout-icon { color: #15803d; }
.callout-warning .callout-icon { color: #92400e; }
.callout-danger .callout-icon { color: #b91c1c; }
.callout-tip .callout-icon { color: #188a3c; }
.callout-warning .callout-icon { color: #b45309; }
.callout-danger .callout-icon { color: #991b1b; }
.callout-body { flex: 1; min-width: 0; }
.callout-body p { color: inherit; margin-bottom: 0 !important; }
.callout-body p + p { margin-top: 12px; }
.callout-note { background: var(--parchment); border: 1px solid var(--stone-dark); }
.callout-info { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.28); }
.callout-info { background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.28); }
.callout-tip { background: var(--mint); border: 1px solid rgba(34,197,94,0.30); }
.callout-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.30); }
.callout-danger { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.28); }
.callout-danger { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.28); }
.callout-note .callout-label { color: var(--graphite); font-weight: 600; }
.callout-info .callout-label { color: #1d4ed8; font-weight: 600; }
.callout-tip .callout-label { color: #15803d; font-weight: 600; }
.callout-warning .callout-label { color: #92400e; font-weight: 600; }
.callout-danger .callout-label { color: #b91c1c; font-weight: 600; }
.callout-tip .callout-label { color: #188a3c; font-weight: 600; }
.callout-warning .callout-label { color: #b45309; font-weight: 600; }
.callout-danger .callout-label { color: #991b1b; font-weight: 600; }
/* Tabs */
.tabs-container { margin-bottom: 24px; }
@@ -1123,14 +1144,23 @@
#content { padding: 28px 0 64px; }
#body { padding: 0 24px; }
.navbar-inner { padding: 0 16px; }
.navbar-left .navbar-link:not(.navbar-link--icon) { display: none; }
.navbar-link--icon span { display: none; }
.navbar-logo-sub { display: none; }
.navbar-left .navbar-link { display: none; } /* hide Blog, Docs, desktop GitHub */
.navbar-github-mobile { display: inline-flex; } /* GitHub icon left of Star */
.navbar-right .navbar-search-btn { display: none; } /* desktop search hidden... */
.navbar-left .navbar-search-mobile { display: inline-flex; } /* ...moved left, next to hamburger */
.navbar-search-label, .navbar-search-kbd { display: none; }
.navbar-search-btn { padding: 0 9px; width: 32px; }
/* Balanced sides (hamburger+search | logo | GitHub+Star) let the logo centre on its own */
.navbar-cta-count { display: none; } /* drop star count to balance the bar */
.navbar-cta { padding: 0.35rem 0.7rem; }
.theme-toggle { bottom: 14px; right: 14px; }
#search-input { font-size: 16px; }
}
@media (max-width: 360px) {
/* Very narrow phones: drop the "Docs" suffix so hamburger+search | logo | GitHub+Star
fits without the header overflowing (min content width is ~352px otherwise). */
.navbar-logo-sub { display: none; }
}
@media (max-width: 820px) {
.page-actions .pa-copy-label,
.toc-toggle .toc-label { display: none; }