65 lines
1.8 KiB
Plaintext
65 lines
1.8 KiB
Plaintext
---
|
|
interface Props {
|
|
hue: "teal" | "amber" | "rust" | "slate" | "olive";
|
|
logo?: string;
|
|
company: string;
|
|
size?: "thumb" | "hero";
|
|
}
|
|
const { hue, logo, company, size = "thumb" } = Astro.props;
|
|
---
|
|
|
|
<div class={`cover ${size} hue-${hue}`}>
|
|
{
|
|
logo ? (
|
|
<img src={logo} alt={`${company} logo`} class="logo" />
|
|
) : (
|
|
<svg class="mark" viewBox="0 0 24 24" aria-hidden="true">
|
|
<use href="#robot-icon" />
|
|
</svg>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<style>
|
|
.cover {
|
|
--ink-c: var(--hue-teal-ink);
|
|
--wash-c: var(--hue-teal-wash);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius);
|
|
background:
|
|
radial-gradient(var(--ink-c) 1px, transparent 1.6px) 0 0 / 12px 12px,
|
|
var(--wash-c);
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.cover.hue-amber { --ink-c: var(--hue-amber-ink); --wash-c: var(--hue-amber-wash); }
|
|
.cover.hue-rust { --ink-c: var(--hue-rust-ink); --wash-c: var(--hue-rust-wash); }
|
|
.cover.hue-slate { --ink-c: var(--hue-slate-ink); --wash-c: var(--hue-slate-wash); }
|
|
.cover.hue-olive { --ink-c: var(--hue-olive-ink); --wash-c: var(--hue-olive-wash); }
|
|
|
|
.cover .mark {
|
|
position: absolute;
|
|
fill: var(--ink-c);
|
|
opacity: 0.5;
|
|
}
|
|
.cover .logo {
|
|
position: relative;
|
|
max-width: 60%;
|
|
max-height: 60%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.cover.thumb { width: 88px; height: 88px; }
|
|
.cover.thumb .mark { width: 52px; height: 52px; right: -8px; bottom: -8px; }
|
|
.cover.hero { width: 100%; height: 168px; margin-bottom: 26px; }
|
|
.cover.hero .mark { width: 110px; height: 110px; right: 18px; bottom: -20px; }
|
|
|
|
@media (max-width: 620px) {
|
|
.cover.thumb { width: 64px; height: 64px; }
|
|
.cover.thumb .mark { width: 38px; height: 38px; }
|
|
}
|
|
</style>
|