美化xlog初稿

先に一部を書いて、まだ編集していないので、最後に怠け癖が出て書きたくなくなるかもしれません😅
以下のチュートリアルは、このブログのスタイルです。

ダークモードではより美しく見えます。
ナビゲーションバーのアイコンはそのままコピーしてください。

xlog の装飾チュートリアルが見つからなかったら、自分で手を動かして自分で作りましょう。#

上の黒いバナーのスタイルは、ブロガーが使用している完全透明の画像です全透明.png
探す必要はありません、画像は完全に空白です。

ダウンロードして、サイトの設定 - 一般 - バナーに置いてください。#

以下のコードを直接コピーして、カスタム CSS に貼り付けます。#

/*--ナビゲーションバーに白い上部ボーダーを追加*/
.items-center.text-gray-500 {
    border-top: 1px solid white; // 上部ボーダーのみ必要な場合、下部ボーダーも使用できます
}
/*--サブタイトルのカラフルさ*/
.whitespace-pre-wrap {
    background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
    color: transparent;
     -webkit-background-clip: text;
     -webkit-animation: slide 2s infinite linear;
     animation: slide 5s infinite linear;
     }
 /*--記事の概要を大きくする*/
.xlog-post:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
.xlog-post {
    padding: 1rem;
}
/*---アーカイブ記事リストを大きくする*/
.items-center.-mx-2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
}

/*--ボタンを大きくする*/
.button:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);   
}