在工作午休期間美化了下自己的 xlog，添加了頂欄圖片和背景圖，修改了一些文字顏色、按鈕顏色等，最主要的是加了一些毛玻璃效果，看起來似乎有了些高級感？
順便吐槽某個用的圖床，一開始預覽的時候還是全圖，後來再看的時候竟然變成了縮略圖，於是乎切到了另一家上。
一些用到的 CSS 列在下面了，或許可以參考一下：
/*日間模式下的CSS變數*/
:root {
--description-word-color: gray;
}
/*夜間模式下的CSS變數*/
:root.dark {
--theme-color:#66CCFF;
--tw-color-zinc-400: aliceblue;
--tw-color-zinc-700: black;
--tw-color-zinc-900: gray;
--description-word-color: aliceblue;
}
/*描述部分文字顏色*/
.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: aliceblue;
color: black;
}
/*導航欄文字顏色*/
.xlog-site-navigation-item, .xlog-site-navigation-item:hover {
color: black;
}
.xlog-site-navigation-item:after {
background-color: black;
}
.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);
}