调整外部链接样式

Author: CatCodeMe

src/assets/styles/card-layout.module.css

@@ -1,21 +1,38 @@
 .external-link {
-  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 0.2em;
   text-decoration: none;
-  border-bottom: 1px solid rgba(120, 120, 120, 0.4); /* 默认很淡很细 */
-  transition:
-    border-bottom-color 0.3s cubic-bezier(0.4,0,0.2,1),
-    border-bottom-width 0.3s cubic-bezier(0.4,0,0.2,1);
+  color: hsl(var(--primary)) !important;
+  padding: 0.1rem 0.2rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+  border-bottom: 2px solid transparent;
+  background-color: transparent;
+  border-bottom-color: hsla(200, 29%, 45%, 0.3);
+  margin: 0.1em;
 }
 
 .external-link:hover {
-  border-bottom-color: rgba(120, 120, 120, 1); /* hover更明显 */
-  border-bottom-width: 1px;
+  border-bottom-color: hsl(var(--primary));
+  background-color: hsla(200, 29%, 45%, 0.1);
 }
 
 .external-link-icon {
   display: inline-block;
   vertical-align: text-bottom;
+  transition: transform 0.2s ease-in-out;
 }
+
+.external-link:hover .external-link-icon {
+  transform: scale(1.1);
+}
+
+html.dark {
+  .external-link {
+    border-bottom-color: hsl(var(--primary));
+  }
+  .external-link:hover {
+    background-color: hsla(195, 95%, 85%, 0.1);
+  }
+}

src/assets/styles/external-link.css

@@ -161,22 +161,42 @@ public class HelloWorld {
 //['important', 'info', 'note', 'tip', 'warning', 'caution']
 
 <Aside type='important' icons='important' title='自定义信息'>
-  1
+1. (Burton Howard Bloom）遇到了一个具体问题。他需要设计一个系统来高效地查询一个元素是否存在于一个庞大的集合中，而这个集合因为太大而无法完全放入内存，只能存储在磁盘上
+2. 他敏锐地观察到一个关键现象：在许多应用场景中，`绝大多数的查询都是针对那些根本不存在于集合中的元素` 。例如，在一个拼写检查系统中，绝大多数输入的单词都是正确的，因此查询“这个词是否在错误单词词典里？”的结果大多是“否”
+3. 传统做法是，每一次查询，无论元素是否存在，都必须启动一次昂贵的磁盘I/O来确认。这意味着系统将大量的时间和资源浪费在那些最终结果为“未找到”的无效查询上
+4. <Aside type="info" icon="💡" title="我是标题" open="true">这是一个带有灯泡图标的信息框。</Aside>
+
 </Aside>
 <Aside type='info' icons='info' title='自定义信息'>
 2
 </Aside>
 <Aside type='note' icons='note' title='自定义信息'>
-3
+1. (Burton Howard Bloom）遇到了一个具体问题。他需要设计一个系统来高效地查询一个元素是否存在于一个庞大的集合中，而这个集合因为太大而无法完全放入内存，只能存储在磁盘上
+2. 他敏锐地观察到一个关键现象：在许多应用场景中，`绝大多数的查询都是针对那些根本不存在于集合中的元素` 。例如，在一个拼写检查系统中，绝大多数输入的单词都是正确的，因此查询“这个词是否在错误单词词典里？”的结果大多是“否”
+3. 传统做法是，每一次查询，无论元素是否存在，都必须启动一次昂贵的磁盘I/O来确认。这意味着系统将大量的时间和资源浪费在那些最终结果为“未找到”的无效查询上
+4. <Aside type="info" icon="💡" title="我是标题" open="true">这是一个带有灯泡图标的信息框。</Aside>
+
 </Aside>
 <Aside type='tip' icons='tip' title='自定义信息'>
-4
+1. (Burton Howard Bloom）遇到了一个具体问题。他需要设计一个系统来高效地查询一个元素是否存在于一个庞大的集合中，而这个集合因为太大而无法完全放入内存，只能存储在磁盘上
+2. 他敏锐地观察到一个关键现象：在许多应用场景中，`绝大多数的查询都是针对那些根本不存在于集合中的元素` 。例如，在一个拼写检查系统中，绝大多数输入的单词都是正确的，因此查询“这个词是否在错误单词词典里？”的结果大多是“否”
+3. 传统做法是，每一次查询，无论元素是否存在，都必须启动一次昂贵的磁盘I/O来确认。这意味着系统将大量的时间和资源浪费在那些最终结果为“未找到”的无效查询上
+4. <Aside type="info" icon="💡" title="我是标题" open="true">这是一个带有灯泡图标的信息框。</Aside>
+
 </Aside>
 <Aside type='warning' icons='warning' title='自定义信息'>
-5
+1. (Burton Howard Bloom）遇到了一个具体问题。他需要设计一个系统来高效地查询一个元素是否存在于一个庞大的集合中，而这个集合因为太大而无法完全放入内存，只能存储在磁盘上
+2. 他敏锐地观察到一个关键现象：在许多应用场景中，`绝大多数的查询都是针对那些根本不存在于集合中的元素` 。例如，在一个拼写检查系统中，绝大多数输入的单词都是正确的，因此查询“这个词是否在错误单词词典里？”的结果大多是“否”
+3. 传统做法是，每一次查询，无论元素是否存在，都必须启动一次昂贵的磁盘I/O来确认。这意味着系统将大量的时间和资源浪费在那些最终结果为“未找到”的无效查询上
+4. <Aside type="info" icon="💡" title="我是标题" open="true">这是一个带有灯泡图标的信息框。</Aside>
+
 </Aside>
 <Aside type='caution' icons='caution' title='自定义信息'>
-6
+1. (Burton Howard Bloom）遇到了一个具体问题。他需要设计一个系统来高效地查询一个元素是否存在于一个庞大的集合中，而这个集合因为太大而无法完全放入内存，只能存储在磁盘上
+2. 他敏锐地观察到一个关键现象：在许多应用场景中，`绝大多数的查询都是针对那些根本不存在于集合中的元素` 。例如，在一个拼写检查系统中，绝大多数输入的单词都是正确的，因此查询“这个词是否在错误单词词典里？”的结果大多是“否”
+3. 传统做法是，每一次查询，无论元素是否存在，都必须启动一次昂贵的磁盘I/O来确认。这意味着系统将大量的时间和资源浪费在那些最终结果为“未找到”的无效查询上
+4. <Aside type="info" icon="💡" title="我是标题" open="true">这是一个带有灯泡图标的信息框。</Aside>
+
 </Aside>
 
 ```ts