Skip to content

fix(nav): float the empty navigation over the hero on phones #359

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
rememberYou merged 1 commit into from
Nov 6, 2026
Merged

fix(nav): float the empty navigation over the hero on phones #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 17 additions & 0 deletions src/components/Nav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,23 @@ const links = [
height: 60px;
}

/* At the top of the page the navigation is empty here: no links, and the
name and the button are still in the hero. Rather than push the hero
down by its height, it floats over it, transparent, until the page
scrolls. Without JavaScript it shows both, so it keeps its place. */
:global(.js) nav {
margin-bottom: -60px;
transition:
border-color 0.3s,
background 0.3s;
}

:global(.js) nav:not(.scrolled) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.logo {
font-size: 15px;
}
Expand Down
16 changes: 16 additions & 0 deletions tests/site.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
const broken = await page.evaluate(() =>
[...document.images].filter((img) => !img.complete || !img.naturalWidth).map((img) => img.src),
);
expect(broken).toEqual([]);

Check failure on line 57 in tests/site.spec.ts

View workflow job for this annotation

GitHub Actions / Format, types, build, tests, Lighthouse

[safari] › tests/site.spec.ts:49:1 › loads every image 

  1) [safari] › tests/site.spec.ts:49:1 › loads every image ────────────────────────────────────────
    Error: expect(received).toEqual(expected) // deep equality

    - Expected  -  1
    + Received  + 12

    - Array []
    + Array [
    +   "http://localhost:4329/_astro/aws-devops-pro.BYjeWCWt_K8WON.webp",
    +   "http://localhost:4329/_astro/aws-sa-pro.BI8vFdXK_Z2asAGp.webp",
    +   "http://localhost:4329/_astro/azure-admin.dKfoxgBo_1r1JFh.webp",
    +   "http://localhost:4329/_astro/aws-sysops.CuYB43wv_ZXgjKh.webp",
    +   "http://localhost:4329/_astro/aws-developer.DNj3aDnu_ZV1OEo.webp",
    +   "http://localhost:4329/_astro/aws-sa-assoc.DTeu0DVP_Z2h7taA.webp",
    +   "http://localhost:4329/_astro/aws-cloud-practitioner.D9svnEg8_Zh46xb.webp",
    +   "http://localhost:4329/_astro/azure-fundamentals.DxqeRKeW_1E4hzt.webp",
    +   "http://localhost:4329/_astro/azure-ai.B7hIyBB9_jIi4G.webp",
    +   "http://localhost:4329/_astro/psm1.BXuuTSv__Z2hsrOS.webp",
    + ]

      55 |     [...document.images].filter((img) => !img.complete || !img.naturalWidth).map((img) => img.src),
      56 |   );
    > 57 |   expect(broken).toEqual([]);
         |                  ^
      58 | });
      59 |
      60 | test('serves the CV, the thesis and the icons', async ({ request }) => {
        at /home/runner/work/rememberYou.github.io/rememberYou.github.io/tests/site.spec.ts:57:18
});

test('serves the CV, the thesis and the icons', async ({ request }) => {
Expand Down Expand Up @@ -222,6 +222,22 @@
await expect(button).toBeVisible();
});

test('starts the name near the top on a phone, under a navigation that floats', async ({
page,
}) => {
await page.setViewportSize({ width: 390, height: 844 });
// Measured where the name rests, not while it fades in.
await page.emulateMedia({ reducedMotion: 'reduce' });
await page.goto('/');
// The empty navigation no longer pushes the hero down: only its own margin.
const top = await page.locator('#top h1').evaluate((h1) => h1.getBoundingClientRect().top);
expect(top).toBeLessThanOrEqual(48);

// Once scrolled, it has its background again, over the content.
await page.locator('#experience').scrollIntoViewIfNeeded();
await expect(page.locator('#nav')).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
});

test('counts the visit, and the CV, the thesis, an email and a link out', async ({ page }) => {
// A stand-in for GoatCounter's script, which records what it is given.
await page.route('https://gc.zgo.at/count.js', (route) =>
Expand Down
Loading