Skip to content

Commit a421234

Browse files
barrykingbarryking
committed
Docs. Mobile responsive update.
1 parent 96a2656 commit a421234

1 file changed

Lines changed: 94 additions & 15 deletions

File tree

‎site/index.html‎

Lines changed: 94 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,18 @@
4444
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 500; }
4545
.nav-links a { color: var(--text-secondary); }
4646
.nav-links a:hover { color: var(--text); text-decoration: none; }
47+
.nav-toggle {
48+
display: none; background: none; border: none; cursor: pointer;
49+
padding: 4px; margin-left: auto; flex-direction: column; gap: 5px;
50+
width: 28px;
51+
}
52+
.nav-toggle span {
53+
display: block; width: 100%; height: 2px; background: var(--text);
54+
border-radius: 1px; transition: transform 0.2s, opacity 0.2s;
55+
}
56+
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
57+
.nav-toggle.open span:nth-child(2) { opacity: 0; }
58+
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
4759

4860
/* HERO */
4961
.hero {
@@ -98,6 +110,7 @@
98110
section h2 { font-size: 28px; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.5px; }
99111

100112
/* BENCHMARK TABLE */
113+
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
101114
.bench-table { width: 100%; border-collapse: collapse; font-size: 14px; }
102115
.bench-table th, .bench-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
103116
.bench-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); font-weight: 600; }
@@ -123,7 +136,7 @@
123136
.api-group { margin-bottom: 32px; }
124137
.api-group h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--accent); }
125138
.api-item { margin-bottom: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
126-
.api-sig { font-family: var(--mono); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
139+
.api-sig { font-family: var(--mono); font-size: 13px; font-weight: 600; margin-bottom: 6px; overflow-x: auto; }
127140
.api-desc { font-size: 14px; color: var(--text-secondary); }
128141

129142
/* FEATURES */
@@ -244,13 +257,60 @@
244257
.pg-md-out blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--text-secondary); margin: 0 0 0.8em; }
245258
.pg-md-out hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
246259

260+
/* TABLET */
247261
@media (max-width: 768px) {
262+
.nav-toggle { display: flex; }
263+
.nav-links {
264+
display: none; flex-direction: column; gap: 0;
265+
position: absolute; top: 100%; left: 0; right: 0;
266+
background: rgba(255,255,255,0.98); backdrop-filter: blur(8px);
267+
border-bottom: 1px solid var(--border);
268+
padding: 8px 0;
269+
}
270+
.nav-links.open { display: flex; }
271+
.nav-links a { padding: 10px 24px; }
272+
.desktop-only { display: none; }
273+
.hero { padding: 56px 24px 48px; }
248274
.hero h1 { font-size: 32px; }
275+
.hero .subtitle { font-size: 16px; }
276+
.hero-stat .number { font-size: 26px; }
249277
.hero-stats { gap: 24px; }
250-
.pg-body { grid-template-columns: 1fr; }
278+
.features-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
279+
.pg-header {
280+
gap: 10px;
281+
}
282+
.pg-toggle { margin-left: 0; }
283+
.pg-body { grid-template-columns: 1fr; min-height: auto; }
251284
.pg-sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: none; }
252285
}
253286

287+
/* SMALL PHONE */
288+
@media (max-width: 480px) {
289+
.nav-inner { padding: 10px 16px; }
290+
.hero { padding: 40px 16px 36px; }
291+
.hero h1 { font-size: 26px; letter-spacing: -0.5px; }
292+
.hero .subtitle { font-size: 15px; }
293+
.hero-stat .number { font-size: 22px; }
294+
.hero-stat .label { font-size: 12px; }
295+
.hero-stats { gap: 16px; }
296+
.hero-actions { flex-direction: column; align-items: center; }
297+
.install-cmd { width: 100%; justify-content: center; font-size: 13px; }
298+
section { padding: 0 16px 40px; }
299+
section h2 { font-size: 22px; margin-bottom: 16px; }
300+
pre { padding: 14px 16px; font-size: 12.5px; }
301+
.features-grid { grid-template-columns: 1fr; }
302+
.pg-header { padding: 10px 12px; flex-direction: column; align-items: stretch; }
303+
.pg-header .file-input-wrapper { width: 100%; }
304+
.pg-file-btn { width: 100%; justify-content: center; }
305+
.pg-file-name { max-width: none; }
306+
.pg-toggle { justify-content: space-between; }
307+
.pg-copy-btn { align-self: stretch; justify-content: center; }
308+
.pg-content { padding: 12px; }
309+
.pg-sidebar { padding: 12px; }
310+
.api-item { padding: 12px 14px; }
311+
.api-sig { font-size: 12px; }
312+
}
313+
254314
/* FOOTER */
255315
footer {
256316
text-align: center; padding: 40px 24px; font-size: 13px;
@@ -263,7 +323,10 @@
263323
<nav>
264324
<div class="nav-inner">
265325
<a href="#" class="nav-logo">extractly</a>
266-
<div class="nav-links">
326+
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
327+
<span></span><span></span><span></span>
328+
</button>
329+
<div class="nav-links" id="navLinks">
267330
<a href="#benchmarks">Benchmarks</a>
268331
<a href="#api">API</a>
269332
<a href="#playground">Playground</a>
@@ -275,7 +338,7 @@
275338

276339
<!-- HERO -->
277340
<div class="hero">
278-
<h1>PDF text extraction,<br /><span>built for AI</span></h1>
341+
<h1>PDF text extraction,<br class="desktop-only" /><span>built for AI</span></h1>
279342
<p class="subtitle">
280343
Zero-dependency TypeScript PDF parser designed from scratch for RAG pipelines.
281344
Fast, tiny, runs everywhere.
@@ -308,17 +371,19 @@ <h1>PDF text extraction,<br /><span>built for AI</span></h1>
308371
<!-- BENCHMARKS -->
309372
<section id="benchmarks">
310373
<h2>Performance</h2>
311-
<table class="bench-table">
312-
<thead>
313-
<tr><th>Library</th><th>Small PDF (31 KB)</th><th>Large PDF (1.3 MB)</th><th>Bundle (gzip)</th><th>Deps</th></tr>
314-
</thead>
315-
<tbody>
316-
<tr><td>extractly</td><td>3 ms</td><td>40 ms</td><td>~24 KB</td><td>0</td></tr>
317-
<tr><td>pdfjs-dist</td><td>5 ms</td><td>244 ms</td><td>~1.3 MB</td><td>0 (large)</td></tr>
318-
<tr><td>pdf-parse</td><td>5 ms</td><td>279 ms</td><td>~780 KB</td><td>1</td></tr>
319-
<tr><td>unpdf</td><td>6 ms</td><td>232 ms</td><td>~320 KB</td><td>2</td></tr>
320-
</tbody>
321-
</table>
374+
<div class="table-scroll">
375+
<table class="bench-table">
376+
<thead>
377+
<tr><th>Library</th><th>Small PDF (31 KB)</th><th>Large PDF (1.3 MB)</th><th>Bundle (gzip)</th><th>Deps</th></tr>
378+
</thead>
379+
<tbody>
380+
<tr><td>extractly</td><td>3 ms</td><td>40 ms</td><td>~24 KB</td><td>0</td></tr>
381+
<tr><td>pdfjs-dist</td><td>5 ms</td><td>244 ms</td><td>~1.3 MB</td><td>0 (large)</td></tr>
382+
<tr><td>pdf-parse</td><td>5 ms</td><td>279 ms</td><td>~780 KB</td><td>1</td></tr>
383+
<tr><td>unpdf</td><td>6 ms</td><td>232 ms</td><td>~320 KB</td><td>2</td></tr>
384+
</tbody>
385+
</table>
386+
</div>
322387
<p class="bench-note">Median of 3 runs, Node.js, Apple Silicon.</p>
323388
</section>
324389

@@ -578,6 +643,20 @@ <h4>Document Info</h4>
578643
});
579644
});
580645
})();
646+
(function() {
647+
var toggle = document.getElementById('navToggle');
648+
var links = document.getElementById('navLinks');
649+
toggle.addEventListener('click', function() {
650+
toggle.classList.toggle('open');
651+
links.classList.toggle('open');
652+
});
653+
links.addEventListener('click', function(e) {
654+
if (e.target.tagName === 'A') {
655+
toggle.classList.remove('open');
656+
links.classList.remove('open');
657+
}
658+
});
659+
})();
581660
</script>
582661
<script type="module" src="./playground.ts"></script>
583662
</body>

0 commit comments

Comments
 (0)