goatcorp-website/src/components/ScreenshotDownload.astro
2024-03-19 19:30:20 -04:00

76 lines
1.3 KiB
Text

---
import { Image } from "astro:assets";
import screenshot from "../assets/screenshot.png";
import Download from "../components/icons/Download.astro";
import FAQ from "../components/icons/FAQ.astro";
---
<div class="screenshotDownloadContainer">
<h1>A custom launcher for FFXIV</h1>
<div class="screenshotDownloadContent">
<a
class="download"
href="https://github.com/goatcorp/FFXIVQuickLauncher/releases/latest"
>
<Download />
Download
</a>
<a class="faq" href="/faq"><FAQ /> FAQ and Help</a>
</div>
<Image src={screenshot} alt="XIVLauncher screenshot" />
</div>
<style>
img {
height: auto;
max-width: 100%;
}
h1 {
text-align: center;
}
.screenshotDownloadContainer {
display: flex;
flex-direction: column;
width: 100%;
}
.screenshotDownloadContent {
text-align: center;
margin-bottom: 1.5rem;
display: flex;
flex-direction: row;
justify-content: center;
gap: 0.5rem;
}
a {
padding: 0.75rem;
border-radius: 0.25rem;
color: var(--fg);
text-decoration: none;
}
.download > svg {
vertical-align: bottom;
}
.faq > svg {
vertical-align: -0.1em;
}
a:hover {
text-decoration: underline;
}
.download {
background-color: var(--xl);
}
.faq {
background-color: var(--card);
}
</style>