@xingwangzhe/stalux 1.29.8 → 1.30.1

package/README.md

@@ -119,7 +119,7 @@ TypeScript uses ESNext. The theme defaults `vite.build.target` to `"esnext"` to
 
 ### Initial CSS and search styles
 
-The theme defaults to Astro's `build.inlineStylesheets: "always"`, placing route styles in the HTML to reduce stylesheet requests before the first paint. An explicit consumer setting of `build.inlineStylesheets: "never"` keeps external stylesheets. Inlining increases each HTML response in exchange for a shorter stylesheet request chain on a first visit.
+The theme defaults to Astro's `build.inlineStylesheets: "never"`: hashed shared CSS can be cached across routes, while component styles load on the pages that use them. Normal blocking stylesheets prevent an unstyled first paint. An explicit consumer setting of `build.inlineStylesheets: "always"` restores inline styles at the cost of larger HTML responses.
 
 Pagefind dialog CSS is emitted as a separate hashed static file with a `prefetch` hint. Opening search activates the stylesheet and waits for it before displaying the dialog. It does not block the initial content or depend on JavaScript generating a CSS asset. A `<noscript>` stylesheet fallback is included.
 
@@ -281,3 +281,7 @@ In Astro 7.3, integration `logger.debug()` uses the official `DEBUG/--verbose` c
 Timing is emitted only as logs, never included in generated pages or cache keys. Switching between normal and verbose builds may require one rebuild; repeated builds in the same mode remain deterministic. Consumers running `astro dev --background` can read terminal output with `astro dev logs`.
 
 Keep the TypeScript 6 alias for `astro check`, upgrade Vitest and its coverage provider together, and run `bun run validate` before releasing.
+
+## Style development and output
+
+Stalux precompiles its UnoCSS styles; consuming projects need no UnoCSS dependency or configuration. Shared CSS is a cacheable external stylesheet by default. Article/math, archive, category, tag and quote styles load with their components. Explicit Astro `build.inlineStylesheets: "always"` restores inline output. New utilities in consumer override components require the consumer’s own compiler. See [STYLING.md](./docs/STYLING.md) for maintenance and watch mode.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.29.8",
+    "version": "1.30.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -67,14 +67,14 @@
         "./package.json": "./package.json"
     },
     "scripts": {
-        "dev": "astro dev",
-        "build": "astro build && node scripts/verify-build.ts",
+        "dev": "bun run styles:build && node scripts/dev.ts",
+        "build": "bun run styles:build && astro build && node scripts/verify-build.ts",
         "preview": "astro preview",
         "astro": "astro",
         "init": "node scripts/cli.ts init",
         "node:check": "tsc6 --project tsconfig.node.json",
         "build:cli": "bun build scripts/cli.ts --target=node --outfile .release/cli.mjs",
-        "prepack": "bun run build:cli",
+        "prepack": "bun run styles:build && bun run build:cli",
         "check": "biome check .",
         "check:fix": "biome check --write .",
         "format": "biome format --write .",
@@ -87,10 +87,12 @@
         "test:coverage": "vitest run --coverage",
         "knip": "knip",
         "verify:build": "node scripts/verify-build.ts",
-        "validate": "bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
+        "validate": "bun run styles:build && bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
         "prepare": "git config core.hooksPath scripts/git-hooks",
         "dev:debug": "STALUX_DEBUG=1 astro dev --verbose",
-        "build:debug": "STALUX_DEBUG=1 astro build --verbose && node scripts/verify-build.ts"
+        "build:debug": "STALUX_DEBUG=1 astro build --verbose && node scripts/verify-build.ts",
+        "styles:build": "node scripts/build-styles.ts",
+        "styles:watch": "node scripts/build-styles.ts --watch"
     },
     "dependencies": {
         "@astrojs/markdown-satteri": "0.4.2",
@@ -122,10 +124,12 @@
         "@astrojs/check": "0.9.10",
         "@biomejs/biome": "2.5.14",
         "@types/node": "^26.6.2",
+        "@unocss/astro": "^66.10.5",
         "@vitest/coverage-v8": "5.0.1",
         "astro": "^7.3.5",
         "knip": "^6.37.0",
         "typescript": "npm:@typescript/typescript6@6.0.2",
+        "unocss": "^66.10.5",
         "vite": "8.3.0",
         "vitest": "5.0.1"
     },

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

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-archives.css";
 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";
@@ -52,41 +53,44 @@ const archiveYears = [...archivesByYearMonth.entries()]
     }));
 ---
 
-<section class={styles.archivesContainer}>
-    <div class={styles.pageHeader}>
-        <div class={styles.timelineContainer}>
+<section class="stalux-archive-container">
+    <div class="stalux-archive-page-header">
+        <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (
     archiveYears.map((archiveYear) => (
-        <div class={styles.yearSection} data-year={String(archiveYear.year)}>
-            <div class={styles.yearHeader}>
-                <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
-                <div class={styles.yearCount}>
+        <div class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
+            <div class="stalux-archive-year-header">
+                <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
+                <div class="stalux-archive-year-count">
                     {t("archives.postCount", { n: archiveYear.count })}
                 </div>
             </div>
             {archiveYear.months.map(({ month, posts: monthPosts }) => (
                 <div
-                    class={styles.monthSection}
+                    class="stalux-archive-month-section"
                     style={{
                         "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px`,
                     }}
                 >
-                    <h3 class={styles.monthTitle}>{t("archives.month", { n: month })}</h3>
+                    <h3 class="stalux-archive-month-title">{t("archives.month", { n: month })}</h3>
                     {Array.from({ length: Math.ceil(monthPosts.length / 12) }, (_, index) =>
                         monthPosts.slice(index * 12, (index + 1) * 12),
                     ).map((group) => (
                         <ul
-                            class={styles.postList}
+                            class="stalux-archive-post-list"
                             style={{ "--archive-group-estimate": `${group.length * 48}px` }}
                         >
                             {group.map((post) => (
-                                <li class={styles.postItem}>
-                                    <time class={styles.postDate} datetime={post.data.date}>
+                                <li class="stalux-archive-post-item">
+                                    <time
+                                        class="stalux-archive-post-date"
+                                        datetime={post.data.date}
+                                    >
                                         {format(parseDate(post.data.date), "yyyy-MM-dd")}
                                     </time>
                                     <a
                                         href={`/posts/${post.data.abbrlink}/`}
-                                        class={styles.postLink}
+                                        class="stalux-archive-post-link"
                                         data-astro-prefetch="viewport"
                                     >
                                         {post.data.title}
@@ -100,7 +104,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
         </div>
     ))
 ) : (
-    <div class={styles.noPosts}>{t("archives.noPosts")}</div>
+    <div class="stalux-archive-no-posts">{t("archives.noPosts")}</div>
 )}
         </div>
 

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

@@ -1,6 +1,6 @@
 ---
 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";
 
@@ -9,6 +9,6 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 ---
 
-<div id={styles.archs}>
+<div id={"stalux-to-archive-archs"}>
     <a href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
 </div>

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

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-categories.css";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/categories/categoriesCard.module.css";
+
 import { createTranslator } from "@utils/i18n";
 
 interface Props {
@@ -19,13 +20,13 @@ const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as R
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
 ---
 
-<article class={styles.categoryCard}>
+<article class="stalux-category-card">
     <a
         href={`/categories/${props.category.name}/`}
-        class={`${styles.categoryheader} a-none`}
+        class="stalux-categoryheader a-none"
         data-astro-prefetch
     >
-        <div class={styles.categoryIcon}>
+        <div class="stalux-category-icon">
             <svg
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
@@ -43,9 +44,9 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
                 ></path>
             </svg>
         </div>
-        <div class={styles.categoryContent}>
-            <h2 class={styles.categoryName}>{props.category.name}</h2>
-            <div class={styles.categoryCount}>
+        <div class="stalux-category-content">
+            <h2 class="categoryName">{props.category.name}</h2>
+            <div class="categoryCount">
                 {t("categories.postCount", { n: props.category.count })}
             </div>
         </div>

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

@@ -1,12 +1,13 @@
 ---
+import "../../../styles/generated-categories.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(Astro.logger);
 ---
 
-<ul class={styles.categoriesList}>
+<ul class="stalux-categories">
     {categoryList.map((category) => (
     <li>
         <CategoriesCard category={category} />

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

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/common/author.module.css";
+
 import { getAuthorData } from "@utils/config-utils";
 
 const configEntries = await getCollection("config");
@@ -17,8 +17,13 @@ const isHomePage = Astro.url.pathname === "/";
 const navigationHref = isHomePage ? "/about" : "/";
 ---
 
-<article class={styles.author} transition:persist-props>
-    <figure class={`${styles.authorFigure} ${props.iscolum ? styles.figureColumn : ""}`}>
+<article
+    class="stalux-author stalux-u-flex stalux-u-justify-center stalux-u-flex-col"
+    transition:persist-props
+>
+    <figure
+        class={`stalux-author-figure ${props.iscolum ? "stalux-author-figure-column stalux-u-flex-col" : ""}`}
+    >
         <a href={navigationHref} class="a-none" data-astro-prefetch>
             <Image src={authorConfig.avatar} alt={authorConfig.name} width={100} height={100} />
         </a>

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

@@ -1,10 +1,9 @@
 ---
-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>
+<div id={"stalux-date-date-time"} class="date-time" transition:persist-props>
+    <time id={"stalux-date-date"} data-ref="date" datetime=""></time>
+    <time id={"stalux-date-time"} data-ref="time" datetime=""></time>
 </div>
 
 <script is:inline>

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

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import styles from "@styles/components/common/textType.module.css";
+
 import { getTypetextsData } from "@utils/config-utils";
 import Typewriter from "astro-typewriter";
 
@@ -8,4 +8,9 @@ const configEntries = await getCollection("config");
 const typetextsConfig = getTypetextsData(configEntries);
 ---
 
-{typetextsConfig?.items && <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />}
+{typetextsConfig?.items && (
+    <Typewriter
+        class="stalux-typewriter stalux-u-flex stalux-u-justify-center stalux-u-w-full stalux-u-text-center"
+        messages={typetextsConfig?.items}
+    />
+)}

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

@@ -22,7 +22,7 @@ function badgeImg(opts: BadgeOptions) {
     const height = svg.match(/<svg\b[^>]*\bheight="(\d+)"/)?.[1];
     const dimensions = width && height ? ` width="${width}" height="${height}"` : "";
     // Closed badge groups should not initialize every SVG document during first paint.
-    const img = `<img src="${src}" alt="${alt}" class="badge" loading="lazy" decoding="async"${dimensions} />`;
+    const img = `<img src="${src}" alt="${alt}" class="stalux-badge" loading="lazy" decoding="async"${dimensions} />`;
     if (opts.href) {
         return `<a href="${opts.href}" target="_blank" rel="${opts.rel ?? "noopener"}">${img}</a>`;
     }
@@ -31,23 +31,23 @@ function badgeImg(opts: BadgeOptions) {
 ---
 
 {badges && badges.length > 0 && (
-    <div class="badges-wrapper">
+    <div class="stalux-badges-wrapper stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
         {badges.map((item: BadgeItem, idx: number) => {
             if (isBadgeGroup(item)) {
                 const groupId = `badge-group-${idx}`;
                 return (
-                    <details class="badge-group" id={groupId}>
-                        <summary class="badge-group-summary">
-                            <span class="badge-group-arrow">&#9654;</span>
-                            <span class="badge-group-title">{item.title}</span>
-                            <span class="badge-group-hint" data-hint="expanded">
+                    <details class="stalux-badge-group stalux-u-w-full badge-group" id={groupId}>
+                        <summary class="stalux-badge-group-summary stalux-u-flex stalux-u-items-center stalux-u-justify-center">
+                            <span class="stalux-badge-group-arrow">&#9654;</span>
+                            <span class="stalux-badge-group-title">{item.title}</span>
+                            <span class="stalux-badge-group-hint" data-hint="expanded">
                                 {t("footer.collapse")}
                             </span>
-                            <span class="badge-group-hint" data-hint="collapsed">
+                            <span class="stalux-badge-group-hint" data-hint="collapsed">
                                 {t("footer.expand")}
                             </span>
                         </summary>
-                        <div class="badge-group-items badges">
+                        <div class="stalux-badge-group-items stalux-badges stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
                             {item.items.map((b) => (
                                 <Fragment set:html={badgeImg(b)} />
                             ))}
@@ -59,91 +59,3 @@ function badgeImg(opts: BadgeOptions) {
         })}
     </div>
 )}
-
-<style>
-.badges-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-/* Badge HTML is emitted by set:html, so target it through the scoped wrapper. */
-.badges-wrapper :global(.badge) {
-    width: auto;
-}
-
-.badge-group {
-    width: 100%;
-    border: none;
-}
-
-.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-arrow {
-    font-size: 0.65rem;
-    transition: transform 0.2s;
-    display: inline-block;
-}
-.badge-group[open] .badge-group-arrow {
-    transform: rotate(90deg);
-}
-
-.badge-group-title {
-    color: var(--white-80p);
-}
-
-.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-items {
-    padding-top: 0.35rem;
-}
-
-.badges {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.badge {
-    height: 20px;
-    vertical-align: middle;
-}
-
-@media (max-width: 768px) {
-    .badges {
-        gap: 0.3rem;
-    }
-    .badge {
-        height: 18px;
-    }
-}
-</style>

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

@@ -19,7 +19,7 @@ const showBeian = !!(icp || pubsec);
 ---
 
 {showBeian && (
-    <div class="beian-info">
+    <div class="stalux-beian-beian-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
         {icp && (
             <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                 {icp}
@@ -30,7 +30,7 @@ const showBeian = !!(icp || pubsec);
                 href={`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${pubsecNumber}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="public-security-beian"
+                class="stalux-beian-public-security-beian stalux-u-items-center"
             >
                 <img
                     src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
@@ -41,45 +41,3 @@ const showBeian = !!(icp || pubsec);
         )}
     </div>
 )}
-
-<style>
-.beian-info {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.beian-info a {
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.beian-info a:hover {
-    color: rgba(255, 255, 255, 0.9);
-    text-decoration: none;
-}
-
-.public-security-beian {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.public-security-beian:hover {
-    color: rgba(255, 255, 255, 0.9);
-    text-decoration: none;
-}
-
-.public-security-beian img {
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-}
-</style>

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

@@ -21,21 +21,6 @@ const copyrightYear =
         : currentYear;
 ---
 
-<small class="copyright">
+<small class="stalux-copyright stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
     <span>&copy; {copyrightYear} {props.author || ""}. {t("footer.rightsReserved")}</span>
 </small>
-
-<style>
-.copyright {
-    color: var(--white-70p);
-    font-weight: 500;
-    display: flex;
-    gap: 0.3em;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.copyright span {
-    margin: 0;
-}
-</style>

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

@@ -16,17 +16,17 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
 ---
 
 {showStats && (
-    <p class="site-stats">
+    <p class="stalux-stats-site-stats stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
         <span id="vercount_container_site_uv">
             {t("footer.visitors")}
             <span id="vercount_value_site_uv">Loading...</span> {t("footer.visits")}
         </span>
-        <span class="stats-separator">|</span>
+        <span class="stalux-stats-stats-separator">|</span>
         <span id="vercount_container_site_pv">
             {t("footer.totalVisits")}
             <span id="vercount_value_site_pv">Loading...</span> {t("footer.times")}
         </span>
-        <span class="stats-separator">|</span>
+        <span class="stalux-stats-stats-separator">|</span>
         <span id="word-count-container">
             {t("footer.totalWords")}
             <span id="word-count-value">{wordCount ?? "Loading..."}</span> {t("footer.chars")}
@@ -36,7 +36,7 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
 
 {buildtime && (
     <div
-        class="site-build-time"
+        class="stalux-stats-site-build-time stalux-u-text-center"
         data-stalux-buildtime={buildtime}
         data-stalux-runtime-format={t("footer.runtimeFormat")}
     >
@@ -46,24 +46,3 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
         </span>
     </div>
 )}
-
-<style>
-.site-stats {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.stats-separator {
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.site-build-time {
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.8);
-    text-align: center;
-}
-</style>

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

@@ -9,7 +9,7 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
 ---
 
 {showThemeInfoSection && (
-    <div class="theme-info">
+    <div class="stalux-theme-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
         {showPoweredBy && (
             <span>
                 Powered by
@@ -33,30 +33,3 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
         )}
     </div>
 )}
-
-<style>
-.theme-info {
-    color: var(--white-70p);
-    font-size: 0.85rem;
-    display: flex;
-    justify-content: center;
-    gap: 0.3em;
-    flex-wrap: wrap;
-}
-
-.theme-info span {
-    margin: 0;
-}
-
-.theme-info a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    margin: 0 0.2em;
-}
-
-.theme-info a:hover {
-    color: rgba(255, 255, 255, 1);
-    text-decoration: none;
-}
-</style>

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

@@ -5,7 +5,7 @@ import FooterBeian from "@components/stalux/footer/FooterBeian.astro";
 import FooterCopyright from "@components/stalux/footer/FooterCopyright.astro";
 import FooterStats from "@components/stalux/footer/FooterStats.astro";
 import FooterThemeInfo from "@components/stalux/footer/FooterThemeInfo.astro";
-import footerStyle from "@styles/components/footer/footer.module.css";
+
 import type { BadgeItem, BadgeOptions } from "@utils/badge-generator";
 import { getAuthorData, getFooterData, getSiteData } from "@utils/config-utils";
 import { formatWordCount, getTotalWordCount } from "@utils/word-count-utils";
@@ -50,8 +50,8 @@ const totalWordCount = await getTotalWordCount(Astro.logger);
 const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "zh-CN");
 ---
 
-<footer class={footerStyle.siteFooter} transition:persist-props>
-    <div class={footerStyle.footerContent}>
+<footer class="stalux-footer stalux-u-w-full stalux-u-text-center" transition:persist-props>
+    <div class="stalux-footer-content stalux-u-flex stalux-u-flex-col">
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (
     <FooterCopyright author={author} startYear={footerConfig?.copyright?.startYear} />

package/src/components/stalux/layout/listPage.astro

@@ -2,7 +2,7 @@
 import { getCollection } from "astro:content";
 import Navs from "@components/stalux/layout/navs.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/listPage.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 
 interface Props {
@@ -20,7 +20,7 @@ const siteConfig = getSiteData(configEntries);
 <Stalux title={`${title} | ${siteConfig.title}`} description={description}>
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.title}>{heading}</h1>
-    {subheading && <div class={styles.description}>{subheading}</div>}
+    <h1 class="stalux-page-title stalux-u-text-center">{heading}</h1>
+    {subheading && <div class="stalux-page-description stalux-u-text-center">{subheading}</div>}
     <slot />
 </Stalux>