chore: customize coming soon page
This commit is contained in:
Zotov Ivan Yuryevich
@@ -1,10 +1,10 @@
|
||||
---
|
||||
// Standalone "Getting ready for launch" page shown to everyone who is NOT an
|
||||
// unlocked client (strangers, search engines, bots). The gate in
|
||||
// src/middleware.ts internally rewrites unauthorized requests to this route.
|
||||
// Standalone "Сайт в разработке" page shown to everyone who is NOT an unlocked
|
||||
// client (strangers, search engines, bots). The gate in src/middleware.ts
|
||||
// internally rewrites unauthorized requests to this route.
|
||||
//
|
||||
// It is intentionally self-contained — no shared Layout and no Strapi data — so
|
||||
// it renders even while the rest of the site is gated. Edit the copy in <main>.
|
||||
// it renders even while the rest of the site is gated.
|
||||
Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow')
|
||||
---
|
||||
|
||||
@@ -14,81 +14,123 @@ Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow')
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Скоро запуск</title>
|
||||
<title>СОФТКЛИК — сайт в разработке</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="dot" aria-hidden="true"></div>
|
||||
<h1>Мы готовимся к запуску</h1>
|
||||
<p>Сайт скоро станет доступен. Спасибо, что заглянули — мы уже совсем близко.</p>
|
||||
</main>
|
||||
<div class="screen">
|
||||
<h1 class="logo">
|
||||
<span class="logo__line">СОФТ</span>
|
||||
<span class="logo__line logo__line--indent">КЛИК</span>
|
||||
</h1>
|
||||
|
||||
<div class="media">
|
||||
<img class="astronaut" src="/astronaut.png" alt="Космонавт" width="960" height="1200" />
|
||||
</div>
|
||||
|
||||
<p class="status">Сайт в разработке. Следите за обновлениями.</p>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
--pad: 20px;
|
||||
--media-bg: #efeeec;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 24px;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif;
|
||||
color: #e7e9ee;
|
||||
background: radial-gradient(
|
||||
1200px 600px at 50% -10%,
|
||||
#1b2a4a 0%,
|
||||
#0b1020 55%,
|
||||
#070a14 100%
|
||||
);
|
||||
text-align: center;
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
main {
|
||||
max-width: 540px;
|
||||
|
||||
/* Desktop: white content column on the left, astronaut on the right.
|
||||
Logo pinned top-left, status pinned bottom-left. */
|
||||
.screen {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 auto 28px;
|
||||
border-radius: 50%;
|
||||
background: #5b8cff;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(91, 140, 255, 0.55);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 18px rgba(91, 140, 255, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(91, 140, 255, 0);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 14px;
|
||||
font-size: clamp(28px, 5vw, 40px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
p {
|
||||
|
||||
.logo {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: start;
|
||||
margin: 0;
|
||||
font-size: clamp(15px, 2.5vw, 18px);
|
||||
line-height: 1.6;
|
||||
color: #a8b0c2;
|
||||
padding: calc(var(--pad) * 4) var(--pad) 0 var(--pad);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.88;
|
||||
font-size: clamp(44px, 7vw, 104px);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dot {
|
||||
animation: none;
|
||||
.logo__line {
|
||||
display: block;
|
||||
}
|
||||
.logo__line--indent {
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
.status {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
align-self: end;
|
||||
margin: 0;
|
||||
padding: 0 var(--pad) var(--pad);
|
||||
font-size: clamp(15px, 1.6vw, 20px);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.media {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
overflow: hidden;
|
||||
background: var(--media-bg);
|
||||
}
|
||||
.astronaut {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center right;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* Mobile: stack — logo on top, astronaut in the middle, status at bottom. */
|
||||
@media (max-width: 768px) {
|
||||
.screen {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
.logo {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: clamp(40px, 16vw, 72px);
|
||||
}
|
||||
.media {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
min-height: 42vh;
|
||||
}
|
||||
.status {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user