Turn docs home plugin list into horizontal banner

Author: 54895y

docs/intro.md

@@ -26,8 +26,11 @@ title: 插件 Wiki
 
 ## 插件面板
 
-<div class="matrix-plugin-grid">
-  <article class="matrix-plugin-card">
+<div class="matrix-banner-note">左右滑动可查看全部插件入口。</div>
+
+<div class="matrix-plugin-banner">
+  <div class="matrix-plugin-strip">
+    <article class="matrix-plugin-card matrix-plugin-card-banner">
     <div class="matrix-plugin-topline">
       <span class="matrix-plugin-name">MatrixLib</span>
       <span class="matrix-plugin-badge">v1.5.0</span>
@@ -44,9 +47,9 @@ title: 插件 Wiki
       <a class="matrix-plugin-action" href="/docs/matrixlib/developer-api">API</a>
       <a class="matrix-plugin-action" href="/docs/matrixlib/bstats-and-telemetry">bStats</a>
     </div>
-  </article>
+    </article>
 
-  <article class="matrix-plugin-card">
+    <article class="matrix-plugin-card matrix-plugin-card-banner">
     <div class="matrix-plugin-topline">
       <span class="matrix-plugin-name">MatrixAuth</span>
       <span class="matrix-plugin-badge">v1.1.0</span>
@@ -63,9 +66,9 @@ title: 插件 Wiki
       <a class="matrix-plugin-action" href="/docs/matrixauth/developer-api">API</a>
       <a class="matrix-plugin-action" href="/docs/matrixauth/bstats-and-telemetry">bStats</a>
     </div>
-  </article>
+    </article>
 
-  <article class="matrix-plugin-card">
+    <article class="matrix-plugin-card matrix-plugin-card-banner">
     <div class="matrix-plugin-topline">
       <span class="matrix-plugin-name">MatrixCook</span>
       <span class="matrix-plugin-badge">v1.2.0</span>
@@ -82,9 +85,9 @@ title: 插件 Wiki
       <a class="matrix-plugin-action" href="/docs/matrixcook/developer-api">API</a>
       <a class="matrix-plugin-action" href="/docs/matrixcook/bstats-and-telemetry">bStats</a>
     </div>
-  </article>
+    </article>
 
-  <article class="matrix-plugin-card">
+    <article class="matrix-plugin-card matrix-plugin-card-banner">
     <div class="matrix-plugin-topline">
       <span class="matrix-plugin-name">MatrixShop</span>
       <span class="matrix-plugin-badge">v1.7.0</span>
@@ -101,9 +104,9 @@ title: 插件 Wiki
       <a class="matrix-plugin-action" href="/docs/matrixshop/developer-api">API</a>
       <a class="matrix-plugin-action" href="/docs/matrixshop/bstats-and-telemetry">bStats</a>
     </div>
-  </article>
+    </article>
 
-  <article class="matrix-plugin-card">
+    <article class="matrix-plugin-card matrix-plugin-card-banner">
     <div class="matrix-plugin-topline">
       <span class="matrix-plugin-name">MatrixStorage</span>
       <span class="matrix-plugin-badge">v1.1.0</span>
@@ -120,7 +123,8 @@ title: 插件 Wiki
       <a class="matrix-plugin-action" href="/docs/matrixstorage/developer-api">API</a>
       <a class="matrix-plugin-action" href="/docs/matrixstorage/bstats-and-telemetry">bStats</a>
     </div>
-  </article>
+    </article>
+  </div>
 </div>
 
 ## 当前插件覆盖

src/css/custom.css

@@ -311,6 +311,38 @@ html[data-theme='dark'] .matrix-quick-link {
   margin: 1.25rem 0 2rem;
 }
 
+.matrix-banner-note {
+  margin: 0 0 0.75rem;
+  color: var(--site-text-muted);
+  font-size: 0.92rem;
+}
+
+.matrix-plugin-banner {
+  position: relative;
+  margin: 1.25rem 0 2rem;
+  padding: 0.35rem 0 0.8rem;
+  overflow-x: auto;
+  overflow-y: visible;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+}
+
+.matrix-plugin-banner::-webkit-scrollbar {
+  height: 10px;
+}
+
+.matrix-plugin-banner::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(33, 121, 255, 0.22);
+}
+
+.matrix-plugin-strip {
+  display: flex;
+  gap: 1rem;
+  min-width: max-content;
+  padding-right: 1rem;
+}
+
 .matrix-plugin-card {
   display: flex;
   flex-direction: column;
@@ -323,6 +355,11 @@ html[data-theme='dark'] .matrix-quick-link {
   box-shadow: 0 18px 38px rgba(22, 64, 136, 0.08);
 }
 
+.matrix-plugin-card-banner {
+  width: min(340px, 82vw);
+  scroll-snap-align: start;
+}
+
 html[data-theme='dark'] .matrix-plugin-card {
   background: rgba(20, 31, 47, 0.92);
 }