你好，今天我來分享我 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); /* 暗色模式微調亮度 */
}