mirror of
https://github.com/sern-handler/website
synced 2026-06-17 21:32:20 +00:00
66 lines
1.6 KiB
Plaintext
66 lines
1.6 KiB
Plaintext
---
|
|
import Icon from './Icon.astro';
|
|
import type { Icons } from '../components/Icons';
|
|
|
|
interface Props {
|
|
icon?: keyof typeof Icons;
|
|
title: string;
|
|
}
|
|
|
|
const { icon, title } = Astro.props;
|
|
---
|
|
|
|
<article class="card sl-flex">
|
|
<p class="title sl-flex">
|
|
{icon && <Icon name={icon} class="icon" size="1.333em" />}
|
|
<span set:html={title} />
|
|
</p>
|
|
<div class="body"><slot /></div>
|
|
</article>
|
|
|
|
<style>
|
|
.card {
|
|
--sl-card-border: var(--sl-color-purple);
|
|
--sl-card-bg: var(--sl-color-purple-low);
|
|
border: 1px solid var(--sl-color-gray-5);
|
|
background-color: var(--sl-color-black);
|
|
padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
|
|
flex-direction: column;
|
|
gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
|
|
}
|
|
.card:nth-child(4n + 1) {
|
|
--sl-card-border: var(--sl-color-orange);
|
|
--sl-card-bg: var(--sl-color-orange-low);
|
|
}
|
|
.card:nth-child(4n + 3) {
|
|
--sl-card-border: var(--sl-color-green);
|
|
--sl-card-bg: var(--sl-color-green-low);
|
|
}
|
|
.card:nth-child(4n + 4) {
|
|
--sl-card-border: var(--sl-color-red);
|
|
--sl-card-bg: var(--sl-color-red-low);
|
|
}
|
|
.card:nth-child(4n + 5) {
|
|
--sl-card-border: var(--sl-color-blue);
|
|
--sl-card-bg: var(--sl-color-blue-low);
|
|
}
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: var(--sl-text-h4);
|
|
color: var(--sl-color-white);
|
|
line-height: var(--sl-line-height-headings);
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
.card .icon {
|
|
border: 1px solid var(--sl-card-border);
|
|
background-color: var(--sl-card-bg);
|
|
padding: 0.2em;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.card .body {
|
|
margin: 0;
|
|
font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
|
|
}
|
|
</style>
|