xlog裝修日記：頂欄、導航欄與毛玻璃

在工作午休期间，我美化了我的 xlog，添加了顶栏图片和背景图，修改了一些文字颜色、按钮颜色等，最主要的是加了一些毛玻璃效果，看起来似乎有了些高级感？

顺便吐槽某个用的图床，一开始预览的时候还是全图，后来再看的时候竟然变成了缩略图，于是乎切到了另一家上。

一些用到的 CSS 列在下面了，或许可以参考一下：

/*日间模式下的CSS变量*/
:root {
    --description-word-color: 灰色;
}
/*夜间模式下的CSS变量*/
:root.dark {
    --theme-color:#66CCFF;
    --tw-color-zinc-400: 爱丽丝蓝;
    --tw-color-zinc-700: 黑色;
    --tw-color-zinc-900: 灰色;
    --description-word-color: 爱丽丝蓝;
}

/*描述部分文字颜色*/
.xlog-site-description {
    color: var(--description-word-color);
}

/*主要部分背景*/
main {
    background-image: url(https://i.postimg.cc/Y9GkKhLD/background.png);
}

/*按钮颜色*/
.border-accent {
    border: 0 none
}
.button.is-primary {
    background-color: #337CCF;
}
.button.is-primary:hover {
    background-color: var(--theme-color);
}
.button.is-primary:focus {
    background-color: var(--theme-color);
}

/*连接按钮背景与文字颜色*/
.button.is-text.rounded-full {
    background-color: 爱丽丝蓝;
    color: 黑色;
}

/*导航栏文字颜色*/
.xlog-site-navigation-item, .xlog-site-navigation-item:hover {
    color: 黑色;
}
.xlog-site-navigation-item:after {
    background-color: 黑色;
}
.xlog-site-navigation-item-active, .xlog-site-navigation-item-active:hover {
    color: #0C356A;
}
.xlog-site-navigation-item-active:after {
    background-color: #0C356A;
}

/*主页文章块的毛玻璃效果*/
a.xlog-post {
    backdrop-filter: saturate(180%) blur(60px);
}

/*目录栏毛玻璃效果*/
.leading-loose {
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    backdrop-filter: saturate(180%) blur(60px);
}

/*目录栏文字hover颜色*/
.hover\:text-accent:hover {
    color: var(--theme-color);
}

/*文章部分毛玻璃效果*/
.xlog-post-content {
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    backdrop-filter: saturate(180%) blur(60px);
}

/*评论部分*/
.xlog-comment {
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    backdrop-filter: saturate(180%) blur(60px);
}