nobswebdev/nullcart
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve storefront blog index card layout and sizing.

Browse Source 
Use blog-specific grid breakpoints so mobile stays single-column while wider viewports grow naturally like the product list.
This commit is contained in:
nobswebdev
2026-09-16 21:43:30 +02:00
parent 762af5c4f3
commit 6419439a3d
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/modules/storefrontCore/public/css/storefront.css
+11 -3
View File
@@ -49,6 +49,8 @@
--sf-split-sidebar: minmax(220px, 320px); --sf-split-sidebar: minmax(220px, 320px);
--sf-product-card-min: 11rem; --sf-product-card-min: 11rem;
--sf-product-card-max: 22rem; --sf-product-card-max: 22rem;
--sf-blog-card-min: 17rem;
--sf-blog-card-max: 28rem;
--sf-sticky-header-scroll-padding: 9rem; --sf-sticky-header-scroll-padding: 9rem;
} }
@@ -1602,18 +1604,18 @@ a:hover {
.sf-blog-grid { .sf-blog-grid {
display: grid; display: grid;
gap: var(--sf-space-3); gap: var(--sf-space-3);
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr);
} }
@media (min-width: 36rem) { @media (min-width: 36rem) {
.sf-blog-grid { .sf-blog-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sf-product-card-min)), 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sf-blog-card-min)), 1fr));
} }
} }
.sf-blog-card { .sf-blog-card {
width: 100%; width: 100%;
max-width: var(--sf-product-card-max); max-width: var(--sf-blog-card-max);
min-width: 0; min-width: 0;
justify-self: start; justify-self: start;
} }
@@ -1626,6 +1628,10 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
.sf-blog-card__link:hover .sf-blog-card__title {
color: var(--sf-link-hover);
}
.sf-blog-card__media { .sf-blog-card__media {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
background: var(--sf-surface-muted); background: var(--sf-surface-muted);
@@ -1640,6 +1646,8 @@ a:hover {
} }
.sf-blog-card__title { .sf-blog-card__title {
font-size: 0.9375rem;
line-height: 1.4;
font-weight: 600; font-weight: 600;
} }