comming soon
This commit is contained in:
Felix Klement committed
1 parent
c72d45740e
commit
2b509386eb
9 files changed
+437
-6
No files matched your search
@@ -0,0 +1,159 @@
|
||||
---
|
||||
import { localePath, t, type Lang } from '../../i18n/ui';
|
||||
interface Props { lang: Lang }
|
||||
const { lang } = Astro.props;
|
||||
const ui = t(lang);
|
||||
const s = ui.verifier.soon;
|
||||
const n = s.notify;
|
||||
---
|
||||
<section class="shero night" aria-labelledby="shero-title">
|
||||
<div class="container shero__inner">
|
||||
<div class="shero__text">
|
||||
<p class="eyebrow">{s.eyebrow}</p>
|
||||
<h1 id="shero-title" class="display shero__title">
|
||||
{s.title.map((line, i) => <span class:list={['line', { 'line--muted': i > 0 }]}>{line}</span>)}
|
||||
</h1>
|
||||
<p class="shero__lead">{s.lead}</p>
|
||||
</div>
|
||||
|
||||
<form class="signup hud-frame" id="notify" action="/notify" method="post" lang={lang} aria-labelledby="notify-title">
|
||||
<div class="signup__head">
|
||||
<h2 id="notify-title" class="signup__title">{n.title}</h2>
|
||||
<p class="signup__body">{n.body}</p>
|
||||
</div>
|
||||
<input type="hidden" name="lang" value={lang} />
|
||||
<input type="hidden" name="list" value="cipherverifier-alpha" />
|
||||
<p class="visually-hidden" aria-hidden="true">
|
||||
<label for="notify-website">{ui.contact.form.honeypot}</label>
|
||||
<input type="text" id="notify-website" name="website" tabindex="-1" autocomplete="off" />
|
||||
</p>
|
||||
<div class="signup__field">
|
||||
<label class="signup__label" for="notify-email">{n.email}</label>
|
||||
<input class="signup__input" id="notify-email" name="email" type="email" autocomplete="email" placeholder={n.placeholder} required />
|
||||
</div>
|
||||
<div class="signup__consent">
|
||||
<input id="notify-consent" name="consent" type="checkbox" value="yes" required />
|
||||
<label for="notify-consent">{n.consent} <a href={localePath(lang, '/privacy')}>{n.privacy}</a></label>
|
||||
</div>
|
||||
<button class="button signup__submit" type="submit">{n.submit}</button>
|
||||
</form>
|
||||
|
||||
<!-- Status strip: the menu bar's HUD language, set along the foot of the hero. -->
|
||||
<dl class="readout hud-frame" aria-label={s.status.label}>
|
||||
<div class="readout__cell readout__cell--head">{s.status.label}</div>
|
||||
{s.status.rows.map((r) => (
|
||||
<div class="readout__cell">
|
||||
<dt>{r.key}</dt>
|
||||
<dd>{'live' in r && r.live && <span class="readout__live" aria-hidden="true" />}{r.value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.line { display: block; }
|
||||
.line--muted { color: var(--ink-muted); }
|
||||
.shero__inner {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
padding-block: var(--space-9) var(--space-7);
|
||||
min-height: calc(100svh - var(--header-height));
|
||||
align-content: end;
|
||||
}
|
||||
.shero__text { display: grid; gap: var(--space-5); justify-items: start; }
|
||||
.shero__title { text-wrap: balance; }
|
||||
.shero__lead { max-width: 26em; color: var(--ink-muted); }
|
||||
|
||||
/* Fade the headline in line by line: the page's one load moment. */
|
||||
.shero__title .line, .shero__lead, .signup, .readout {
|
||||
opacity: 0;
|
||||
animation: shero-in var(--dur-slow) var(--ease) forwards;
|
||||
}
|
||||
.shero__title .line:nth-child(1) { animation-delay: 120ms; }
|
||||
.shero__title .line:nth-child(2) { animation-delay: 280ms; }
|
||||
.shero__lead { animation-delay: 440ms; }
|
||||
.signup, .readout { animation-delay: 600ms; }
|
||||
@keyframes shero-in { to { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.shero__title .line, .shero__lead, .signup, .readout { animation: none; opacity: 1; }
|
||||
}
|
||||
|
||||
/* Sign-up: a framed instrument panel. */
|
||||
.signup {
|
||||
--hud-line: var(--hud-line-on-night);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-6);
|
||||
align-content: start;
|
||||
justify-items: start;
|
||||
}
|
||||
.signup__head { display: grid; gap: var(--space-2); }
|
||||
.signup__title { font-size: var(--step-h3); letter-spacing: var(--track-h3); line-height: var(--leading-h3); font-weight: var(--weight-medium); }
|
||||
.signup__body { color: var(--ink-muted); }
|
||||
.signup__field { display: grid; gap: var(--space-2); width: 100%; }
|
||||
.signup__label { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
|
||||
.signup__input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: var(--hairline) solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: var(--space-3) 0;
|
||||
transition: border-color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.signup__input::placeholder { color: var(--ink-muted); opacity: 0.7; }
|
||||
.signup__input:focus-visible { border-bottom-color: currentColor; }
|
||||
.signup__consent {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
font-size: var(--step-small);
|
||||
line-height: var(--leading-small);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.signup__consent input { width: 1.1em; height: 1.1em; margin: 0.15em 0 0; accent-color: var(--paper); }
|
||||
.signup__consent a { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }
|
||||
|
||||
/* Readout: stacked on small screens, one strip of cells on wide ones. */
|
||||
.readout {
|
||||
--hud-line: var(--hud-line-on-night);
|
||||
display: grid;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step-micro);
|
||||
letter-spacing: var(--track-caps);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--leading-small);
|
||||
}
|
||||
.readout__cell {
|
||||
display: grid;
|
||||
grid-template-columns: 8rem 1fr;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.readout__cell + .readout__cell { border-top: var(--hairline) solid var(--line-on-night); }
|
||||
.readout__cell--head, .readout dt { color: var(--ink-muted); }
|
||||
.readout dd { display: flex; align-items: center; gap: var(--space-2); }
|
||||
.readout__live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); flex: none; }
|
||||
|
||||
@media (max-width: 30rem) {
|
||||
.signup { padding: var(--space-5); }
|
||||
}
|
||||
|
||||
/* Wide: headline across seven columns, sign-up across four beside it, the strip along the foot. */
|
||||
@media (min-width: 64rem) {
|
||||
.shero__inner {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
column-gap: var(--gap);
|
||||
row-gap: var(--space-9);
|
||||
align-items: end;
|
||||
}
|
||||
.shero__text { grid-column: 1 / span 7; }
|
||||
.signup { grid-column: 9 / span 4; }
|
||||
.readout { grid-column: 1 / -1; grid-template-columns: 1fr 2fr 2fr 2fr; }
|
||||
.readout__cell { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
|
||||
.readout__cell + .readout__cell { border-top: 0; border-left: var(--hairline) solid var(--line-on-night); }
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user