1 files changed, 159 insertions, 21 deletions

diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index f108da6..8828dbd 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -4,7 +4,7 @@
     --width-max: 720px;
     --font-primary: "Noto Serif SC", "Source Han Serif SC", serif;
     --font-secondary: monospace;
-    --font-size-primary: 1em;
+    --font-size-primary: 1.105em;
     --font-size-secondary: 0.8em;
     --body-bg-color: #ffffff;
     --bold-text-color: #222;
@@ -22,6 +22,18 @@
     --caption-text-color: #666;
     --toc-text-color: #e5e5e5;
     --toc-hover-color: #655e5e;
+
+    --music-bg-hover-light: #e5e5e5; /* neutral-200 */
+    --music-bg-light: rgba(229, 229, 229, 0.5); /* neutral-200/50 */
+    --music-text-secondary: #666;
+    --music-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .post-title a:hover,
+  a.item-link:hover,
+  .blog-posts a:hover {
+    text-decoration: underline 0.5px !important;
   }
 
   .wm {
@@ -37,6 +49,10 @@
     margin-top: 1px;
   }
 
+  article p {
+    line-height: 40px;
+  }
+
   .item-link {
     white-space: nowrap;
     overflow: hidden;
@@ -83,18 +99,147 @@
     content: "/";
   }
 
-  .site-name:hover {
-    background-color: transparent;
-    text-decoration: none;
-    color: #fff;
-    background-color: #7e4fa0;
+  .music-card img {
+    border: none !important;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --music-bg-hover-dark: #525252; /* neutral-600 */
+      --music-bg-dark: rgba(82, 82, 82, 0.5); /* neutral-600/50 */
+      --music-text-secondary: #a3a3a3;
+    }
+  }
+
+  /* THIS SHIT MADE FROM LLM */
+
+  /* --- 主容器 --- */
+  /* flex flex-col gap-2 */
+  .music-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  /* --- 信息区域 (左侧) --- */
+  /* flex gap-5 items-center */
+  .music-info {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+  }
+
+  /* 封面图 */
+  /* w-15 h-15 rounded-lg shadow-lg m-0! */
+  .music-cover {
+    width: 3.75rem; /* 15 * 0.25rem */
+    height: 3.75rem;
+    border-radius: 0.5rem;
+    box-shadow: var(--music-shadow);
+    margin: 0 !important;
+    object-fit: cover;
+  }
+
+  /* 文本信息 */
+  .music-title {
+    margin: 0;
+    font-size: 1rem; /* text-size-base */
+    font-weight: bold;
+    line-height: 1.2;
+  }
+
+  .music-artist {
+    margin: 0;
+    font-size: 0.875rem; /* text-size-sm */
+    color: var(--music-text-secondary);
+  }
+
+  /* --- 链接区域 (右侧) --- */
+  /* flex gap-2 items-center */
+  .music-links {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* 链接按钮 */
+  /* block rounded-full px-3 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center bg... */
+  .music-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0 0.75rem; /* px-3 */
+    height: 2rem;
+    border-radius: 9999px; /* rounded-full */
+    text-decoration: none !important;
+    font-size: 0.75rem; /* text-size-xs */
+    transition: background-color 0.3s ease;
+
+    /* 浅色模式背景 */
+    background-color: var(--music-bg-light);
+    color: inherit;
+  }
+
+  .music-btn:hover {
+    background-color: var(--music-bg-hover-light);
   }
 
-  .site-name {
-    transition: 0.3s;
-    width: 66px;
-    border-radius: 5px;
-    text-transform: uppercase;
+  /* 图标 */
+  /* w-3 h-3 m-0! */
+  .music-icon {
+    display: block;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin: 0 !important;
+  }
+
+  /* 按钮文字 */
+  .music-btn-text {
+    display: inline;
+  }
+
+  /* --- 深色模式覆盖 --- */
+  @media (prefers-color-scheme: dark) {
+    .music-btn {
+      background-color: var(--music-bg-dark);
+    }
+    .music-btn:hover {
+      background-color: var(--music-bg-hover-dark);
+    }
+  }
+
+  /* --- 桌面端/大屏适配 (Media Query: md / min-width: 768px) --- */
+  @media (min-width: 768px) {
+    /* 容器变为横向排列，两端对齐 */
+    /* md:flex-row md:justify-between md:items-center */
+    .music-card {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    /* 按钮在大屏下变为方形图标按钮 */
+    /* md:p-4 */
+    .music-btn {
+      padding: 1rem;
+      justify-content: center;
+      width: auto;
+      height: auto;
+    }
+
+    /* 图标变大 */
+    /* md:w-5 md:h-5 */
+    .music-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    /* 文字在大屏下隐藏 */
+    /* md:hidden */
+    .music-btn-text {
+      display: none;
+    }
   }
 
   @media (prefers-color-scheme: dark) {
@@ -142,7 +287,8 @@
       border: #30363d 1px solid;
     }
 
-    .post-title a {
+    .post-title a,
+    .blog-posts a {
       color: #fff !important;
     }
 
@@ -166,11 +312,7 @@
     }
 
     a {
-      font-weight: 700 !important;
-    }
-
-    a:hover {
-      color: #ddd !important;
+      font-weight: 500 !important;
     }
   }
 
@@ -216,10 +358,6 @@
     font-weight: 600;
   }
 
-  a:hover {
-    color: #3273dc;
-  }
-
   .posts-list li {
     margin-bottom: 12px;
   }