You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.4 KiB
84 lines
1.4 KiB
/** |
|
* Card Component |
|
* Specific card implementations (price lists, comments, etc.) |
|
* For shared card styles, see cards-shared.css |
|
*/ |
|
|
|
h2.card-title { |
|
margin-top: var(--spacing-2); |
|
} |
|
|
|
.price-list { |
|
display: flex; |
|
flex-direction: row; |
|
gap: var(--spacing-4); |
|
} |
|
|
|
.price-list .card { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: start; |
|
border: var(--color-primary) solid 1px; |
|
flex-grow: 1; |
|
padding: var(--spacing-4); |
|
flex-basis: 300px; |
|
} |
|
|
|
.price-list .card .features { |
|
list-style: none; |
|
padding: 0; |
|
} |
|
|
|
.price { |
|
font-size: 22px; |
|
font-weight: bold; |
|
color: var(--color-secondary); |
|
} |
|
|
|
.price-list .card .features li { |
|
padding: var(--spacing-2) 0; |
|
} |
|
|
|
.price-list .card button:last-child { |
|
margin-top: auto; |
|
} |
|
|
|
.article-list { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.article-list .card { |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.card-header img { |
|
max-width: 100%; |
|
height: auto; |
|
max-height: 200px; |
|
width: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.card.comment { |
|
display: flex; |
|
flex-direction: column; |
|
background-color: var(--color-bg-light); |
|
padding: var(--spacing-2); |
|
} |
|
|
|
.card.comment.zap-comment { |
|
border-left: 4px solid var(--color-primary); |
|
} |
|
|
|
.card.comment .metadata { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: var(--spacing-2); |
|
} |
|
|
|
.card.comment .metadata p { |
|
margin: 0; |
|
padding: 0; |
|
}
|
|
|