我來分享自己的CSS😘

Hello，今天我来分享我 Xlog 的 CSS 方案。

Copy
@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;
}
/* Remove or modify this media query */
@media (width > 1024px) {
.xlog-page-index .xlog-header {
height: 100vh;
top: 0; /* Changed from calc(40px - 100vh) */
}
}

.xlog-header {
height: 100vh; /* Full viewport height */
top: 0 !important; /* Override sticky positioning */
position: relative; /* Change to relative positioning */
}

.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(2px) brightness(80%);
}

main {
position: relative;
}

.xlog-site-name {
color: #222 !important;
font-family: Candyshop, "LXGW WenKai Screen R", sans-serif;
font-size: 35px;
background: rgba(255,255,255,0.35); /* 更透明 */
border-radius: 16px;
padding: 0.2em 1.2em;
box-shadow: none;
text-shadow: 0 2px 8px #fff8, 0 0 2px #4f8cff22;
display: inline-block;
}
.dark .xlog-site-name {
color: #fff !important;
background: rgba(24,28,32,0.35); /* 更透明 */
border-radius: 16px;
text-shadow: 0 2px 8px #222a, 0 0 2px #4f8cff22;
}

.xlog-header .text-gray-500 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(10px);
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
padding: 0.5rem 1.2rem;
border-radius: 999px;
gap: 0.5rem;
min-height: unset;
min-width: 0;
}

.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 {
padding: 0.3rem 1rem;
font-size: 1rem;
}

.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: color 0.3s;
}

.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: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: 20px;
padding: 0.15em 0.8em;
}

.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.3rem 0.5rem;
gap: 0.2rem;
}

.xlog-header .text-gray-500 a {
padding: 0.2rem 0.5rem;
font-size: 0.95rem;
}
}

/* PC端微调 */
.xlog-site-name {
position: relative;
z-index: 2; /* 确保在背景之上 */
}

.xlog-header .text-gray-500 {
transition: none !important;
}

.xlog-header .text-gray-500 a {
transition: none !important;
}

/* 移动端图片优化 */
@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); /* 暗色模式微调亮度 */
}

.xlog-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
}
.dark .xlog-header::after {
background: linear-gradient(to top, rgba(24,28,32,0.7) 0%, rgba(24,28,32,0.1) 60%, rgba(24,28,32,0) 100%);
}

.viewer-container {
z-index: 99999 !important;
position: fixed !important;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85) !important;
pointer-events: all !important;
}
.viewer-container img {
z-index: 100000 !important;
position: relative;
display: block;
margin: auto;
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 4px 32px rgba(0,0,0,0.25);
border-radius: 12px;
}

.viewer-open main,
.viewer-open .prose {
opacity: 0 !important;
}

.friend-links-row {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: center; /* 居中显示 */
gap: 24px 16px; /* 行间距、列间距 */
margin-bottom: 30px;
}

.friend-item {
display: flex;
flex-direction: column;
align-items: center;
width: 220px; /* 默认宽度，适合大部分屏幕 */
background: #fff;
border-radius: 16px;
padding: 20px 12px 16px 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: box-shadow 0.2s;
margin-bottom: 0;
}

.friend-item:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.friend-item img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #eee;
margin-bottom: 12px;
display: block;
}

.friend-item strong {
font-size: 1.08em;
color: #222;
margin-bottom: 6px;
text-align: center;
word-break: break-all;
}

.friend-item strong {
font-size: 1.08em;
color: #222;
margin-bottom: 6px;
text-align: center;
word-break: break-all;
display: block; /* 关键：让 strong 占满一行 */
width: 100%; /* 关键：宽度100% */
}

.friend-item strong a {
color: #222;
text-decoration: none;
transition: color 0.2s;
display: block; /* 关键：让 a 也占满一行 */
text-align: center; /* 关键：居中 */
width: 100%;
}

.friend-item div > div {
color: #888;
font-size: 1em;
margin-top: 2px;
text-align: center;
word-break: break-all;
}

/* 响应式：手机端优化 */
@media (max-width: 600px) {
.friend-links-row {
gap: 16px 0;
}
.friend-item {
width: 90vw; /* 卡片宽度自适应屏幕 */
max-width: 340px;
min-width: 0;
margin: 0 auto;
padding: 16px 6px 12px 6px;
}
.friend-item img {
width: 60px;
height: 60px;
}
}