私のCSSを共有します😘

こんにちは、今日は私の Xlog の CSS ソリューションを共有します。
@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");

.xlog-page-index,
.xlog-page-post {
 font-family: "LXGW WenKai Screen R", sans-serif;
}
/* このメディアクエリを削除または変更 */
@media (width > 1024px) {
 .xlog-page-index .xlog-header {
   height: 100vh;
   top: 0; /* calc(40px - 100vh) から変更 */
 }
}

.xlog-header {
 height: 100vh; /* ビューポートの全高 */
 top: 0 !important; /* スティッキーポジショニングをオーバーライド */
 position: relative; /* 相対位置に変更 */
 z-index: 0; /* 背景要素のための低いz-index */
}

.xlog-header .xlog-banner {
 height: 100%;
 position: absolute;
 width: 100%;
 left: 0;
 top: 0;
}

.xlog-header .xlog-banner img[alt=banner] {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(3px) brightness(65%); /* より良い可視性のためにぼかしを減少 */
}

main {
 position: relative;
 z-index: 1; /* コンテンツを前面に持ってくる */
}


.xlog-site-name {
 /* デフォルトの黒いフォント */
 color: #000 !important;
 font-family: Candyshop;
 text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
   -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
 font-size: 35px;
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 /* デフォルトのグラデーションを削除 */
}

.xlog-site-name:hover {
 /* ホバー時にグラデーションを適用 */
 background-image: linear-gradient(
   to right,
   var(--theme-color),
   #ff6b6b,
   #4ecdc4
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.xlog-header .text-gray-500 {
 /* メニューの基本スタイル */
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(10px);
 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
 padding: 1rem 2rem;
 border-radius: 999px;
 transition: all 0.3s ease;
}

.xlog-header .text-gray-500:hover {
 /* ホバー強化効果 */
 background: rgba(255, 255, 255, 1);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 transform: translateY(-2px);
}

.xlog-header .text-gray-500 a {
 /* メニュー項目のテキストスタイル */
 color: var(--grey-8) !important;
 font-weight: 600;
 padding: 0.5rem 1.5rem;
 border-radius: 999px;
 transition: all 0.2s ease;
}

.xlog-header .text-gray-500 a:hover {
 /* メニュー項目ホバー効果 */
 color: var(--theme-color) !important;
 background: rgba(0, 0, 0, 0.05);
 transform: scale(1.05);
}

/* ダークモード対応 */
.dark .xlog-header .text-gray-500 {
 background: rgba(30, 30, 30, 0.95);
}

.dark .xlog-header .text-gray-500 a {
 color: var(--grey-2) !important;
}

.dark .xlog-header .text-gray-500 a:hover {
 background: rgba(255, 255, 255, 0.1);
}

.prose p {
 color: var(--grey-7);
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.prose p:hover {
 background-image: linear-gradient(
   to right,
   var(--theme-color),
   #4ecdc4,
   var(--theme-color)
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.dark .prose p {
 color: #fff !important;
}

.dark .prose p:hover {
 background-image: linear-gradient(
   to right,
   #4ecdc4,
   var(--theme-color),
   #4ecdc4
 );
}

/* ボタンスタイルの統一 */
.xlog-header .text-gray-500 {
 background: linear-gradient(
   to right,
   rgba(255, 255, 255, 0.9),
   rgba(255, 255, 255, 0.7)
 );
}

.dark .xlog-header .text-gray-500 {
 background: linear-gradient(
   to right,
   rgba(30, 30, 30, 0.9),
   rgba(30, 30, 30, 0.7)
 );
}


/* モバイル端末の最適化強化 */
@media (max-width: 768px) {
 .xlog-header {
   height: 75vh; /* 高さを微調整 */
 }

 .xlog-site-name {
   font-size: 24px; /* モバイル端末に適したサイズ */
   margin-top: 15px;
   letter-spacing: 1px; /* 文字間隔を増加 */
 }

 .xlog-header .logo {
   max-width: 60px; /* ロゴサイズを縮小 */
   margin-bottom: 10px;
   filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* シャドウを追加 */
 }

 .xlog-header .text-gray-500 {
   padding: 0.6rem 1rem; /* よりコンパクトな内側の余白 */
   margin-top: 0.8rem;
   width: 90%; /* エッジに貼り付かないように */
 }

 .xlog-header .text-gray-500 a {
   padding: 0.3rem 0.6rem;
   font-size: 12px; /* より小さいフォントサイズ */
 }
}

/* PC端の微調整 */
.xlog-site-name {
 position: relative;
 z-index: 2; /* 背景の上に確保 */
}

.xlog-header .text-gray-500 {
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* アニメーションカーブを統一 */
}

/* モバイル端の画像最適化 */
@media (hover: none) {
 .xlog-header .xlog-banner img[alt=banner] {
   filter: blur(1px) brightness(70%);
 }
}

.dark .xlog-header .logo {
 filter: drop-shadow(0 2px 4px rgba(255,255,255,0.1)) 
         brightness(0.9); /* ダークモードの明るさを微調整 */
}