style(related): two-up on desktop, one-up on phones
Deploy / build (push) Successful in 33s

Six photo cards in 2 columns (3 rows) at desktop widths; phones collapse to a
single full-width column and still show only the first four. Drops the 900px
two-column step (now the base) and the cramped-card type overrides that only
existed for the 2-up phone grid.
This commit is contained in:
hoelee committed 2026-10-20 23:16:17 +08:00
1 parent 7f2680ea92
commit 84b412470b
3 files changed
+5 -17

No files matched your search

+3 -15
View File
@@ -426,7 +426,7 @@ pre code {
.related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1rem;
}
@@ -521,12 +521,6 @@ pre code {
margin: 1rem 0 2.5rem;
}
@media (max-width: 900px) {
/* Three photo cards per row stops working below ~900px — the OG art is
1200x630 with baked-in type, so it needs width to stay readable. */
.related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.featured-bento-grid {
grid-template-columns: 1fr;
@@ -915,15 +909,9 @@ a.category-card:hover { border-color: var(--brand); }
.nav { padding: 0.8rem 1.25rem; gap: 0.85rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
/* Related grid: four photo cards on phones (the last two are hidden), and
keep the type small enough that a 160px-wide card still reads. */
.related-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
/* Related grid: one full-width card per row on phones, first four only. */
.related-grid { grid-template-columns: 1fr; gap: 0.85rem; }
.related-extra { display: none; }
.related-card h3 { font-size: 0.82rem; }
.related-card time { font-size: 0.7rem; }
.related-read { display: none; } /* date alone fits a 160px card */
.related-body { padding: 0.6rem 0.65rem; }
.related-badge { font-size: 0.6rem; margin-bottom: 0.35rem; }
.featured-bento-grid { grid-template-columns: 1fr; }
.proof-grid { grid-template-columns: repeat(2, 1fr); }
.stack-grid, .contact-split { grid-template-columns: 1fr; }