68 lines
1.1 KiB
CSS
68 lines
1.1 KiB
CSS
/* Cards
|
|
|
|
A simple cards style. */
|
|
|
|
.cards {
|
|
--grid-group-column-min: 200px;
|
|
--grid-group-gap: 1.5rem;
|
|
|
|
display: grid;
|
|
gap: var(--grid-group-gap);
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
|
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: var(--spacing-m);
|
|
}
|
|
|
|
.card {
|
|
padding: var(--spacing-xs);
|
|
border: 1px solid var(--color-border);
|
|
|
|
& > * {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card--highlight {
|
|
border-color: var(--color-highlight);
|
|
}
|
|
|
|
.card--featured {
|
|
grid-row: span 2;
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.card--gutter {
|
|
padding-inline: var(--gutters);
|
|
}
|
|
|
|
.card--inverted {
|
|
background: var(--color-border);
|
|
color: var(--color-text-bg);
|
|
|
|
a {
|
|
&:link {
|
|
color: var(--color-link-inverted);
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--color-link-visited-inverted);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--color-link-hover-inverted);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-link-active-inverted);
|
|
}
|
|
}
|
|
}
|