Compact package links on landing page

This commit is contained in:
2026-07-09 20:36:57 +09:00
parent a95afe0463
commit 44b6041e60
2 changed files with 37 additions and 47 deletions
+9 -27
View File
@@ -27,36 +27,18 @@ Production = Server & {
<section class="home-packages" aria-label="Official packages"> <section class="home-packages" aria-label="Official packages">
<h2>Official packages</h2> <h2>Official packages</h2>
<div class="package-links"> <a class="primary-package" href="https://crates.io/crates/decodal">
<a href="https://crates.io/crates/decodal">
<span>Rust crate</span> <span>Rust crate</span>
<strong>crates.io/crates/decodal</strong> <strong>crates.io/crates/decodal</strong>
</a> </a>
<a href="https://www.npmjs.com/package/decodal-wasm"> <ul class="package-list">
<span>npm package</span> <li><a href="https://www.npmjs.com/package/decodal-wasm">decodal-wasm on npm</a></li>
<strong>npmjs.com/package/decodal-wasm</strong> <li><a href="https://jsr.io/@hare/decodal-wasm@0.1.2">@hare/decodal-wasm on JSR</a></li>
</a> <li><a href="https://www.npmjs.com/package/decodal-language-tools">decodal-language-tools on npm</a></li>
<a href="https://jsr.io/@hare/decodal-wasm@0.1.2"> <li><a href="https://jsr.io/@hare/decodal-language-tools@0.1.2">@hare/decodal-language-tools on JSR</a></li>
<span>JSR package</span> <li><a href="https://www.npmjs.com/package/decodal-codemirror">decodal-codemirror on npm</a></li>
<strong>jsr.io/@hare/decodal-wasm</strong> <li><a href="https://jsr.io/@hare/decodal-codemirror@0.1.3">@hare/decodal-codemirror on JSR</a></li>
</a> </ul>
<a href="https://www.npmjs.com/package/decodal-language-tools">
<span>Language tools package</span>
<strong>npmjs.com/package/decodal-language-tools</strong>
</a>
<a href="https://jsr.io/@hare/decodal-language-tools@0.1.2">
<span>Language tools on JSR</span>
<strong>jsr.io/@hare/decodal-language-tools</strong>
</a>
<a href="https://www.npmjs.com/package/decodal-codemirror">
<span>CodeMirror package</span>
<strong>npmjs.com/package/decodal-codemirror</strong>
</a>
<a href="https://jsr.io/@hare/decodal-codemirror@0.1.3">
<span>CodeMirror on JSR</span>
<strong>jsr.io/@hare/decodal-codemirror</strong>
</a>
</div>
</section> </section>
<section class="home-grid" aria-label="Decodal overview"> <section class="home-grid" aria-label="Decodal overview">
+25 -17
View File
@@ -542,41 +542,47 @@ button:disabled {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 1.4rem; padding: 1.2rem 1.4rem;
} }
.home-packages h2 { .home-packages h2 {
margin-top: 0; margin: 0 0 0.9rem;
} }
.package-links { .primary-package {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.package-links a {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
display: block; display: inline-block;
padding: 1rem; margin-bottom: 0.9rem;
padding: 0.9rem 1rem;
text-decoration: none; text-decoration: none;
} }
.package-links span { .primary-package span {
color: var(--muted); color: var(--muted);
display: block; display: block;
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.3rem; margin-bottom: 0.25rem;
} }
.package-links strong { .primary-package strong {
color: var(--text); color: var(--text);
display: block; display: block;
font-size: 0.95rem; font-size: 1.15rem;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.package-list {
columns: 2;
margin: 0;
padding-left: 1.2rem;
}
.package-list li {
break-inside: avoid;
margin: 0.25rem 0;
}
.home-grid { .home-grid {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
@@ -623,10 +629,12 @@ button:disabled {
} }
.playground-shell, .playground-shell,
.home-grid, .home-grid,
.home-example, .home-example {
.package-links {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.package-list {
columns: 1;
}
.hero { .hero {
padding-top: 3rem; padding-top: 3rem;
} }