0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Updated collection card typography on frontend (#18240)

Refs
https://www.notion.so/ghost/Feedback-2d148e43ff704a63b41222a4ec63b8d3?p=77bcb825854045858785272676393b85&pm=s
This commit is contained in:
Sanne de Vries 2023-09-20 11:09:09 +02:00 committed by GitHub
parent 71a072ee66
commit 1653533ebe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -12,8 +12,9 @@
} }
.kg-collection-card-title { .kg-collection-card-title {
padding: .8rem 0 1.6rem 0; margin: .8rem 0 1.6rem 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
} }
@ -24,7 +25,7 @@ a.kg-collection-card-post-wrapper {
.kg-collection-card-post { .kg-collection-card-post {
display: flex; display: flex;
gap: 2rem; gap: 3. 2rem;
} }
.kg-collection-card-img { .kg-collection-card-img {
@ -43,11 +44,12 @@ a.kg-collection-card-post-wrapper {
.kg-collection-card-content { .kg-collection-card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1.45rem; font-size: 1.6rem;
} }
h2.kg-collection-card-post-title { h2.kg-collection-card-post-title {
font-size: 1.9rem; margin: 0;
font-size: 2.4rem;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -55,7 +57,7 @@ h2.kg-collection-card-post-title {
} }
p.kg-collection-card-post-excerpt { p.kg-collection-card-post-excerpt {
margin-top: .8rem; margin-top: 1.2rem;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -66,7 +68,9 @@ p.kg-collection-card-post-excerpt {
.kg-collection-card-post-meta { .kg-collection-card-post-meta {
display: flex; display: flex;
opacity: .5; opacity: .5;
margin-top: .8rem; margin-top: 1.2rem;
font-size: 1.3rem;
font-weight: 500;
} }
/* List layout */ /* List layout */
@ -74,7 +78,7 @@ p.kg-collection-card-post-excerpt {
.kg-collection-card-list { .kg-collection-card-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 3.2rem;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -167,6 +171,10 @@ p.kg-collection-card-post-excerpt {
font-size: 1.7rem; font-size: 1.7rem;
} }
.kg-collection-card-grid .kg-collection-card-post-meta {
font-size: 1.25rem;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.kg-collection-card-grid h2.kg-collection-card-post-title { .kg-collection-card-grid h2.kg-collection-card-post-title {
font-size: 1.9rem; 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 { .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title {
font-size: 2.4rem; 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) { @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 { .kg-collection-card-grid.columns-2 h2.kg-collection-card-post-title {
font-size: 2.4rem; font-size: 2.4rem;
} }
.kg-collection-card-grid.columns-1 .kg-collection-card-post-meta {
font-size: 1.4rem;
}
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {