@xingwangzhe/stalux 1.29.8 → 1.30.0

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

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Search from "@components/stalux/common/search.astro";
-import styles from "@styles/components/layout/navs.module.css";
+
 import { getNavsData, getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 import { getLucideIcon } from "@utils/lucide-icons";
@@ -20,21 +20,21 @@ const navs = navsConfig?.items ?? [];
     <button
         type="button"
         data-ref="stalux-nav-toggle"
-        class={styles.navToggle}
+        class="stalux-nav-toggle"
         aria-label={t("nav.menu")}
     >
         {MenuIcon && <MenuIcon size={20} stroke-width={2} class="nav-icon" />}
     </button>
 
     <!-- 侧边栏遮罩 -->
-    <div data-ref="stalux-nav-overlay" class={styles.navOverlay}></div>
+    <div data-ref="stalux-nav-overlay" class="stalux-nav-overlay"></div>
 
     <!-- 导航列表 -->
-    <div class={styles.navContainer}>
+    <div class="stalux-nav-container">
         <button
             type="button"
             data-ref="stalux-nav-scroll-left"
-            class={styles.scrollBtn}
+            class="stalux-nav-scroll-btn"
             data-side="left"
             aria-label={t("nav.scrollLeft")}
         >
@@ -43,32 +43,32 @@ const navs = navsConfig?.items ?? [];
             </svg>
         </button>
 
-        <ul data-ref="stalux-nav-list" class={styles.navList}>
+        <ul data-ref="stalux-nav-list" class="stalux-nav-list">
             {navs.map((item) => {
     const NavIcon = item.icon ? getLucideIcon(item.icon, Astro.logger) : null;
     return (
-        <li class={styles.navItem}>
+        <li class="stalux-nav-item">
             <a
                 href={item.link}
-                class={styles.navLink}
+                class="stalux-nav-link"
                 data-ref="stalux-nav-link"
                 data-astro-prefetch
             >
                 {NavIcon && <NavIcon size={20} stroke-width={2} class="nav-icon" />}
-                <span class={styles.navText}>{item.title}</span>
+                <span class="stalux-nav-text">{item.title}</span>
             </a>
         </li>
     );
 })}
-            <li class={styles.navItem}>
+            <li class="stalux-nav-item">
                 <a
                     href="#search"
-                    class={styles.navLink}
+                    class="stalux-nav-link"
                     data-ref="stalux-search-btn"
                     aria-label={t("search.title")}
                 >
                     {SearchIcon && <SearchIcon size={20} stroke-width={2} class="nav-icon" />}
-                    <span class={styles.navText}>{t("nav.search")}</span>
+                    <span class="stalux-nav-text">{t("nav.search")}</span>
                 </a>
             </li>
         </ul>
@@ -76,7 +76,7 @@ const navs = navsConfig?.items ?? [];
         <button
             type="button"
             data-ref="stalux-nav-scroll-right"
-            class={styles.scrollBtn}
+            class="stalux-nav-scroll-btn"
             data-side="right"
             aria-label={t("nav.scrollRight")}
         >

package/src/components/stalux/links/linkCard.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-links.css";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/links/linkCard.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -28,8 +29,8 @@ const desc = link.description ?? "";
 const icon = link.icon ?? link.avatar ?? "/favicon.ico";
 ---
 
-<a class={styles.card} href={href} target="_blank" rel="noopener">
-    <div class={styles.avatar}>
+<a class="stalux-link-card" href={href} target="_blank" rel="noopener">
+    <div class="stalux-link-card-avatar">
         <img
             src={icon}
             alt={t("links.iconAlt", { name: title })}
@@ -38,8 +39,8 @@ const icon = link.icon ?? link.avatar ?? "/favicon.ico";
             height="80"
         >
     </div>
-    <div class={styles.content}>
-        <h2 class={styles.title}>{title}</h2>
-        {desc && <p class={styles.description}>{desc}</p>}
+    <div class="stalux-link-card-content">
+        <h2 class="stalux-link-card-title">{title}</h2>
+        {desc && <p class="stalux-link-card-description">{desc}</p>}
     </div>
 </a>

package/src/components/stalux/links/linkList.astro

@@ -1,7 +1,8 @@
 ---
+import "../../../styles/generated-links.css";
 import { getCollection } from "astro:content";
 import LinkCard from "@components/stalux/links/linkCard.astro";
-import styles from "@styles/components/links/linkList.module.css";
+
 import { getLinksData } from "@utils/config-utils";
 
 const configEntries = await getCollection("config");
@@ -9,9 +10,9 @@ const linksConfig = getLinksData(configEntries);
 const links = linksConfig?.sites ?? [];
 ---
 
-<ul class={styles.list}>
+<ul class="stalux-links">
     {links.map((link) => (
-    <li class={styles.item}>
+    <li class="stalux-link-list-item">
         <LinkCard link={link} />
     </li>
 ))}

package/src/components/stalux/links/socialMedia.astro

@@ -2,7 +2,7 @@
 // 按需导入图标 — Vite tree-shake 只打包用到的图标
 
 import { getCollection } from "astro:content";
-import styles from "@styles/components/links/socialLinks.module.css";
+
 import { getMediaLinksData } from "@utils/config-utils";
 import {
     type SimpleIcon,
@@ -35,7 +35,7 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
 ---
 
 <nav
-    class={styles["social-links"]}
+    class="stalux-social"
     transition:persist-props
     aria-label="Social media"
     data-stalux-social-animate={String(!isPostPage)}

package/src/components/stalux/posts/PostTaxonomy.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
-import style from "@styles/components/posts/postTaxonomy.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -27,8 +28,8 @@ const cfg = {
         empty: t("taxonomy.noTags"),
         containerName: "tags-container",
         contentName: "tags-content",
-        listClass: style.listWrap,
-        itemClass: style.itemPill,
+        listClass: "stalux-post-taxonomy-list-wrap",
+        itemClass: "stalux-post-taxonomy-item-pill",
     },
     category: {
         prefix: "/categories/",
@@ -36,14 +37,18 @@ const cfg = {
         empty: t("taxonomy.noCategories"),
         containerName: "categories-container",
         contentName: "categories-content",
-        listClass: style.listColumn,
-        itemClass: style.itemColumn,
+        listClass: "stalux-post-taxonomy-list-column",
+        itemClass: "stalux-post-taxonomy-item-column",
     },
 }[kind];
 ---
 
-<nav class={style.container} transition:name={cfg.containerName} aria-label={title ?? cfg.heading}>
-    {items.length > 0 && <h3 class={style.title}>{title ?? cfg.heading}</h3>}
+<nav
+    class="stalux-post-taxonomy-container"
+    transition:name={cfg.containerName}
+    aria-label={title ?? cfg.heading}
+>
+    {items.length > 0 && <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>}
     {items.length > 0 ? (
     <div class={cfg.listClass} transition:name={cfg.contentName}>
         {items.map((item) => (
@@ -53,6 +58,6 @@ const cfg = {
         ))}
     </div>
 ) : (
-    <div class={style.empty}>{cfg.empty}</div>
+    <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
 )}
 </nav>

package/src/components/stalux/posts/postAuthor.astro

@@ -1,7 +1,8 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
 import Author from "@components/stalux/common/author.astro";
-import style from "@styles/components/posts/postAuthor.module.css";
+
 import { getAuthorData } from "@utils/config-utils";
 
 const configEntries = await getCollection("config");
@@ -11,11 +12,11 @@ const authorConfig = getAuthorData(configEntries);
 const isPostPage = Astro.url.pathname.includes("/posts/");
 ---
 
-<aside class={style.sidebarContainer} style={isPostPage ? "margin-top: -3em;" : ""}>
-    <div class={style.authorSection}>
-        <div class={style.authorCard}>
+<aside class="stalux-byline-sidebar-container" style={isPostPage ? "margin-top: -3em;" : ""}>
+    <div class="stalux-byline-author-section">
+        <div class="stalux-byline-author-card">
             <Author iscolum />
-            <p class={style.authorBio}>{authorConfig.bio}</p>
+            <p class="stalux-byline-author-bio">{authorConfig.bio}</p>
         </div>
     </div>
 </aside>

package/src/components/stalux/posts/postCC.astro

@@ -1,7 +1,8 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
 import ccIcon from "@assets/cc-icon.svg?raw";
-import style from "@styles/components/posts/postCC.module.css";
+
 import { buildCCLink, buildCCName } from "@utils/cc";
 import { createTranslator } from "@utils/i18n";
 
@@ -24,19 +25,19 @@ const licenseLink = buildCCLink(cc);
 const licenseName = buildCCName(cc, t);
 ---
 
-<div class={style.ccBox}>
-    <div class={style.ccContent}>
-        <p class={style.ccTitle}>{title}</p>
-        <p class={style.ccAuthor}>{t("post.author")}{author}</p>
+<div class="stalux-license-box">
+    <div class="stalux-license-content">
+        <p class="stalux-license-title">{title}</p>
+        <p class="stalux-license-author">{t("post.author")}{author}</p>
         {url && (
-    <p class={style.ccUrl}>
+    <p class="stalux-license-url">
         {t("post.articleLink")}
         <a href={url} target="_blank" rel="noopener noreferrer">
             {url}
         </a>
     </p>
 )}
-        <p class={style.ccLicense}>
+        <p class="stalux-license-license">
             {t("post.licensedUnder")}
             <a href={licenseLink} target="_blank" rel="noopener noreferrer">
                 {licenseName}
@@ -44,7 +45,7 @@ const licenseName = buildCCName(cc, t);
         </p>
     </div>
 
-    <div class={style.ccWatermark}>
-        <div class={style.ccIcon} set:html={ccIcon} />
+    <div class="stalux-license-watermark">
+        <div class="stalux-license-icon" set:html={ccIcon} />
     </div>
 </div>

package/src/components/stalux/posts/postCard.astro

@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { getCollection } from "astro:content";
-import style from "@styles/components/posts/postCard.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { toMachineDateTime } from "@utils/semantic-time";
 import { getPostTitleTransitionName } from "@utils/view-transitions";
@@ -20,8 +20,8 @@ const timezone = siteConfig.timezone;
 const description = post.data.desc || "";
 ---
 
-<article class={style.post}>
-    <div class={style.postContainer}>
+<article class="block h-full text-inherit no-underline">
+    <div class="stalux-post-card">
         {post.data.cover && (
     <a
         href={`/posts/${post.data.abbrlink}/`}
@@ -29,7 +29,7 @@ const description = post.data.desc || "";
         data-astro-prefetch="viewport"
         aria-label={post.data.title}
     >
-        <div class={style.postCover}>
+        <div class="stalux-card-post-cover">
             <img
                 src={post.data.cover}
                 alt={post.data.title}
@@ -43,17 +43,17 @@ const description = post.data.desc || "";
     </a>
 )}
         <h2
-            class={style.postTitle}
+            class="stalux-card-post-title"
             transition:name={priority ? getPostTitleTransitionName(post.data.abbrlink) : undefined}
         >
             <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
                 {post.data.title}
             </a>
         </h2>
-        <div class={style.time}>
+        <div class="stalux-card-time">
             {post.data.date && (
     <time
-        class={style.postDate}
+        class="stalux-card-post-date"
         datetime={timezone ? toMachineDateTime(post.data.date, timezone) : post.data.date}
     >
         {post.data.date}
@@ -61,33 +61,33 @@ const description = post.data.desc || "";
 )}
             {post.data.updated && (
     <time
-        class={style.postUpdated}
+        class="stalux-card-post-updated"
         datetime={timezone ? toMachineDateTime(post.data.updated, timezone) : post.data.updated}
     >
         {post.data.updated}
     </time>
 )}
         </div>
-        <div class={style.postDescription}>{description}</div>
-        <div class={style.postMeta}>
-            <div class={style.postTags}>
+        <div class="stalux-card-post-description">{description}</div>
+        <div class="stalux-card-post-meta">
+            <div class="stalux-card-post-tags">
                 {post.data.tags?.map((tag) => (
     <a class="a-none" href={`/tags/${tag}`} data-astro-prefetch>
-        <span class={style.postTag}>{tag}</span>
+        <span class="stalux-card-post-tag">{tag}</span>
     </a>
 ))}
             </div>
-            <div class={style.postCategories}>
+            <div class="stalux-card-post-categories">
                 {post.data.categories?.map((category) => (
     <a class="a-none" href={`/categories/${category}`} data-astro-prefetch>
-        <span class={style.postCategory}>{category}</span>
+        <span class="stalux-card-post-category">{category}</span>
     </a>
 ))}
             </div>
         </div>
         <a
             href={`/posts/${post.data.abbrlink}/`}
-            class={`${style.readMore} a-none`}
+            class="stalux-card-read-more a-none"
             data-astro-prefetch
         >
             Read More

package/src/components/stalux/posts/postContent.astro

@@ -1,7 +1,8 @@
 ---
+import "../../../styles/generated-article.css";
+import "../../../styles/generated-prose.css";
 import "photoswipe/dist/photoswipe.css";
-import style from "@styles/components/posts/postContent.module.css";
-import "@styles/components/markdown.css";
+
 import { getCollection } from "astro:content";
 import { getPromoteData, getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
@@ -33,17 +34,19 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
 ---
 
 <article
-    class={style.articleContent}
+    class="stalux-article"
     data-stalux-gallery={props.hasImage ? "true" : undefined}
     transition:name={props.transitionName}
 >
     <!-- Article Header -->
-    <header class={style.articleHeader}>
-        <h1 class={style.title} transition:name={props.titleTransitionName}>{props.title}</h1>
-        <div class={style.metadata}>
+    <header class="stalux-post-article-header">
+        <h1 class="stalux-post-title" transition:name={props.titleTransitionName}>
+            {props.title}
+        </h1>
+        <div class="stalux-post-metadata">
             {props.date && (
     <time
-        class={style.metaItem}
+        class="stalux-post-meta-item"
         datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}
     >
         {t("post.publishTime")}
@@ -53,7 +56,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
 
             {props.updated && (
     <time
-        class={style.metaItem}
+        class="stalux-post-meta-item"
         datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}
     >
         {t("post.updateTime")}
@@ -62,9 +65,9 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
 )}
         </div>
         {(
-    <div class={style.pageStats}>
+    <div class="stalux-post-page-stats">
         {(props.readingMinutes ?? 0) > 0 && (
-            <span class={style.readingTime}>
+            <span class="stalux-post-reading-time">
                 {t("post.readingTime")}
                 {props.readingMinutes && props.readingMinutes > 0
                     ? props.readingMinutes < 1
@@ -74,7 +77,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
             </span>
         )}
         {(props.wordCount ?? 0) > 0 && (
-            <span class={style.wordCount}>
+            <span class="wordCount">
                 {t("post.wordCount")}
                 {props.wordCount}
             </span>
@@ -86,8 +89,13 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
     </div>
 )}
         {exportMd && (
-    <div class={style.sourceLinkRow}>
-        <a class={style.sourceLink} href={mdSourceUrl} target="_blank" rel="noopener noreferrer">
+    <div class="stalux-post-source-link-row">
+        <a
+            class="stalux-post-source-link"
+            href={mdSourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
             {t("post.viewSource")}
         </a>
     </div>
@@ -95,7 +103,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
     </header>
 
     <!-- Article Body -->
-    <section class={style.body} data-pagefind-body>
+    <section class="stalux-post-body stalux-prose" data-pagefind-body>
         <slot />
     </section>
 </article>

package/src/components/stalux/posts/postLeft.astro

@@ -1,21 +1,22 @@
 ---
+import "../../../styles/generated-article.css";
 import SocialMedia from "@components/stalux/links/socialMedia.astro";
 import PostAuthor from "@components/stalux/posts/postAuthor.astro";
 import RandomPost from "@components/stalux/posts/randomPost.astro";
-import style from "@styles/components/posts/postSidebar.module.css";
+
 import { getSidebarAnimation } from "@utils/view-transitions";
 ---
 
 <aside
-    class={style.sidebar}
+    class="stalux-sidebar"
     transition:name="left-sidebar"
     transition:animate={getSidebarAnimation("left")}
 >
     <PostAuthor />
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <SocialMedia />
     </div>
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <RandomPost />
     </div>
 </aside>

package/src/components/stalux/posts/postList.astro

@@ -1,7 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
 import PostCard from "@components/stalux/posts/postCard.astro";
-import styles from "@styles/components/posts/postList.module.css";
 
 interface Props {
     posts?: CollectionEntry<"posts">[];
@@ -12,8 +11,8 @@ const props = Astro.props as Props;
 const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
 ---
 
-<div data-stalux="postlist" class={styles.container}>
-    <ul class={styles["post-list"]}>
+<div data-stalux="postlist" class="stalux-post-list-container">
+    <ul class="post-list">
         {posts.map((post, index) => (
     <li>
         <PostCard post={post} priority={index === 0} />

package/src/components/stalux/posts/postNavigation.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
-import style from "@styles/components/posts/postNavigation.module.css";
+
 import { createTranslator } from "@utils/i18n";
 
 interface Props {
@@ -18,16 +19,16 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
 ---
 
 {(props.prev || props.next) && (
-    <nav class={style.postNavigation} aria-label={t("post.navigation")}>
-        <div class={style.postNavigationInner}>
+    <nav class="stalux-pagination" aria-label={t("post.navigation")}>
+        <div class="stalux-pagination-inner">
             {props.prev ? (
                 <a
                     href={props.prev.url}
-                    class={`${style.postNavLink} ${style.prevPost}`}
+                    class="stalux-pagination-link stalux-pagination-prev-post"
                     rel="prev"
                     data-astro-prefetch
                 >
-                    <span class={style.postNavArrow}>
+                    <span class="stalux-pagination-arrow">
                         <svg
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
@@ -43,14 +44,14 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
                             <path d="M19 12H5M12 19l-7-7 7-7" />
                         </svg>
                     </span>
-                    <div class={style.postNavContent}>
-                        <span class={style.postNavLabel}>{t("post.prevPost")}</span>
-                        <span class={style.postNavTitle}>{props.prev.title}</span>
+                    <div class="stalux-pagination-content">
+                        <span class="stalux-pagination-label">{t("post.prevPost")}</span>
+                        <span class="stalux-pagination-title">{props.prev.title}</span>
                     </div>
                 </a>
             ) : (
-                <span class={`${style.postNavLink} ${style.prevPost} ${style.disabled}`}>
-                    <span class={style.postNavArrow}>
+                <span class="stalux-pagination-link stalux-pagination-prev-post stalux-pagination-disabled">
+                    <span class="stalux-pagination-arrow">
                         <svg
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
@@ -66,9 +67,9 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
                             <path d="M19 12H5M12 19l-7-7 7-7" />
                         </svg>
                     </span>
-                    <div class={style.postNavContent}>
-                        <span class={style.postNavLabel}>{t("post.prevPost")}</span>
-                        <span class={style.postNavTitle}>{t("post.noPrev")}</span>
+                    <div class="stalux-pagination-content">
+                        <span class="stalux-pagination-label">{t("post.prevPost")}</span>
+                        <span class="stalux-pagination-title">{t("post.noPrev")}</span>
                     </div>
                 </span>
             )}
@@ -76,15 +77,15 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
             {props.next ? (
                 <a
                     href={props.next.url}
-                    class={`${style.postNavLink} ${style.nextPost}`}
+                    class="stalux-pagination-link stalux-pagination-next-post"
                     rel="next"
                     data-astro-prefetch
                 >
-                    <div class={style.postNavContent}>
-                        <span class={style.postNavLabel}>{t("post.nextPost")}</span>
-                        <span class={style.postNavTitle}>{props.next.title}</span>
+                    <div class="stalux-pagination-content">
+                        <span class="stalux-pagination-label">{t("post.nextPost")}</span>
+                        <span class="stalux-pagination-title">{props.next.title}</span>
                     </div>
-                    <span class={style.postNavArrow}>
+                    <span class="stalux-pagination-arrow">
                         <svg
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
@@ -102,12 +103,12 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
                     </span>
                 </a>
             ) : (
-                <span class={`${style.postNavLink} ${style.nextPost} ${style.disabled}`}>
-                    <div class={style.postNavContent}>
-                        <span class={style.postNavLabel}>{t("post.nextPost")}</span>
-                        <span class={style.postNavTitle}>{t("post.noNext")}</span>
+                <span class="stalux-pagination-link stalux-pagination-next-post stalux-pagination-disabled">
+                    <div class="stalux-pagination-content">
+                        <span class="stalux-pagination-label">{t("post.nextPost")}</span>
+                        <span class="stalux-pagination-title">{t("post.noNext")}</span>
                     </div>
-                    <span class={style.postNavArrow}>
+                    <span class="stalux-pagination-arrow">
                         <svg
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"

package/src/components/stalux/posts/postRight.astro

@@ -1,8 +1,9 @@
 ---
+import "../../../styles/generated-article.css";
 import PostDate from "@components/stalux/common/date.astro";
 import PostTaxonomy from "@components/stalux/posts/PostTaxonomy.astro";
 import PostToc from "@components/stalux/posts/postToc.astro";
-import style from "@styles/components/posts/postSidebar.module.css";
+
 import { getSidebarAnimation } from "@utils/view-transitions";
 
 interface Props {
@@ -15,20 +16,20 @@ const { headings = [], tags = [], categories = [] } = Astro.props;
 ---
 
 <aside
-    class={style.sidebarRight}
+    class="stalux-sidebar-right"
     transition:name="right-sidebar"
     transition:animate={getSidebarAnimation("right")}
 >
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <PostDate />
     </div>
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <PostToc headings={headings} />
     </div>
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <PostTaxonomy kind="tag" items={tags} />
     </div>
-    <div class={style.sidebarContainer}>
+    <div class="stalux-sidebar-container">
         <PostTaxonomy kind="category" items={categories} />
     </div>
 </aside>