1
<div id="navbar" class="z-50 onload-animation sticky top-0">
2
    <div class:list={[
3
        className,
4
        "!overflow-visible max-w-[var(--page-width)] h-[4.5rem] mx-auto flex items-center justify-between px-4 nav-glass rounded-b-2xl"]}>

1
.nav-glass {
2
    background: color-mix(in oklab, var(--card-bg) 72%, transparent);
3
    backdrop-filter: blur(12px) saturate(1.15);
4
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
5
    border: 1px solid var(--line-divider);
6
    border-top: 0; /* 貼頂時移除上邊框，避免出現縫隙 */
7
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
8
}
9
.nav-submenu {
10
    background: color-mix(in oklab, var(--card-bg) 82%, transparent);
11
    backdrop-filter: blur(16px) saturate(1.1);
12
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
13
    border: 1px solid var(--line-divider);
14
}

1
<div class="relative group inline-block after:absolute after:left-0 after:top-full after:h-4 after:w-full after:content-['']">
2
    ...
3
    <div class="absolute left-0 top-full mt-4 z-50 hidden group-hover:block group-focus-within:block w-full min-w-full nav-submenu rounded-xl p-0 shadow-xl">
4
        {l.children.map((c) => (
5
            <a href={c.external ? c.url : url(c.url)} target={c.external ? "_blank" : null}
6
               class="block w-full px-3 py-2 text-sm font-bold text-center text-black/75 dark:text-white/75 hover:text-[var(--primary)] hover:bg-white/10 rounded-none first:rounded-t-xl last:rounded-b-xl transition">
7
                {c.name}
8
            </a>
9
        ))}
10
    </div>
11
</div>

1
const { remarkPluginFrontmatter } = await entry.render();
2
const hasAudio = Boolean(entry.data?.audio && entry.data.audio.trim() !== "");

1
{hasAudio && (
2
    <div class="absolute z-30 top-2 right-2 md:top-3 md:right-3 pointer-events-none">
3
        <span class="music-badge inline-flex items-center justify-center w-8 h-8 md:w-9 md:h-9 rounded-full bg-black/60 text-white border border-white/25 backdrop-blur shadow">
4
            <Icon name="fa6-solid:music" class="text-sm" />
5
        </span>
6
    </div>
7
)}

1
@keyframes musicPulse {
2
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
3
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255,255,255,0.08); }
4
}
5

6
.music-badge {
7
    animation: musicPulse 2.4s ease-in-out infinite;
8
}
9

10
@media (prefers-reduced-motion: reduce) {
11
    .music-badge { animation: none; }
12
}

1
<!-- word count and read time  -->
2
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
3
    <div>
4
        {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
5
    </div>
6
    <div>|</div>
7
    <div>
8
        閱覽時間 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
9
    </div>
10
</div>

1
<MainGridLayout title={friendsConfig.title || "友鏈"} description={friendsConfig.subtitle || undefined}>
2
    <div class="card-base z-10 px-9 py-6 relative w-full ">
3
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8 my-4">
4
            {friendItems.map((item) => (
5
                <div class="flex flex-nowrap items-stretch h-28 gap-4 rounded-[var(--radius-large)]">
6
                    <div class="w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-900">
7
                        <img src={item.avatar} alt="站点头像" class="w-full h-full object-cover" />
8
                    </div>
9
                    <div class="grow w-full">
10
                        <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 mb-1">{item.name}</div>
11
                        {item.description && (
12
                            <div class="text-50 text-sm font-medium">{item.description}</div>
13
                        )}
14
                    </div>
15
                    <a href={item.url} target="_blank" rel="noopener noreferrer" class="flex btn-regular w-[3.25rem] rounded-lg">
16
                        ...
17
                    </a>
18
                </div>
19
            ))}
20
        </div>
21
    </div>
22
</MainGridLayout>

1
export const friendsConfig: FriendsConfig = {
2
    title: "友鏈",
3
    subtitle: "Friends & Partners",
4
    items: [
5
        {
6
            avatar: "/assets/友鏈/ygotoken.jpg",
7
            name: "YGO token",
8
            description: "...",
9
            url: "http://www.ygotoken.com/",
10
        },
11
        {
12
            avatar: "/assets/戰略合作夥伴/leo.webp",
13
            name: "Leo理央",
14
            description: "...",
15
            url: "https://www.leowu.love/",
16
        },
17
    ],
18
};