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 {