Files
softclick-landing/src/pages/coming-soon.astro
Zotov Ivan Yuryevich ed5677bcfb
Some checks failed
release-tag / build-and-deploy (push) Has been cancelled
feat: add og tags
2026-08-15 17:58:58 +03:00

173 lines
5.1 KiB
Plaintext

---
// 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.
Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow')
// Same origin resolution as src/layouts/Layout.astro — og:image must be absolute.
const siteOrigin =
process.env.PUBLIC_SITE_URL || import.meta.env.PUBLIC_SITE_URL || Astro.url.origin
const ogImage = new URL('/logo.jpg', siteOrigin).href
---
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>СОФТКЛИК — сайт в разработке</title>
<meta name="description" content="Сайт в разработке. Следите за обновлениями." />
<!-- Kept for messenger link previews (the preview link gets shared in chats);
indexing is still blocked by the robots meta above. -->
<meta property="og:type" content="website" />
<meta property="og:title" content="СОФТКЛИК — сайт в разработке" />
<meta property="og:description" content="Сайт в разработке. Следите за обновлениями." />
<meta property="og:site_name" content="СОФТКЛИК" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body>
<div class="screen">
<div class="brand">
<h1 class="logo">
<span class="logo__line">СОФТ</span>
<span class="logo__line logo__line--indent">КЛИК</span>
</h1>
<img class="brand__logo" src="/logo.jpg" alt="СОФТКЛИК" />
</div>
<div class="media">
<img class="astronaut" src="/astronaut.png" alt="Космонавт" />
</div>
<p class="status">Сайт в разработке. Следите за обновлениями.</p>
</div>
<style is:global>
:root {
color-scheme: light;
--pad: 20px;
--media-bg: #efeeec;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
}
body {
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif;
color: #000;
background: #fff;
}
/* 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;
/* logo row shrinks (status row is always reserved) so nothing scrolls */
grid-template-rows: minmax(0, 1fr) auto;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.brand {
grid-column: 1;
grid-row: 1;
align-self: start;
display: flex;
align-items: center;
/* top padding and size track viewport height so it fits at any height */
padding: clamp(20px, 10vh, 100px) var(--pad) 0 var(--pad);
overflow: hidden;
}
.brand__logo {
flex: none;
width: clamp(96px, min(14vw, 24vh), 220px);
height: auto;
}
.logo {
margin: 0;
font-weight: 600;
text-transform: uppercase;
line-height: 0.88;
font-size: clamp(56px, min(9vw, 15vh), 134px);
overflow: hidden;
}
.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;
text-transform: uppercase;
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;
}
.brand {
grid-column: 1;
grid-row: 1;
}
.logo {
font-size: clamp(36px, min(16vw, 11vh), 72px);
}
.media {
grid-column: 1;
grid-row: 2;
}
.status {
grid-column: 1;
grid-row: 3;
}
}
</style>
</body>
</html>