Skip to content

worker: sticky top bar with an always-visible Download button #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aswinmcw merged 3 commits into from
Jul 14, 2026
Merged

worker: sticky top bar with an always-visible Download button #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c50ee3a
worker: replace floating download button with a sticky top bar
Aswin-coder Jul 14, 2026
9240625
worker: fix top bar hidden behind resume body gradient
Aswin-coder Jul 14, 2026
a697e88
worker: fix top bar never rendering (regex matched <body> inside a CS…
Aswin-coder Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 33 additions & 19 deletions src/worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,39 +157,53 @@ function webPage(resumeHtml: string): string {
<style>
@media screen {
html { background:#e9ecf3; }
/* Center the A4 sheet and give it depth on desktop. */
/* Fixed top bar (out of flow), full viewport width, always visible.
Its own solid navy paints over the resume body's split-gradient. */
#topbar { position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between; gap:16px;
background:#16215a; color:#fff; padding:11px 20px; height:52px;
font-family:Arial,Helvetica,sans-serif;
box-shadow:0 2px 10px rgba(0,0,0,.35); box-sizing:border-box; }
#topbar .who { font-size:16px; font-weight:700; letter-spacing:.5px; }
#topbar .who span { color:#c9a86b; margin-left:8px; font-weight:400;
letter-spacing:2px; font-size:12px; text-transform:uppercase; }
#topbar #dl { background:#c9a86b; color:#16215a; text-decoration:none;
font-weight:700; font-size:14px; padding:9px 16px; border-radius:7px;
white-space:nowrap; }
#topbar #dl:hover { filter:brightness(1.05); }
/* Push the whole page down so the fixed bar never overlaps the sheet. */
html { padding-top:52px; }
/* Center the A4 sheet under the bar and give it depth on desktop. */
body { margin:0 auto; max-width:210mm; box-shadow:0 6px 30px rgba(22,33,90,.18); }
/* Floating download button — fixed so it stays reachable while scrolling. */
#dl { position:fixed; right:16px; bottom:16px; z-index:50;
background:#c9a86b; color:#16215a; text-decoration:none; font-weight:700;
font-family:Arial,Helvetica,sans-serif; font-size:14px;
padding:11px 18px; border-radius:8px; box-shadow:0 3px 12px rgba(0,0,0,.25); }
#dl:hover { filter:brightness(1.05); }
}
/* Phones: reflow the fixed-A4 two-column grid to one readable column.
The navy sidebar is a linear-gradient painted on <body> at the 34% split,
not a real element background — so when we stack the columns we must kill
that gradient and give each column its own solid background, or text lands
on the wrong colour. */
The navy sidebar is a linear-gradient painted on the page background at the
34% split, not a real element background — so when we stack the columns we
must kill that gradient and give each column its own solid background, or
text lands on the wrong colour. */
@media screen and (max-width:640px) {
html { background:#fff; }
body { max-width:none; box-shadow:none; background:#16215a !important; }
.page { display:block !important; min-height:0 !important; }
.side { width:100% !important; background:#16215a !important; }
.main { width:100% !important; background:#fff !important; }
.name { font-size:30px !important; }
#dl { left:16px; right:16px; text-align:center; }
#topbar .who { font-size:14px; }
#topbar .who span { display:none; }
}
/* Belt-and-suspenders: never show the button when printing from the browser. */
@media print { #dl { display:none !important; } }
/* Belt-and-suspenders: never show the bar when printing from the browser. */
@media print { #topbar { display:none !important; } }
</style>`;

const dlButton = `<a id="dl" href="/${PDF_FILENAME}?download">↓ Download PDF</a>`;
const topBar =
`<div id="topbar"><div class="who">Aswin<span>Software Engineer</span></div>` +
`<a id="dl" href="/${PDF_FILENAME}?download">↓ Download PDF</a></div>`;

let out = resumeHtml;
// Inject metadata + styles right after <head> (resume.html has a bare <head>).
// Order matters: do the <body> injection on the RAW resume first, so the
// regex can only match the real body tag — not a literal "<body>" that
// appears inside a CSS comment in the head we inject below.
let out = resumeHtml.replace(/<body>/i, `<body>${topBar}`);
// Then inject metadata + styles right after <head> (resume.html has a bare <head>).
out = out.replace(/<head>/i, `<head>${head}`);
// Drop the floating button just inside <body>.
out = out.replace(/<body>/i, `<body>${dlButton}`);
return out;
}
Loading