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
@@ -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