diff --git a/src/main/engine/templates/partials/styles.liquid b/src/main/engine/templates/partials/styles.liquid index 4dbf1e5..07d045e 100644 --- a/src/main/engine/templates/partials/styles.liquid +++ b/src/main/engine/templates/partials/styles.liquid @@ -25,6 +25,7 @@ .macro-gallery.gallery-cols-6 .gallery-container { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gallery-item, .photo-archive-item { display: block; overflow: hidden; border-radius: .25rem; } .gallery-item img, .photo-archive-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } + .lb-nav a, .lb-nav a:hover, .lb-nav a:focus-visible { border: 0; box-shadow: none; outline: none; text-decoration: none; } .gallery-caption { margin-top: .5rem; text-align: center; color: var(--pico-muted-color, var(--muted-color)); font-size: .92rem; } .gallery-empty, .photo-archive-empty { color: var(--pico-muted-color, var(--muted-color)); font-style: italic; } .photo-archive-container { display: grid; gap: 1rem; } diff --git a/tests/engine/BlogGenerationEngine.test.ts b/tests/engine/BlogGenerationEngine.test.ts index bc7b2b1..d43dde8 100644 --- a/tests/engine/BlogGenerationEngine.test.ts +++ b/tests/engine/BlogGenerationEngine.test.ts @@ -358,6 +358,7 @@ describe('BlogGenerationEngine', () => { expect(html).toContain('data-template="post-list"'); expect(html).toContain('/assets/pico.min.css'); expect(html).toContain('/assets/lightbox.min.css'); + expect(html).toContain('.lb-nav a, .lb-nav a:hover, .lb-nav a:focus-visible { border: 0; box-shadow: none; outline: none; text-decoration: none; }'); expect(html).toContain('/assets/tag-cloud.js'); expect(html).toContain('rel="alternate" type="application/rss+xml"'); expect(html).toContain('href="/rss.xml"'); diff --git a/tests/engine/PreviewServer.test.ts b/tests/engine/PreviewServer.test.ts index 66043e5..53e4b3d 100644 --- a/tests/engine/PreviewServer.test.ts +++ b/tests/engine/PreviewServer.test.ts @@ -673,6 +673,27 @@ describe('PreviewServer', () => { expect(html).toContain('.single-post { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }'); }); + it('resets lightbox nav anchor hover and focus styles to avoid frame artifacts over images', async () => { + const post = makePost({ + id: 'lightbox-style-post', + title: 'Lightbox Style Post', + slug: 'lightbox-style-post', + createdAt: new Date('2025-02-14T10:00:00.000Z'), + content: '{{gallery post="one" columns="2"}}', + }); + + server = new PreviewServer({ + postEngine: makeEngine([post]), + settingsEngine: makeSettings(50), + getActiveProjectContext: async () => ({ projectId: 'default' }), + }); + + await server.start(0); + + const html = await (await fetch(`${server.getBaseUrl()}/2025/2/14/lightbox-style-post/`)).text(); + expect(html).toContain('.lb-nav a, .lb-nav a:hover, .lb-nav a:focus-visible { border: 0; box-shadow: none; outline: none; text-decoration: none; }'); + }); + it('renders single post title as h1', async () => { const post = makePost({ id: 'single-title',