我來分享自己的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; /* 縮小logo尺寸 */
   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); /* 暗色模式微調亮度 */
}