diff --git a/ghost/core/core/frontend/src/cards/css/collection.css b/ghost/core/core/frontend/src/cards/css/collection.css index b0bf6d89d7..dda2d431a4 100644 --- a/ghost/core/core/frontend/src/cards/css/collection.css +++ b/ghost/core/core/frontend/src/cards/css/collection.css @@ -12,8 +12,9 @@ } .kg-collection-card-title { - padding: .8rem 0 1.6rem 0; + margin: .8rem 0 1.6rem 0; font-size: 1.5rem; + font-weight: 700; text-transform: uppercase; } @@ -24,7 +25,7 @@ a.kg-collection-card-post-wrapper { .kg-collection-card-post { display: flex; - gap: 2rem; + gap: 3. 2rem; } .kg-collection-card-img { @@ -43,11 +44,12 @@ a.kg-collection-card-post-wrapper { .kg-collection-card-content { display: flex; flex-direction: column; - font-size: 1.45rem; + font-size: 1.6rem; } h2.kg-collection-card-post-title { - font-size: 1.9rem; + margin: 0; + font-size: 2.4rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -55,7 +57,7 @@ h2.kg-collection-card-post-title { } p.kg-collection-card-post-excerpt { - margin-top: .8rem; + margin-top: 1.2rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; @@ -66,7 +68,9 @@ p.kg-collection-card-post-excerpt { .kg-collection-card-post-meta { display: flex; opacity: .5; - margin-top: .8rem; + margin-top: 1.2rem; + font-size: 1.3rem; + font-weight: 500; } /* List layout */ @@ -74,7 +78,7 @@ p.kg-collection-card-post-excerpt { .kg-collection-card-list { display: flex; flex-direction: column; - gap: 2rem; + gap: 3.2rem; } @media (max-width: 767px) { @@ -167,6 +171,10 @@ p.kg-collection-card-post-excerpt { font-size: 1.7rem; } +.kg-collection-card-grid .kg-collection-card-post-meta { + font-size: 1.25rem; +} + @media (min-width: 640px) { .kg-collection-card-grid h2.kg-collection-card-post-title { font-size: 1.9rem; @@ -175,6 +183,10 @@ p.kg-collection-card-post-excerpt { .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title { font-size: 2.4rem; } + + .kg-collection-card-grid:not(.columns-3):not(.columns-4) .kg-collection-card-post-meta { + font-size: 1.3rem; + } } @media (min-width: 1024px) { @@ -185,6 +197,10 @@ p.kg-collection-card-post-excerpt { .kg-collection-card-grid.columns-2 h2.kg-collection-card-post-title { font-size: 2.4rem; } + + .kg-collection-card-grid.columns-1 .kg-collection-card-post-meta { + font-size: 1.4rem; + } } @media (min-width: 1280px) {