mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 19:17:03 +00:00
137 lines
3.1 KiB
Plaintext
137 lines
3.1 KiB
Plaintext
---
|
|
import AppWindow from "./AppWindow.astro";
|
|
import OfferBadge from "./OfferBadge.astro";
|
|
import { site, platforms } from "../data/site";
|
|
---
|
|
|
|
<section class="hero">
|
|
<div class="container hero__head">
|
|
<h1>
|
|
Write your book.<br />
|
|
<span class="book-accent">Own</span> every word.
|
|
</h1>
|
|
<p class="lede hero__lede">
|
|
A calm, offline studio to write, format, and publish your book to every store and to
|
|
print. No subscription, no account. Buy once, own it forever.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="container hero__art">
|
|
<AppWindow />
|
|
</div>
|
|
|
|
<div class="container hero__get" id="download">
|
|
<div class="hero__buttons" data-osrow>
|
|
{
|
|
platforms.map((p) => (
|
|
<a
|
|
class="osbtn"
|
|
href={site.releasesUrl}
|
|
data-download-os={p.id}
|
|
rel="noopener"
|
|
download
|
|
>
|
|
<img class="osbtn__icon" src={`/logos/${p.logo}`} alt="" />
|
|
<span>Download for {p.label}</span>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
<p class="hero__meta">
|
|
<span data-version>v0.1.2</span> · Works offline · No account
|
|
</p>
|
|
<div class="hero__offer">
|
|
<OfferBadge />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hero {
|
|
padding-top: clamp(36px, 4.5vw, 60px);
|
|
padding-bottom: clamp(48px, 6vw, 80px);
|
|
background:
|
|
radial-gradient(120% 90% at 50% -10%, var(--paper) 0%, transparent 60%),
|
|
var(--shell);
|
|
}
|
|
.hero__head {
|
|
text-align: center;
|
|
max-width: 720px;
|
|
}
|
|
h1 {
|
|
font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.9rem);
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 18px;
|
|
}
|
|
.hero__lede {
|
|
margin-inline: auto;
|
|
max-width: 50ch;
|
|
}
|
|
.hero__art {
|
|
margin-top: clamp(32px, 4vw, 48px);
|
|
max-width: 1000px;
|
|
}
|
|
.hero__get {
|
|
margin-top: clamp(24px, 3vw, 32px);
|
|
scroll-margin-top: 96px;
|
|
}
|
|
.hero__buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
.osbtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0.82em 1.35em;
|
|
background: #ffffff;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 999px;
|
|
color: #23201b;
|
|
font-family: var(--font-ui);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
box-shadow: var(--shadow-page);
|
|
transition:
|
|
transform 0.18s var(--ease),
|
|
box-shadow 0.18s var(--ease),
|
|
border-color 0.18s var(--ease);
|
|
}
|
|
.osbtn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-pop);
|
|
}
|
|
.osbtn.is-detected {
|
|
border-color: var(--ink);
|
|
}
|
|
.osbtn__icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: none;
|
|
object-fit: contain;
|
|
}
|
|
.hero__meta {
|
|
margin: 16px 0 0;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--ink-faint);
|
|
text-align: center;
|
|
}
|
|
.hero__offer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 22px;
|
|
}
|
|
@media (max-width: 480px) {
|
|
.hero__buttons {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.osbtn {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|