design(qipaobuzz): premium broadsheet listing — hero + image-row, hairline dividers, scroll-reveal animations
- Replace bordered .post cards with a flowing newspaper-style listing. - First post becomes a hero (16:7 cover + overlay-style headline). - Subsequent posts are image-left rows with ink-stroke vertical accent. - Hover: title underline-fill + image scale + saturate. - IntersectionObserver scroll-reveal, no library deps. - Mobile: 110px thumb, 3-line excerpt clamp.
This commit is contained in:
claude-code
@@ -1,25 +1,93 @@
|
||||
---
|
||||
import { getVisibleTags } from '../lib/markdown.js';
|
||||
import { getVisibleTags, renderMarkdown, extractFirstImage } from '../lib/markdown.js';
|
||||
const { posts, tag } = Astro.props;
|
||||
const visible = getVisibleTags();
|
||||
---
|
||||
{tag && <h2 style="margin-bottom: 20px;">Tagged: {tag}</h2>}
|
||||
|
||||
{posts.map((post) => (
|
||||
<article class="post">
|
||||
<h2 class="post-title">
|
||||
<a href={`/${post.slug}/`}>{post.title}</a>
|
||||
// Pre-compute first cover image per post (from rendered body) so the listing
|
||||
// can show a real photo on the left without re-parsing inside the template.
|
||||
const enriched = posts.map((p) => ({
|
||||
...p,
|
||||
cover: extractFirstImage(renderMarkdown(p.body)),
|
||||
}));
|
||||
|
||||
const hero = enriched[0];
|
||||
const rest = enriched.slice(1);
|
||||
|
||||
const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
||||
{ year: 'numeric', month: 'long', day: 'numeric' });
|
||||
---
|
||||
{tag && (
|
||||
<h2 class="tag-banner">
|
||||
<span class="tag-banner-mark">栏目</span>
|
||||
Tagged: <em>{tag}</em>
|
||||
</h2>
|
||||
<div class="post-meta">
|
||||
{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
{post.tags.filter((t) => visible.has(t)).map((t) => (
|
||||
<span class="tag"><a href={`/tag/${t}/`}>{t}</a></span>
|
||||
)}
|
||||
|
||||
{enriched.length > 0 && !tag && (
|
||||
<article class="post-hero" data-reveal>
|
||||
<a class="post-hero-link" href={`/${hero.slug}/`}>
|
||||
{hero.cover && (
|
||||
<div class="post-hero-img">
|
||||
<img src={hero.cover} alt="" loading="eager" />
|
||||
</div>
|
||||
)}
|
||||
<div class="post-hero-body">
|
||||
<div class="post-hero-flag">头条 · TOP STORY</div>
|
||||
<h2 class="post-hero-title">{hero.title}</h2>
|
||||
<p class="post-hero-excerpt">{hero.rawExcerpt}</p>
|
||||
<div class="post-hero-meta">
|
||||
<span>{fmt(hero.date)}</span>
|
||||
{hero.tags.filter((t) => visible.has(t)).slice(0, 4).map((t) => (
|
||||
<span class="post-hero-tag">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
<p class="post-excerpt">{post.rawExcerpt}</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{(tag ? enriched : rest).map((post, i) => (
|
||||
<article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 60, 600)}ms`}>
|
||||
<a class="post-row-link" href={`/${post.slug}/`}>
|
||||
{post.cover && (
|
||||
<div class="post-row-img">
|
||||
<img src={post.cover} alt="" loading="lazy" />
|
||||
</div>
|
||||
)}
|
||||
<div class="post-row-body">
|
||||
<h3 class="post-row-title">{post.title}</h3>
|
||||
<p class="post-row-excerpt">{post.rawExcerpt}</p>
|
||||
<div class="post-row-meta">
|
||||
<time>{fmt(post.date)}</time>
|
||||
{post.tags.filter((t) => visible.has(t)).slice(0, 3).map((t) => (
|
||||
<span class="post-row-tag">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
|
||||
{posts.length === 0 && (
|
||||
<p style="color: #999; text-align: center; padding: 50px 0;">No posts yet.</p>
|
||||
{enriched.length === 0 && (
|
||||
<p class="post-empty">尚无文章 · No posts yet.</p>
|
||||
)}
|
||||
|
||||
<script is:inline>
|
||||
// Subtle scroll-reveal: fade + lift each post-row when it enters viewport.
|
||||
(() => {
|
||||
const els = document.querySelectorAll('[data-reveal]');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
els.forEach((e) => e.classList.add('is-visible'));
|
||||
return;
|
||||
}
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
for (const e of entries) {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('is-visible');
|
||||
obs.unobserve(e.target);
|
||||
}
|
||||
}
|
||||
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
|
||||
els.forEach((e) => obs.observe(e));
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -235,27 +235,219 @@ const ads = site.ads;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.post {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--red);
|
||||
padding: 22px 26px;
|
||||
margin-bottom: 18px;
|
||||
/* ========== LISTING — premium Chinese broadsheet style ==========
|
||||
No card boxes; hairline dividers, hover ink-fade, subtle reveal. */
|
||||
|
||||
.tag-banner {
|
||||
font-family: var(--display);
|
||||
font-size: 1.6rem;
|
||||
color: var(--red);
|
||||
letter-spacing: 4px;
|
||||
border-bottom: 2px double var(--red);
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.tag-banner em { font-style: italic; color: var(--ink); margin-left: 4px; }
|
||||
.tag-banner-mark {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
background: var(--red);
|
||||
color: var(--paper);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 4px;
|
||||
vertical-align: middle;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* HERO post (top story) — wide image with text below in newspaper style */
|
||||
.post-hero {
|
||||
margin: 6px 0 30px;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
.post-hero.is-visible { opacity: 1; transform: translateY(0); }
|
||||
.post-hero-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.post-hero-img {
|
||||
position: relative;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16 / 7;
|
||||
border: 1px solid var(--gold);
|
||||
box-shadow: 0 4px 18px rgba(31,20,16,0.10);
|
||||
margin-bottom: 14px;
|
||||
background: var(--rice-2);
|
||||
}
|
||||
.post:hover {
|
||||
box-shadow: 0 6px 20px rgba(139, 13, 34, 0.12);
|
||||
transform: translateY(-1px);
|
||||
.post-hero-img img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s ease, filter 0.6s ease;
|
||||
display: block;
|
||||
}
|
||||
.post::before {
|
||||
content: "闻";
|
||||
position: absolute;
|
||||
top: 8px; right: 12px;
|
||||
color: var(--gold);
|
||||
.post-hero-link:hover .post-hero-img img {
|
||||
transform: scale(1.025);
|
||||
filter: saturate(1.05);
|
||||
}
|
||||
.post-hero-flag {
|
||||
display: inline-block;
|
||||
font-family: var(--brand-cn);
|
||||
font-size: 0.95rem;
|
||||
color: var(--paper);
|
||||
background: var(--red);
|
||||
padding: 2px 12px;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.post-hero-title {
|
||||
font-family: var(--display);
|
||||
font-size: 2.1rem;
|
||||
line-height: 1.25;
|
||||
margin: 4px 0 8px;
|
||||
color: var(--ink);
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
.post-hero-link:hover .post-hero-title { color: var(--red); }
|
||||
.post-hero-excerpt {
|
||||
color: var(--ink-soft);
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 8px;
|
||||
max-width: 68ch;
|
||||
}
|
||||
.post-hero-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1px;
|
||||
display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
|
||||
}
|
||||
.post-hero-tag {
|
||||
font-size: 0.72rem;
|
||||
color: var(--red);
|
||||
border: 1px solid var(--red);
|
||||
padding: 0 8px;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Decorative section divider before the post list */
|
||||
.post-row + .post-row::before,
|
||||
.post-hero + .post-row::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||||
margin: 0 auto 22px;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* List rows — image left + flowing text right, no card box */
|
||||
.post-row {
|
||||
margin-bottom: 22px;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: opacity 0.55s ease-out, transform 0.55s ease-out;
|
||||
}
|
||||
.post-row.is-visible { opacity: 1; transform: translateY(0); }
|
||||
.post-row-link {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 22px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
}
|
||||
.post-row-img {
|
||||
width: 180px;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 1px 6px rgba(31,20,16,0.06);
|
||||
background: var(--rice-2);
|
||||
position: relative;
|
||||
}
|
||||
.post-row-img::after {
|
||||
/* faint vertical ink-stroke — Chinese print feel */
|
||||
content: "";
|
||||
position: absolute; right: -2px; top: 8%; bottom: 8%;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, transparent, var(--red), transparent);
|
||||
opacity: 0.35;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.post-row-img img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.5s ease, filter 0.5s ease;
|
||||
}
|
||||
.post-row-link:hover .post-row-img img {
|
||||
transform: scale(1.04);
|
||||
filter: saturate(1.05);
|
||||
}
|
||||
.post-row-body { min-width: 0; }
|
||||
.post-row-title {
|
||||
font-family: var(--display);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.35;
|
||||
color: var(--ink);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.25s ease;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
background-image: linear-gradient(var(--red), var(--red));
|
||||
background-size: 0% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%;
|
||||
transition: background-size 0.4s ease, color 0.25s ease;
|
||||
}
|
||||
.post-row-link:hover .post-row-title {
|
||||
color: var(--red);
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
.post-row-excerpt {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-row-meta {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1px;
|
||||
display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
|
||||
}
|
||||
.post-row-meta time { font-style: italic; }
|
||||
.post-row-tag {
|
||||
font-size: 0.7rem;
|
||||
color: var(--red);
|
||||
letter-spacing: 1.5px;
|
||||
padding: 0 6px;
|
||||
border-left: 2px solid var(--red);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/* Rows without an image — keep flowing text indent for rhythm */
|
||||
.post-row-link:not(:has(.post-row-img)) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.post-empty {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
padding: 60px 0;
|
||||
font-style: italic;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* ========== SINGLE-POST PAGE (legacy .post / .post-meta still used) ==========
|
||||
Kept for the article page (slug.astro) — minimal wrappers. */
|
||||
.post-title {
|
||||
font-family: var(--display);
|
||||
font-size: 1.6rem;
|
||||
@@ -461,11 +653,22 @@ const ads = site.ads;
|
||||
@media (max-width: 600px) {
|
||||
body { padding: 12px 8px 30px; }
|
||||
main { padding: 16px 14px; }
|
||||
.post { padding: 16px 18px; }
|
||||
.post-content { padding: 20px 18px; }
|
||||
.brand-name { font-size: 2.1rem; }
|
||||
.related-posts-grid { grid-template-columns: 1fr; }
|
||||
nav.qp-nav a { margin: 2px 4px; padding: 3px 10px; font-size: 0.85rem; }
|
||||
.post-hero-title { font-size: 1.55rem; }
|
||||
.post-hero-excerpt { font-size: 0.96rem; }
|
||||
.post-row-link {
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
.post-row-img { width: 110px; }
|
||||
.post-row-title { font-size: 1.1rem; }
|
||||
.post-row-excerpt {
|
||||
font-size: 0.88rem;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user