xlogリフォーム日記：トップバー、ナビゲーションバーとマットガラス

工作の昼休み中に自分の 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);
}