mirror of
https://github.com/tiennm99/iammiti99.git
synced 2026-10-11 12:18:59 +00:00
tiennm99
e4fafef83b
Closes #11. Move .themes-gallery__* + .variants-gallery__* selectors out of static/css/bonsai.css into static/css/gallery.css. The demo pages /themes/ and /variants/ load the new stylesheet via a head_extra block defined in layouts/_default/baseof.html; the home page and /icons/ keep getting only bonsai.css. End-user sites stop shipping ~1.9 KB raw / ~200 B gzipped of demo-only CSS. README "< 3 KB gzipped" claim restored to true. Sizes (minified): bonsai.css 12,394 -> 10,470 raw (-1,924) 3,113 -> 2,910 gzip (-203) gallery.css 2,252 raw / 626 gzip (loaded only on demo pages) Verified rendered HTML at /, /themes/, /variants/, /icons/ via curl; demo pages carry both stylesheets, others carry only bonsai.css.
93 lines
2.2 KiB
CSS
93 lines
2.2 KiB
CSS
/* Bonsai gallery styles — loaded only on /themes/ and /variants/ demo pages.
|
|
* Kept out of bonsai.css so end-user sites don't ship demo-only selectors. */
|
|
|
|
/* ============================================================
|
|
Themes gallery (exampleSite/themes/) — 4 mini bio cards
|
|
============================================================ */
|
|
|
|
.themes-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 60rem;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
.themes-gallery__card {
|
|
background: var(--bonsai-bg);
|
|
border: 1px solid var(--bonsai-border);
|
|
border-radius: var(--bonsai-radius);
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.themes-gallery__name {
|
|
font-family: var(--bonsai-font-display);
|
|
font-size: 1.1rem;
|
|
margin: 0 0 .25rem;
|
|
color: var(--bonsai-text);
|
|
}
|
|
|
|
.themes-gallery__hex {
|
|
color: var(--bonsai-muted);
|
|
font-family: ui-monospace, monospace;
|
|
font-size: .75rem;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.themes-gallery__chip {
|
|
display: inline-block;
|
|
padding: .4rem .75rem;
|
|
background: var(--bonsai-surface);
|
|
color: var(--bonsai-text);
|
|
border: 1px solid var(--bonsai-border);
|
|
border-radius: var(--bonsai-radius);
|
|
font-size: .85rem;
|
|
}
|
|
|
|
.themes-gallery__chip--accent {
|
|
background: var(--bonsai-accent);
|
|
color: var(--bonsai-bg);
|
|
border-color: var(--bonsai-accent);
|
|
}
|
|
|
|
/* ============================================================
|
|
Variants gallery (exampleSite/variants/) — 3 sample bio cards
|
|
============================================================ */
|
|
|
|
.variants-gallery {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
max-width: 36rem;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
.variants-gallery__card {
|
|
background: var(--bonsai-surface);
|
|
border: 1px solid var(--bonsai-border);
|
|
border-radius: var(--bonsai-radius);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.variants-gallery__name {
|
|
font-family: var(--bonsai-font-display);
|
|
font-size: 1.1rem;
|
|
margin: 0 0 .25rem;
|
|
color: var(--bonsai-text);
|
|
}
|
|
|
|
.variants-gallery__desc {
|
|
color: var(--bonsai-muted);
|
|
font-size: .85rem;
|
|
margin: 0 0 .5rem;
|
|
}
|
|
|
|
.variants-gallery__code {
|
|
display: inline-block;
|
|
margin-bottom: 1rem;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: .75rem;
|
|
color: var(--bonsai-muted);
|
|
}
|