From fce2278129e36978674e9d4d17043aa969117157 Mon Sep 17 00:00:00 2001 From: striker Date: Thu, 21 May 2026 01:46:39 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BF=D0=BB=D0=B0=D0=B2=D0=B0=D1=8E?= =?UTF-8?q?=D1=89=D0=B0=D1=8F=20=D0=B1=D0=BE=D0=BA=D0=BE=D0=B2=D0=B0=D1=8F?= =?UTF-8?q?=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20+=20=D0=B1=D0=B5?= =?UTF-8?q?=D0=B9=D0=B4=D0=B6=20=C2=AB=D0=B2=20=D1=80=D0=B0=D0=B7=D1=80?= =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B5=C2=BB=20=D0=B4=D0=BB=D1=8F?= =?UTF-8?q?=20=D0=93=D0=BB=D1=83=D0=B1=D0=B8=D0=BD=D1=8B/=D0=9D=D0=B0?= =?UTF-8?q?=D0=B4=20=D0=B1=D0=B5=D0=B7=D0=B4=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Социальные кнопки и «Наверх» теперь — плавающая вертикальная панель в правом нижнем углу, всегда видна; «Наверх» появляется после первого скролла (200px+) с плавной анимацией - Карточки миров получили поле wip; Глубина и Над бездной помечены pill-бейджем «в разработке» рядом с названием --- src/components/SocialLinks.astro | 29 +++++++----- src/consts.ts | 3 ++ src/pages/miry.astro | 2 +- src/styles/global.css | 76 ++++++++++++++++++++++++-------- 4 files changed, 80 insertions(+), 30 deletions(-) diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro index 80e1f44..feced5e 100644 --- a/src/components/SocialLinks.astro +++ b/src/components/SocialLinks.astro @@ -1,23 +1,30 @@ --- import { SOCIAL } from '../consts'; --- -
- - - -
+ + diff --git a/src/consts.ts b/src/consts.ts index 3fad124..05954f7 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -57,6 +57,7 @@ export type World = { desc: string; url: string; color: string; + wip?: boolean; }; export const WORLDS: World[] = [ @@ -94,6 +95,7 @@ export const WORLDS: World[] = [ desc: 'Тонкая грань между обыденным и потусторонним.', url: 'https://bezdna.anotherreflections.ru/', color: 'var(--c-bezdna)', + wip: true, }, { name: 'Глубина', @@ -101,6 +103,7 @@ export const WORLDS: World[] = [ desc: 'Параллельный пласт реальности из мира Дозоров.', url: 'https://deep.anotherreflections.ru/', color: 'var(--c-glubina)', + wip: true, }, { name: 'Warhammer 40k', diff --git a/src/pages/miry.astro b/src/pages/miry.astro index c1d33c8..8b772de 100644 --- a/src/pages/miry.astro +++ b/src/pages/miry.astro @@ -26,7 +26,7 @@ import { WORLDS } from '../consts'; style={`--cat-color: ${w.color}`} > {w.tag} - {w.name} + {w.name}{w.wip && в разработке} {w.desc} diff --git a/src/styles/global.css b/src/styles/global.css index 912e053..1f066ed 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -519,39 +519,79 @@ pre { background: var(--bg-elev-2); } -/* ============================== SOCIAL BAR ============================== */ -.social-bar { +/* ============================== SOCIAL RAIL ============================== */ +.social-rail { + position: fixed; + right: 1.2rem; + bottom: 1.5rem; display: flex; - justify-content: center; - gap: .75rem; - margin: 4rem auto 1rem; - flex-wrap: wrap; + flex-direction: column; + gap: .55rem; + z-index: 40; } -.social-btn { +.rail-btn { display: inline-flex; align-items: center; - gap: .55em; - padding: .65em 1.25em; - background: var(--bg-elev); + justify-content: center; + width: 42px; + height: 42px; + background: rgba(17, 20, 29, 0.85); + backdrop-filter: blur(6px); border: 1px solid var(--border); - border-radius: 100px; + border-radius: 50%; color: var(--fg-muted); - font-size: .88rem; - font-weight: 500; - letter-spacing: 0.02em; cursor: pointer; font-family: inherit; - transition: border-color .2s, color .2s, background .2s, transform .2s; + transition: border-color .2s, color .2s, background .2s, transform .2s, opacity .25s; border-bottom: 1px solid var(--border); + padding: 0; } -.social-btn:hover { +.rail-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elev-2); - transform: translateY(-1px); + transform: translateY(-2px); border-bottom-color: var(--accent); } -.social-btn svg { flex-shrink: 0; } +.rail-btn-top { + opacity: 0; + pointer-events: none; + transform: translateY(8px); +} +.rail-btn-top.visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + +@media (max-width: 640px) { + .social-rail { + right: .75rem; + bottom: .75rem; + } + .rail-btn { + width: 40px; + height: 40px; + } +} + +/* WIP-бейдж рядом с названием мира */ +.world-wip { + display: inline-block; + margin-left: .6em; + vertical-align: middle; + font-family: var(--font-sans); + font-size: .58em; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--fg-dim); + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + border-radius: 100px; + padding: .25em .65em; + line-height: 1; +} /* ============================== FOOTER ============================== */ .site-footer {