diff --git a/backend/src/modules/storefrontCore/public/css/storefront.css b/backend/src/modules/storefrontCore/public/css/storefront.css index ad9ffff..645cd3d 100644 --- a/backend/src/modules/storefrontCore/public/css/storefront.css +++ b/backend/src/modules/storefrontCore/public/css/storefront.css @@ -49,6 +49,8 @@ --sf-split-sidebar: minmax(220px, 320px); --sf-product-card-min: 11rem; --sf-product-card-max: 22rem; + --sf-blog-card-min: 17rem; + --sf-blog-card-max: 28rem; --sf-sticky-header-scroll-padding: 9rem; } @@ -1602,18 +1604,18 @@ a:hover { .sf-blog-grid { display: grid; gap: var(--sf-space-3); - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1fr); } @media (min-width: 36rem) { .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 { width: 100%; - max-width: var(--sf-product-card-max); + max-width: var(--sf-blog-card-max); min-width: 0; justify-self: start; } @@ -1626,6 +1628,10 @@ a:hover { text-decoration: none; } +.sf-blog-card__link:hover .sf-blog-card__title { + color: var(--sf-link-hover); +} + .sf-blog-card__media { aspect-ratio: 16 / 9; background: var(--sf-surface-muted); @@ -1640,6 +1646,8 @@ a:hover { } .sf-blog-card__title { + font-size: 0.9375rem; + line-height: 1.4; font-weight: 600; }