Hello，今天我来分享我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;
}
/* 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;
 }
}