refactor(css): 硬编码颜色改为CSS变量，内联样式抽取为复用class

WangSimiao2000 · WangSimiao2000 · commit adf6538f9979 · 2026-03-12T11:09:31.000+08:00
- _placeholders.scss: #B07D62 → var(--link-color), #6d6c6c → var(--text-muted-color)
- _categories.scss: #6c757d → var(--text-muted-color)
- 新增 _card-grid.scss: friends/tools 页面共享的卡片样式
- friends.md/tools.md: 18处内联style替换为CSS class
diff --git a/_sass/abstracts/_placeholders.scss b/_sass/abstracts/_placeholders.scss
@@ -45,8 +45,8 @@
 }
 
 %link-hover {
-  color: #B07D62 !important;
-  border-bottom: 1px solid #B07D62;
+  color: var(--link-color) !important;
+  border-bottom: 1px solid var(--link-color);
   text-decoration: none;
 }
 
@@ -92,7 +92,7 @@
     font-style: normal;
     font-size: 80%;
     padding: 0;
-    color: #6d6c6c;
+    color: var(--text-muted-color);
   }
 }
 
diff --git a/_sass/pages/_card-grid.scss b/_sass/pages/_card-grid.scss
@@ -0,0 +1,47 @@
+/* Shared card grid styles for friends, tools and similar listing pages */
+
+.card-grid {
+  // Clickable card
+  .card-clickable {
+    cursor: pointer;
+  }
+
+  // Dead/inactive card (grayscale + dimmed)
+  .card-dead {
+    cursor: pointer;
+    filter: grayscale(100%);
+  }
+
+  // Card body inner positioning
+  .card-body-inner {
+    position: relative;
+    z-index: 1;
+  }
+
+  // Card title text
+  .card-title-text {
+    color: var(--heading-color);
+  }
+
+  // Two-line text clamp
+  .text-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  // Avatar image
+  .avatar-cover {
+    object-fit: cover;
+  }
+
+  // Dimmed section (e.g. dead links)
+  &--dimmed {
+    opacity: 0.6;
+  }
+}
+
+.section-subtitle {
+  font-size: 1.1rem;
+}
diff --git a/_sass/pages/_categories.scss b/_sass/pages/_categories.scss
@@ -54,7 +54,7 @@
   height: 1.7rem;
   border-radius: 50%;
   text-align: center;
-  color: #6c757d !important;
+  color: var(--text-muted-color) !important;
 
   i {
     position: relative;
diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss
@@ -5,3 +5,4 @@
 @forward 'tags';
 @forward 'archives';
 @forward 'category-tag';
+@forward 'card-grid';
diff --git a/_tabs/friends.md b/_tabs/friends.md
@@ -13,21 +13,21 @@ comments: true
   {% assign alive_list = site.data.friends %}
 {% endunless %}
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
+<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 card-grid">
   {% for friend in alive_list %}
     {% if friend.name and friend.url %}
       <div class="col">
-        <div class="card h-100 post-preview" style="cursor:pointer;" onclick="window.open('{{ friend.url }}','_blank')">
-          <div class="card-body d-flex align-items-center" style="position:relative;z-index:1;">
+        <div class="card h-100 post-preview card-clickable" onclick="window.open('{{ friend.url }}','_blank')">
+          <div class="card-body d-flex align-items-center card-body-inner">
             {% if friend.icon and friend.icon != "" %}
-              <img src="{{ friend.icon }}" alt="{{ friend.name }}" class="rounded-circle me-3 flex-shrink-0" width="48" height="48" style="object-fit:cover;" onerror="this.outerHTML='<i class=\'fas fa-globe fa-2x me-3 text-muted\'></i>';" />
+              <img src="{{ friend.icon }}" alt="{{ friend.name }}" class="rounded-circle me-3 flex-shrink-0 avatar-cover" width="48" height="48" onerror="this.outerHTML='<i class=\'fas fa-globe fa-2x me-3 text-muted\'></i>';" />
             {% else %}
               <i class="fas fa-globe fa-2x me-3 text-muted"></i>
             {% endif %}
             <div>
-              <span class="fw-bold" style="color:var(--heading-color);">{{ friend.name }}</span>
+              <span class="fw-bold card-title-text">{{ friend.name }}</span>
               {% if friend.description %}
-                <div class="text-muted small mt-1" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ friend.description }}</div>
+                <div class="text-muted small mt-1 text-clamp-2">{{ friend.description }}</div>
               {% endif %}
             </div>
           </div>
@@ -40,22 +40,22 @@ comments: true
 {% if dead_list and dead_list.size > 0 %}
 <hr class="mt-5 mb-3">
 
-<h3 class="text-muted mb-4" style="font-size:1.1rem;">
+<h3 class="text-muted mb-4 section-subtitle">
   <i class="fas fa-cross me-2"></i>数字墓园
   <span class="text-muted small ms-2">— 那些沉睡的站点</span>
 </h3>
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4" style="opacity:0.6;">
+<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 card-grid card-grid--dimmed">
   {% for friend in dead_list %}
     {% if friend.name and friend.url %}
       <div class="col">
-        <div class="card h-100 post-preview" style="cursor:pointer;filter:grayscale(100%);" onclick="window.open('{{ friend.url }}','_blank')">
-          <div class="card-body d-flex align-items-center" style="position:relative;z-index:1;">
+        <div class="card h-100 post-preview card-dead" onclick="window.open('{{ friend.url }}','_blank')">
+          <div class="card-body d-flex align-items-center card-body-inner">
             <i class="fas fa-skull fa-2x me-3 text-muted flex-shrink-0"></i>
             <div>
-              <span class="fw-bold" style="color:var(--heading-color);">{{ friend.name }}</span>
+              <span class="fw-bold card-title-text">{{ friend.name }}</span>
               {% if friend.description %}
-                <div class="text-muted small mt-1" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ friend.description }}</div>
+                <div class="text-muted small mt-1 text-clamp-2">{{ friend.description }}</div>
               {% endif %}
             </div>
           </div>
diff --git a/_tabs/tools.md b/_tabs/tools.md
@@ -4,19 +4,19 @@ icon: fas fa-toolbox
 order: 7
 ---
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
+<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 card-grid">
   {% for tool in site.data.tools %}
     {% if tool.name and tool.url %}
       <div class="col">
-        <a href="{{ tool.url }}" class="card h-100 post-preview text-decoration-none card-wrapper">
-          <div class="card-body d-flex align-items-center" style="position:relative;z-index:1;">
+        <a href="{{ tool.url }}" class="card h-100 post-preview text-decoration-none card-wrapper card-clickable">
+          <div class="card-body d-flex align-items-center card-body-inner">
             {% if tool.icon %}
               <i class="{{ tool.icon }} fa-2x me-3 text-muted"></i>
             {% else %}
               <i class="fas fa-puzzle-piece fa-2x me-3 text-muted"></i>
             {% endif %}
             <div>
-              <span class="fw-bold" style="color:var(--heading-color);">{{ tool.name }}</span>
+              <span class="fw-bold card-title-text">{{ tool.name }}</span>
               {% if tool.description %}
                 <div class="text-muted small mt-1">{{ tool.description }}</div>
               {% endif %}

Original file line number	Diff line number	Diff line change
`@@ -45,8 +45,8 @@`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`%link-hover {`
`48`		`- color: #B07D62 !important;`
`49`		`- border-bottom: 1px solid #B07D62;`
	`48`	`+ color: var(--link-color) !important;`
	`49`	`+ border-bottom: 1px solid var(--link-color);`
`50`	`50`	`text-decoration: none;`
`51`	`51`	`}`
`52`	`52`
`@@ -92,7 +92,7 @@`
`92`	`92`	`font-style: normal;`
`93`	`93`	`font-size: 80%;`
`94`	`94`	`padding: 0;`
`95`		`- color: #6d6c6c;`
	`95`	`+ color: var(--text-muted-color);`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`