Update linktech.md

docs/blog/Mkdocs/linktech.md

@@ -6,32 +6,32 @@ hide:
   - feedback
 ---
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css">
-
 复制后在需要添加友链的.md 文件页面粘贴即可
 
-```html hl_lines="75-110"
+```html hl_lines="82-126"
 <div class="post-body">
 <div id="links">
 <style>
+/* 友链容器样式 */
+.link-navigation {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1rem;
+    max-width: 100%;
+}
 /* 通用卡片样式 */
 .card {
-        width: 320px;
+    width: 100%;
+    max-width: 320px;
     height: 90px;
     font-size: 1rem;
     padding: 10px 20px;
     border-radius: 25px;
     transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
-        margin-bottom: 1rem;
     display: flex;
     align-items: center;
     color: #333;
-      }
+    justify-self: center;
-      .card:nth-child(odd) {
-        float: left;
-      }
-      .card:nth-child(even) {
-        float: right;
 }
 .card:hover {
     transform: translateY(0px) scale(1.05);
@@ -73,10 +73,15 @@ hide:
 }
 /* 小屏优化 */
 @media (max-width: 768px) {
+    .link-navigation {
+        grid-template-columns: 1fr;
+        gap: 0.8rem;
+    }
     .card {
         width: 100%;
+        max-width: 100%;
         height: auto;
-          float: none;
+        min-height: 80px;
     }
     .card:hover {
         background-color: rgba(68, 138, 255, 0.1);
@@ -85,6 +90,15 @@ hide:
 </style>
 <div class="links-content">
 <div class="link-navigation">
+    <div class="card">
+        <img class="ava" src="https://avatars.githubusercontent.com/jaywhj" />
+        <div class="card-header">
+            <div>
+                <a href="https://jaywhj.netlify.app/" target="_blank">极简主义</a>
+            </div>
+            <div class="info">文档即产品</div>
+        </div>
+    </div>
     <div class="card">
         <img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
         <div class="card-header">
@@ -122,13 +136,13 @@ hide:
         </div>
     </div>
 
-
 </div>
 </div>
 </div>
 </div>
 ```
 
+
 ## 如何加入友链
 
 ```html
@@ -166,24 +180,26 @@ hide:
 <div class="post-body">
 <div id="links">
 <style>
+/* 友链容器样式 */
+.link-navigation {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1rem;
+    max-width: 100%;
+}
 /* 通用卡片样式 */
 .card {
-        width: 320px;
+    width: 100%;
+    max-width: 320px;
     height: 90px;
     font-size: 1rem;
     padding: 10px 20px;
     border-radius: 25px;
     transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
-        margin-bottom: 1rem;
     display: flex;
     align-items: center;
     color: #333;
-      }
+    justify-self: center;
-      .card:nth-child(odd) {
-        float: left;
-      }
-      .card:nth-child(even) {
-        float: right;
 }
 .card:hover {
     transform: translateY(0px) scale(1.05);
@@ -225,10 +241,15 @@ hide:
 }
 /* 小屏优化 */
 @media (max-width: 768px) {
+    .link-navigation {
+        grid-template-columns: 1fr;
+        gap: 0.8rem;
+    }
     .card {
         width: 100%;
+        max-width: 100%;
         height: auto;
-          float: none;
+        min-height: 80px;
     }
     .card:hover {
         background-color: rgba(68, 138, 255, 0.1);
@@ -237,6 +258,15 @@ hide:
 </style>
 <div class="links-content">
 <div class="link-navigation">
+    <div class="card">
+        <img class="ava" src="https://avatars.githubusercontent.com/jaywhj" />
+        <div class="card-header">
+            <div>
+                <a href="https://jaywhj.netlify.app/" target="_blank">极简主义</a>
+            </div>
+            <div class="info">文档即产品</div>
+        </div>
+    </div>
     <div class="card">
         <img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
         <div class="card-header">
@@ -255,6 +285,15 @@ hide:
         <div class="info">社交分享平台</div>
         </div>
     </div>
+    <div class="card">
+        <img class="ava" src="https://i.stardots.io/wcowin/1750220860750.jpg" />
+        <div class="card-header">
+        <div>
+            <a href="https://macapp.org.cn" target="_blank">Macapp</a>
+        </div>
+        <div class="info">一个专注于分享Mac资源的频道</div>
+        </div>
+    </div>
     <div class="card">
         <img class="ava" src="https://i.stardots.io/wcowin/1750221795613.jpeg" />
         <div class="card-header">
@@ -265,7 +304,6 @@ hide:
         </div>
     </div>
 
-
 </div>
 </div>
 </div>