mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 19:17:03 +00:00
83 lines
1.8 KiB
Plaintext
83 lines
1.8 KiB
Plaintext
---
|
|
import { site, platforms } from "../data/site";
|
|
import { getRelease } from "../data/release";
|
|
|
|
interface Props {
|
|
large?: boolean;
|
|
}
|
|
const { large = false } = Astro.props;
|
|
const release = await getRelease();
|
|
---
|
|
|
|
<div class="dl">
|
|
<a
|
|
class:list={["btn", { "btn--lg": large }]}
|
|
href={site.releasesUrl}
|
|
data-download
|
|
rel="noopener"
|
|
download
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
|
<path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
<span data-dl-label>Download {site.name}</span>
|
|
</a>
|
|
|
|
<div class="dl__os">
|
|
{
|
|
platforms.map((p) => (
|
|
<a
|
|
class="dl__chip"
|
|
href={release.urls[p.id]}
|
|
data-download-os={p.id}
|
|
rel="noopener"
|
|
download
|
|
aria-label={`Download for ${p.label}`}
|
|
title={`Download for ${p.label}`}
|
|
>
|
|
<img class="dl__logo" src={`/logos/${p.logo}`} alt={p.label} />
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.dl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.dl__os {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
.dl__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: none;
|
|
width: 44px;
|
|
height: 44px;
|
|
background: #ffffff;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-md);
|
|
box-shadow: var(--shadow-page);
|
|
transition:
|
|
box-shadow 0.18s var(--ease),
|
|
transform 0.18s var(--ease);
|
|
}
|
|
.dl__chip:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-pop);
|
|
}
|
|
.dl__logo {
|
|
width: 22px;
|
|
height: 22px;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|