hackertours-theme/assets/css/components/_cards.css
Fredrik Jonsson 16c47eea9d
Using color-scheme and light-dark() to implement dark mode (#154)
* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.
2026-05-28 08:18:04 +02:00

44 lines
711 B
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);
}