fix: lightbox and css borders from blog

This commit is contained in:
2026-02-22 10:40:24 +01:00
parent 2b5b992904
commit 0172e468ba
3 changed files with 23 additions and 0 deletions

View File

@@ -25,6 +25,7 @@
.macro-gallery.gallery-cols-6 .gallery-container { grid-template-columns: repeat(6, minmax(0, 1fr)); } .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, .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; } .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-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; } .gallery-empty, .photo-archive-empty { color: var(--pico-muted-color, var(--muted-color)); font-style: italic; }
.photo-archive-container { display: grid; gap: 1rem; } .photo-archive-container { display: grid; gap: 1rem; }

View File

@@ -358,6 +358,7 @@ describe('BlogGenerationEngine', () => {
expect(html).toContain('data-template="post-list"'); expect(html).toContain('data-template="post-list"');
expect(html).toContain('/assets/pico.min.css'); expect(html).toContain('/assets/pico.min.css');
expect(html).toContain('/assets/lightbox.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('/assets/tag-cloud.js');
expect(html).toContain('rel="alternate" type="application/rss+xml"'); expect(html).toContain('rel="alternate" type="application/rss+xml"');
expect(html).toContain('href="/rss.xml"'); expect(html).toContain('href="/rss.xml"');

View File

@@ -673,6 +673,27 @@ describe('PreviewServer', () => {
expect(html).toContain('.single-post { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }'); 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 () => { it('renders single post title as h1', async () => {
const post = makePost({ const post = makePost({
id: 'single-title', id: 'single-title',