hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: category and tag badges with better styling

Browse Source
This commit is contained in:
hugo
2026-02-22 13:07:30 +01:00
parent 5ff4f0a2b9
commit ac75bcb1ac
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/engine/templates/partials/styles.liquid
View File

@@ -50,7 +50,8 @@
.single-post { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.single-post-taxonomy { display: flex; flex-wrap: wrap; gap: .4rem .45rem; margin: -.1rem 0 .2rem; }
.single-post-taxonomy-bubble {
--bubble-accent: var(--pico-primary, var(--primary));
--bubble-accent: var(--pico-ins-color, rgb(53, 117, 56));
--bubble-bg: var(--bubble-accent);
display: inline-flex;
align-items: center;
border: 1px solid var(--bubble-accent);
@@ -58,14 +59,14 @@
padding: .1rem .5rem;
font-size: .74rem;
line-height: 1.35;
color: var(--bubble-accent);
background: transparent;
color: #000;
background: var(--bubble-bg, var(--bubble-accent));
text-decoration: none;
}
.single-post-taxonomy-bubble:hover,
.single-post-taxonomy-bubble:focus-visible { text-decoration: underline; }
.single-post-taxonomy-bubble-category { --bubble-accent: var(--pico-primary, var(--primary)); }
.single-post-taxonomy-bubble-tag { --bubble-accent: var(--pico-secondary, var(--secondary)); }
.single-post-taxonomy-bubble-category { --bubble-accent: var(--pico-ins-color, rgb(53, 117, 56)); --bubble-bg: var(--pico-ins-color, rgb(53, 117, 56)); }
.single-post-taxonomy-bubble-tag { --bubble-accent: var(--pico-del-color, rgb(183, 72, 72)); --bubble-bg: var(--pico-del-color, rgb(183, 72, 72)); }
.preview-pagination { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .25rem; }
.preview-pagination-link { color: var(--pico-muted-color, var(--muted-color)); text-decoration: none; font-size: .92rem; opacity: .72; transition: opacity .15s ease-in-out; }
.preview-pagination-link:hover,

8
tests/engine/BlogGenerationEngine.test.ts
View File

@@ -432,6 +432,14 @@ describe('BlogGenerationEngine', () => {
expect(html).toContain('href="/category/article/"');
expect(html).toContain('href="/tag/css-only/"');
expect(html).toContain('style="--bubble-accent: #22aa88;"');
expect(html).toContain('background: var(--bubble-bg, var(--bubble-accent));');
expect(html).toContain('color: #000;');
expect(html).toContain('.single-post-taxonomy-bubble-category {');
expect(html).toContain('--bubble-accent: var(--pico-ins-color');
expect(html).toContain('--bubble-bg: var(--pico-ins-color');
expect(html).toContain('.single-post-taxonomy-bubble-tag {');
expect(html).toContain('--bubble-accent: var(--pico-del-color');
expect(html).toContain('--bubble-bg: var(--pico-del-color');
const categoryIndex = html.indexOf('single-post-taxonomy-bubble-category');
const tagIndex = html.indexOf('single-post-taxonomy-bubble-tag');

8
tests/engine/PreviewServer.test.ts
View File

@@ -763,6 +763,14 @@ describe('PreviewServer', () => {
expect(html).toContain('href="/category/article/"');
expect(html).toContain('href="/tag/css-only/"');
expect(html).toContain('style="--bubble-accent: #22aa88;"');
expect(html).toContain('background: var(--bubble-bg, var(--bubble-accent));');
expect(html).toContain('color: #000;');
expect(html).toContain('.single-post-taxonomy-bubble-category {');
expect(html).toContain('--bubble-accent: var(--pico-ins-color');
expect(html).toContain('--bubble-bg: var(--pico-ins-color');
expect(html).toContain('.single-post-taxonomy-bubble-tag {');
expect(html).toContain('--bubble-accent: var(--pico-del-color');
expect(html).toContain('--bubble-bg: var(--pico-del-color');
const categoryIndex = html.indexOf('single-post-taxonomy-bubble-category');
const tagIndex = html.indexOf('single-post-taxonomy-bubble-tag');