@xingwangzhe/stalux 1.25.10 → 1.25.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.25.10",
+    "version": "1.25.12",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -44,6 +44,7 @@
         "!src/content.config.ts"
     ],
     "type": "module",
+    "packageManager": "bun@1.4.0",
     "exports": {
         ".": "./src/index.ts",
         "./config": "./src/config.ts",
@@ -63,15 +64,24 @@
         "./package.json": "./package.json"
     },
     "scripts": {
-        "dev": "astro dev ",
-        "build": "astro build ",
-        "preview": "astro preview ",
+        "dev": "astro dev",
+        "build": "astro build && bun run verify:build",
+        "preview": "astro preview",
         "astro": "astro",
-        "init": "node scripts/cli.mjs init",
-        "fmt": "oxfmt",
-        "fmt:check": "oxfmt --check",
-        "lint": "oxlint",
-        "lint:fix": "oxlint --fix",
+        "init": "bun scripts/cli.mjs init",
+        "check": "biome check .",
+        "check:fix": "biome check --write .",
+        "format": "biome format --write .",
+        "format:check": "biome format .",
+        "lint": "biome lint .",
+        "lint:fix": "biome lint --write .",
+        "astro:check": "astro check --minimumFailingSeverity warning",
+        "test": "vitest",
+        "test:run": "vitest run",
+        "test:coverage": "vitest run --coverage",
+        "knip": "knip",
+        "verify:build": "bun scripts/verify-build.mjs",
+        "validate": "bun run check && bun run astro:check && bun run knip && bun run test:coverage && bun run build",
         "prepare": "git config core.hooksPath scripts/git-hooks"
     },
     "dependencies": {
@@ -86,7 +96,6 @@
         "@xingwangzhe/satteri-mermaid": "0.7.7",
         "@xingwangzhe/satteri-photoswipe": "^0.2.4",
         "@xingwangzhe/tags-cloud": "^1.2.7",
-        "animejs": "^4.5.0",
         "astro-expressive-code": "^0.44.1",
         "astro-seo": "^1.1.0",
         "astro-typewriter": "^1.2.0",
@@ -99,12 +108,14 @@
         "temml": "^0.13.4"
     },
     "devDependencies": {
+        "@astrojs/check": "0.9.10",
+        "@biomejs/biome": "2.5.10",
+        "@vitest/coverage-v8": "4.1.11",
         "astro": "^7.2.4",
         "knip": "^6.32.2",
-        "oxfmt": "^0.64.0",
-        "oxlint": "^1.79.0",
-        "typescript": "^7.0.2",
-        "vite": "8.2.2"
+        "typescript": "npm:@typescript/typescript6@6.0.2",
+        "vite": "8.2.2",
+        "vitest": "4.1.11"
     },
     "peerDependencies": {
         "astro": "7.2.4"

package/src/assets/cc-icon.svg

@@ -1,4 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16">
-    <path fill="#cccccc"
-        d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.408 5.89c-.83 0-1.318.64-1.318 1.753v.742c0 1.108.479 1.727 1.318 1.727c.69 0 1.138-.435 1.187-1.05h1.147v.114c-.058 1.147-1.029 1.938-2.343 1.938c-1.612 0-2.518-1.028-2.518-2.729v-.747c0-1.7.914-2.75 2.518-2.75c1.319 0 2.29.812 2.343 1.999v.11H6.595c-.049-.638-.506-1.108-1.187-1.108Zm5.404 0c-.831 0-1.319.64-1.319 1.753v.742c0 1.108.48 1.727 1.319 1.727c.69 0 1.138-.435 1.186-1.05h1.147v.114c-.057 1.147-1.028 1.938-2.342 1.938c-1.613 0-2.518-1.028-2.518-2.729v-.747c0-1.7.914-2.75 2.518-2.75c1.318 0 2.29.812 2.342 1.999v.11h-1.147c-.048-.638-.505-1.108-1.186-1.108Z" />
-</svg>
+    <title>Creative Commons</title>
+    <path
+        fill="#cccccc"
+        d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.408 5.89c-.83 0-1.318.64-1.318 1.753v.742c0 1.108.479 1.727 1.318 1.727c.69 0 1.138-.435 1.187-1.05h1.147v.114c-.058 1.147-1.029 1.938-2.343 1.938c-1.612 0-2.518-1.028-2.518-2.729v-.747c0-1.7.914-2.75 2.518-2.75c1.319 0 2.29.812 2.343 1.999v.11H6.595c-.049-.638-.506-1.108-1.187-1.108Zm5.404 0c-.831 0-1.319.64-1.319 1.753v.742c0 1.108.48 1.727 1.319 1.727c.69 0 1.138-.435 1.186-1.05h1.147v.114c-.057 1.147-1.028 1.938-2.342 1.938c-1.613 0-2.518-1.028-2.518-2.729v-.747c0-1.7.914-2.75 2.518-2.75c1.318 0 2.29.812 2.342 1.999v.11h-1.147c-.048-.638-.505-1.108-1.186-1.108Z"
+    />
+</svg>

package/src/components/stalux/analytics/umami.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from "astro:content";
-import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+import { getHeadData } from "@utils/config-utils";
+
 const configEntries = await getCollection("config");
 const headConfig = getHeadData(configEntries);
 const umamiConfig = headConfig?.umami;
@@ -9,8 +10,10 @@ const umamiURL = umamiConfig?.url;
 ---
 
 <script
+    is:inline
     defer
     src={umamiURL}
     data-website-id={umamiID}
     type="text/javascript"
-    data-astro-rerun></script>
+    transition:persist="stalux-umami"
+></script>

package/src/components/stalux/archives/archivesList.astro

@@ -1,9 +1,9 @@
 ---
-import { getCollection, type CollectionEntry } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
+import styles from "@styles/components/archives/archivesList.module.css";
 import { getSiteData } from "@utils/config-utils";
+import { format, parseDate, toTimestamp } from "@utils/dayjs";
 import { createTranslator } from "@utils/i18n";
-import styles from "@styles/components/archives/archivesList.module.css";
-import { toTimestamp, parseDate, format } from "@utils/dayjs";
 
 interface Props {
     posts?: CollectionEntry<"posts">[];
@@ -15,26 +15,18 @@ const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.d
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
-const archivesByYearMonth: Record<
-    number,
-    Record<number, CollectionEntry<"posts">[]>
-> = {};
-const yearCounts: Record<number, number> = {};
+const archivesByYearMonth = new Map<number, Map<number, CollectionEntry<"posts">[]>>();
 
 posts.forEach((post) => {
     if (!post.data.date) return;
     const date = parseDate(post.data.date);
     const year = date.getUTCFullYear();
     const month = date.getUTCMonth() + 1;
-    if (!archivesByYearMonth[year]) {
-        archivesByYearMonth[year] = {};
-        yearCounts[year] = 0;
-    }
-    if (!archivesByYearMonth[year][month]) {
-        archivesByYearMonth[year][month] = [];
-    }
-    archivesByYearMonth[year][month].push(post);
-    yearCounts[year] += 1;
+    const months = archivesByYearMonth.get(year) ?? new Map();
+    const monthPosts = months.get(month) ?? [];
+    monthPosts.push(post);
+    months.set(month, monthPosts);
+    archivesByYearMonth.set(year, months);
 });
 
 // 每个 post 只解析一次时间，供排序比较器复用，避免比较器里反复 new Date()
@@ -43,46 +35,45 @@ const tsCache = new Map<CollectionEntry<"posts">, number>(
 );
 
 // 对每个月内的文章按 date 字段降序排序（用缓存时间戳做纯数字比较）
-for (const [, months] of Object.entries(archivesByYearMonth)) {
-    for (const month of Object.keys(months).map(Number)) {
-        months[month].sort((a, b) => (tsCache.get(b) ?? 0) - (tsCache.get(a) ?? 0));
+for (const months of archivesByYearMonth.values()) {
+    for (const monthPosts of months.values()) {
+        monthPosts.sort((a, b) => (tsCache.get(b) ?? 0) - (tsCache.get(a) ?? 0));
     }
 }
 
-// 按年份降序排序 -
-const sortedYears = Object.keys(archivesByYearMonth)
-    .map(Number)
-    .sort((a: number, b: number) => b - a);
+const archiveYears = [...archivesByYearMonth.entries()]
+    .sort(([left], [right]) => right - left)
+    .map(([year, months]) => ({
+        year,
+        count: [...months.values()].reduce((total, monthPosts) => total + monthPosts.length, 0),
+        months: [...months.entries()]
+            .sort(([left], [right]) => right - left)
+            .map(([month, monthPosts]) => ({ month, posts: monthPosts })),
+    }));
 ---
 
 <section class={styles.archivesContainer}>
     <div class={styles.pageHeader}>
         <div class={styles.timelineContainer}>
-            {
-                sortedYears.length > 0 ? (
-                    sortedYears.map((year) => (
+            {archiveYears.length > 0 ? (
+                    archiveYears.map((archiveYear) => (
                         <div
                             class={styles.yearSection}
-                            data-year={String(year)}
+                            data-year={String(archiveYear.year)}
                         >
                             <div class={styles.yearHeader} data-year-header style="opacity:0">
-                                <h2 class={styles.yearTitle}>{year}</h2>
+                                <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
                                 <div class={styles.yearCount}>
-                                    {t("archives.postCount", { n: yearCounts[year] ?? 0 })}
+                                    {t("archives.postCount", { n: archiveYear.count })}
                                 </div>
                             </div>
-                            {Object.keys(archivesByYearMonth[year])
-                                .map(Number)
-                                .sort((a, b) => b - a)
-                                .map((month) => (
+                            {archiveYear.months.map(({ month, posts: monthPosts }) => (
                                     <div class={styles.monthSection} data-month-section style="opacity:0">
                                         <h3 class={styles.monthTitle}>
                                             {t("archives.month", { n: month })}
                                         </h3>
                                         <ul class={styles.postList}>
-                                            {archivesByYearMonth[year][
-                                                month
-                                            ].map((post) => (
+                                            {monthPosts.map((post) => (
                                                 <li class={styles.postItem} data-post-item style="opacity:0">
                                                     <time
                                                         class={styles.postDate}
@@ -106,11 +97,9 @@ const sortedYears = Object.keys(archivesByYearMonth)
                     ))
                 ) : (
                     <div class={styles.noPosts}>{t("archives.noPosts")}</div>
-                )
-            }
+                )}
         </div>
 
         <slot name="main" />
     </div>
-
 </section>

package/src/components/stalux/archives/toArchive.astro

@@ -1,8 +1,8 @@
 ---
 import { getCollection } from "astro:content";
+import styles from "@styles/components/archives/toArchive.module.css";
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
-import styles from "@styles/components/archives/toArchive.module.css";
 
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);

package/src/components/stalux/categories/categoriesCard.astro

@@ -1,6 +1,6 @@
 ---
-import styles from "@styles/components/categories/categoriesCard.module.css";
 import { getCollection } from "astro:content";
+import styles from "@styles/components/categories/categoriesCard.module.css";
 import { createTranslator } from "@utils/i18n";
 
 interface Props {
@@ -12,18 +12,22 @@ interface Props {
 
 const props = Astro.props as Props;
 const configEntries = await getCollection("config");
-const siteConfig = (configEntries.find(e => e.id === "site")?.data ?? {}) as Record<string, unknown>;
+const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as Record<
+    string,
+    unknown
+>;
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
 ---
 
 <article class={styles.categoryCard}>
     <a
         href={`/categories/${props.category.name}/`}
-        class={styles.categoryheader + " a-none"}
+        class={`${styles.categoryheader} a-none`}
         data-astro-prefetch
     >
         <div class={styles.categoryIcon}>
             <svg
+                aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"

package/src/components/stalux/categories/categoriesList.astro

@@ -1,17 +1,15 @@
 ---
-import { getCategoryCountList } from "@utils/collections-stats";
-import styles from "@styles/components/categories/categoriesList.module.css";
 import CategoriesCard from "@components/stalux/categories/categoriesCard.astro";
+import styles from "@styles/components/categories/categoriesList.module.css";
+import { getCategoryCountList } from "@utils/collections-stats";
 
 const categoryList = await getCategoryCountList();
 ---
 
 <ul class={`${styles.categoriesList} stagger-children`}>
-    {
-        categoryList.map((category) => (
+    {categoryList.map((category) => (
             <li class={styles.item} style="opacity:0">
                 <CategoriesCard category={category} />
             </li>
-        ))
-    }
+        ))}
 </ul>

package/src/components/stalux/common/author.astro

@@ -1,9 +1,9 @@
 ---
-// @ts-expect-error
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
 import styles from "@styles/components/common/author.module.css";
-import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+import { getAuthorData } from "@utils/config-utils";
+
 const configEntries = await getCollection("config");
 const authorConfig = getAuthorData(configEntries);
 interface Props {
@@ -18,16 +18,9 @@ const navigationHref = isHomePage ? "/about" : "/";
 ---
 
 <article class={styles.author} transition:persist-props>
-    <figure
-        class={`${styles.authorFigure} ${props.iscolum ? styles.figureColumn : ""}`}
-    >
+    <figure class={`${styles.authorFigure} ${props.iscolum ? styles.figureColumn : ""}`}>
         <a href={navigationHref} class="a-none" data-astro-prefetch>
-            <Image
-                src={authorConfig.avatar}
-                alt={authorConfig.name}
-                width={100}
-                height={100}
-            />
+            <Image src={authorConfig.avatar} alt={authorConfig.name} width={100} height={100} />
         </a>
         <figcaption>{authorConfig.name}</figcaption>
         {props.showBio && <p>{authorConfig.bio}</p>}

package/src/components/stalux/common/date.astro

@@ -3,57 +3,6 @@ import styles from "@styles/components/common/date.module.css";
 ---
 
 <div id={styles["date-time"]} class="date-time" transition:persist-props>
-    <time id={styles["date"]} data-ref="date" datetime=""></time>
-    <time id={styles["time"]} data-ref="time" datetime=""></time>
+    <time id={styles.date} data-ref="date" datetime=""></time>
+    <time id={styles.time} data-ref="time" datetime=""></time>
 </div>
-
-<script>
-    const pad2 = (n: number) => String(n).padStart(2, "0");
-
-    /** 机器可读：yyyy-MM-dd / HH:mm:ss（本地时区） */
-    function toMachineDate(d: Date): string {
-        return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
-    }
-    function toMachineTime(d: Date): string {
-        return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
-    }
-
-    /** 展示用日期：中文 2026年07月16日 / 英文 Jul 16, 2026 */
-    function toDisplayDate(d: Date, lang: string): string {
-        if (lang.startsWith("zh")) {
-            return `${d.getFullYear()}年${pad2(d.getMonth() + 1)}月${pad2(d.getDate())}日`;
-        }
-        return new Intl.DateTimeFormat("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "2-digit",
-        }).format(d);
-    }
-
-    function updateDateTime() {
-        const now = new Date();
-        const dateEl = document.querySelector('[data-ref="date"]');
-        const timeEl = document.querySelector('[data-ref="time"]');
-        const lang = document.documentElement.lang || "zh-CN";
-
-        if (dateEl) {
-            dateEl.textContent = toDisplayDate(now, lang);
-            dateEl.setAttribute("datetime", toMachineDate(now));
-        }
-        if (timeEl) {
-            const t = toMachineTime(now);
-            timeEl.textContent = t;
-            timeEl.setAttribute("datetime", t);
-        }
-    }
-
-    // 全局只保留一个 1Hz 定时器：用单例守卫避免视图切换时累加定时器。
-    let timerId: ReturnType<typeof setInterval> | null = null;
-
-    document.addEventListener("astro:page-load", () => {
-        updateDateTime();
-        if (timerId === null) {
-            timerId = setInterval(updateDateTime, 1000);
-        }
-    });
-</script>

package/src/components/stalux/common/search.astro

@@ -5,5 +5,5 @@
 ---
 
 <div data-pf-theme="dark">
-  <pagefind-modal id="search"></pagefind-modal>
+    <pagefind-modal id="search"></pagefind-modal>
 </div>

package/src/components/stalux/common/textType.astro

@@ -1,16 +1,13 @@
 ---
-// @ts-expect-error
-import Typewriter from "astro-typewriter";
 import { getCollection } from "astro:content";
 import styles from "@styles/components/common/textType.module.css";
-import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+import { getTypetextsData } from "@utils/config-utils";
+import Typewriter from "astro-typewriter";
+
 const configEntries = await getCollection("config");
-const siteConfig = getSiteData(configEntries);
 const typetextsConfig = getTypetextsData(configEntries);
 ---
 
-{
-    typetextsConfig?.items && (
+{typetextsConfig?.items && (
         <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />
-    )
-}
+    )}

package/src/components/stalux/common/verCount.astro

@@ -1,5 +1,4 @@
 ---
-
 ---
 
-<script src="../../../scripts/vercount.ts"></script>
+<Fragment />

package/src/components/stalux/footer/FooterBadges.astro

@@ -1,9 +1,9 @@
 ---
-import type { BadgeItem } from "@utils/badge-generator";
-import { generateBadge, svgToDataUrl, isBadgeGroup } from "@utils/badge-generator";
-import { createTranslator } from "@utils/i18n";
 import { getCollection } from "astro:content";
+import type { BadgeItem, BadgeOptions } from "@utils/badge-generator";
+import { generateBadge, isBadgeGroup, svgToDataUrl } from "@utils/badge-generator";
 import { getSiteData } from "@utils/config-utils";
+import { createTranslator } from "@utils/i18n";
 
 interface Props {
     badges?: BadgeItem[];
@@ -14,7 +14,7 @@ const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 
-function badgeImg(opts: Record<string, any>) {
+function badgeImg(opts: BadgeOptions) {
     const src = svgToDataUrl(generateBadge(opts));
     const alt = opts.alt || `${opts.label}: ${opts.message}`;
     if (opts.href) {
@@ -24,8 +24,7 @@ function badgeImg(opts: Record<string, any>) {
 }
 ---
 
-{
-    badges && badges.length > 0 && (
+{badges && badges.length > 0 && (
         <div class="badges-wrapper">
             {badges.map((item: BadgeItem, idx: number) => {
                 if (isBadgeGroup(item)) {
@@ -39,7 +38,7 @@ function badgeImg(opts: Record<string, any>) {
                                 <span class="badge-group-hint" data-hint="collapsed">{t("footer.expand")}</span>
                             </summary>
                             <div class="badge-group-items badges">
-                                {item.items.map((b: any) => (
+                                {item.items.map((b) => (
                                     <Fragment set:html={badgeImg(b)} />
                                 ))}
                             </div>
@@ -49,108 +48,87 @@ function badgeImg(opts: Record<string, any>) {
                 return <Fragment set:html={badgeImg(item)} />;
             })}
         </div>
-    )
+    )}
+
+<style>
+.badges-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
-<script>
-    function initBadgeGroups() {
-        document.querySelectorAll<HTMLDetailsElement>(".badge-group").forEach((el) => {
-            const key = `badge-${el.id}`;
-            const saved = localStorage.getItem(key);
-            if (saved !== null) {
-                el.open = saved === "open";
-            } else {
-                // 首次访问使用默认折叠状态
-                el.open = el.getAttribute("data-default-open") === "true";
-            }
-            el.addEventListener("toggle", () => {
-                localStorage.setItem(key, el.open ? "open" : "closed");
-            });
-        });
-    }
-    document.addEventListener("astro:page-load", initBadgeGroups);
-    initBadgeGroups();
-</script>
+.badge-group {
+    width: 100%;
+    border: none;
+}
 
-<style>
-    .badges-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
+.badge-group-summary {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.2rem 0;
+    color: var(--white-70p);
+    font-size: 0.85rem;
+    user-select: none;
+    list-style: none;
+    transition: color 0.2s;
+}
+.badge-group-summary:hover {
+    color: var(--white-70p);
+}
+.badge-group-summary::-webkit-details-marker {
+    display: none;
+}
 
-    .badge-group {
-        width: 100%;
-        border: none;
-    }
+.badge-group-arrow {
+    font-size: 0.65rem;
+    transition: transform 0.2s;
+    display: inline-block;
+}
+.badge-group[open] .badge-group-arrow {
+    transform: rotate(90deg);
+}
 
-    .badge-group-summary {
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 0.4rem;
-        padding: 0.2rem 0;
-        color: var(--white-70p);
-        font-size: 0.85rem;
-        user-select: none;
-        list-style: none;
-        transition: color 0.2s;
-    }
-    .badge-group-summary:hover {
-        color: var(--white-70p);
-    }
-    .badge-group-summary::-webkit-details-marker {
-        display: none;
-    }
+.badge-group-title {
+    color: var(--white-80p);
+}
 
-    .badge-group-arrow {
-        font-size: 0.65rem;
-        transition: transform 0.2s;
-        display: inline-block;
-    }
-    .badge-group[open] .badge-group-arrow {
-        transform: rotate(90deg);
-    }
+.badge-group-hint {
+    font-size: 0.7rem;
+    color: var(--white-70p);
+}
+.badge-group[open] .badge-group-hint[data-hint="collapsed"],
+.badge-group:not([open]) .badge-group-hint[data-hint="expanded"] {
+    display: none;
+}
 
-    .badge-group-title {
-        color: var(--white-80p);
-    }
+.badge-group-items {
+    padding-top: 0.35rem;
+}
 
-    .badge-group-hint {
-        font-size: 0.7rem;
-        color: var(--white-70p);
-    }
-    .badge-group[open] .badge-group-hint[data-hint="collapsed"],
-    .badge-group:not([open]) .badge-group-hint[data-hint="expanded"] {
-        display: none;
-    }
+.badges {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
 
-    .badge-group-items {
-        padding-top: 0.35rem;
-    }
+.badge {
+    height: 20px;
+    vertical-align: middle;
+}
 
+@media (max-width: 768px) {
     .badges {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        gap: 0.3rem;
     }
-
     .badge {
-        height: 20px;
-        vertical-align: middle;
-    }
-
-    @media (max-width: 768px) {
-        .badges {
-            gap: 0.3rem;
-        }
-        .badge {
-            height: 18px;
-        }
+        height: 18px;
     }
+}
 </style>