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 {
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) {