block/themes-earthen
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): drive responsive layout from theme-owned CSS

Browse Source 
Host Tailwind JIT does not scan theme templates, so responsive grid/hero
utilities (sm:/md:/lg:grid-cols-*, min-h-screen, arbitrary values) are
dropped and multi-column layouts collapse to one column. Ship the
load-bearing responsive layout as compiled theme CSS and point the
override templates at it. Layout only — colours stay on semantic tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-05 17:40:20 +08:00
parent 5f65fd8e4c
commit 7e29730072
1 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
assets/style.css
View File

@ -178,3 +178,91 @@
50% { border-radius: 58% 42% 38% 62% / 56% 58% 42% 44%; }
}
}
/* ── Responsive layout primitives ──────────────────────────────────────────
These are shipped as compiled CSS (not Tailwind utilities) on purpose: the
host Tailwind JIT does not scan a theme's page/layout, override or
master-page templates, so responsive grid utilities that live only in those
files (e.g. sm:grid-cols-3, md:grid-cols-[2fr_1fr]) are silently dropped and
never collapse or expand. Compiling them here guarantees the layout works on
both mobile and desktop. Layout-only — no colour tokens. */
/* Donation CTA — preset amount tiles: 1-up on mobile, 3-up from 640px. */
.earthen-amount-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 640px) {
.earthen-amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Donation CTA — custom amount + submit: stack on mobile, inline from 640px. */
.earthen-amount-row {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
@media (min-width: 640px) {
.earthen-amount-row { flex-direction: row; align-items: center; }
}
/* Field Journal — post cards: 1-up mobile, 2-up >=640px, 3-up >=1024px. */
.earthen-post-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 640px) {
.earthen-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.earthen-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Contact — form + aside: stacked on mobile, 2fr/1fr from 768px. */
.earthen-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 768px) {
.earthen-contact-grid { grid-template-columns: 2fr 1fr; }
}
/* Article — body + byline rail: stacked on mobile, main + 260px rail >=1024px. */
.earthen-article-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1024px) {
.earthen-article-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
/* Hero — comfortable padded band. A text-only (image-less) hero uses padding
only, so it never balloons into a tall empty band. When a background image
IS present the taller band is applied via the --media modifier. */
.earthen-hero {
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.earthen-hero { padding-top: 6rem; padding-bottom: 6rem; }
}
.earthen-hero.earthen-hero--media {
min-height: 60vh;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.earthen-hero.earthen-hero--media { min-height: 72vh; }
}
/* Split hero — the media column needs a floor so its absolutely-positioned
image has height to fill. Only rendered when an image is present. */
.earthen-hero-split-media {
position: relative;
min-height: 320px;
}