striker/anotherreflections-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: плавающая боковая панель + бейдж «в разработке» для Глубины/Над бездны

Browse Source 
- Социальные кнопки и «Наверх» теперь — плавающая вертикальная панель
  в правом нижнем углу, всегда видна; «Наверх» появляется после первого
  скролла (200px+) с плавной анимацией
- Карточки миров получили поле wip; Глубина и Над бездной помечены
  pill-бейджем «в разработке» рядом с названием
This commit is contained in:
striker
2026-05-21 01:46:39 +03:00
parent 5f9ec37211
commit fce2278129
4 changed files with 80 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/SocialLinks.astro
View File

@@ -1,23 +1,30 @@
---
import { SOCIAL } from '../consts';
---
<div class="social-bar">
<a class="social-btn" href={SOCIAL.telegram.url} target="_blank" rel="noopener" aria-label="Telegram-канал «Иные Отражения»" title="Telegram-канал">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<aside class="social-rail" aria-label="Социальные ссылки">
<a class="rail-btn" href={SOCIAL.telegram.url} target="_blank" rel="noopener" aria-label="Telegram-канал «Иные Отражения»" title="Telegram-канал">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M21.5 4.5 18.5 19.7c-.22 1-.82 1.25-1.66.78l-4.58-3.38-2.21 2.13c-.24.24-.45.45-.92.45l.33-4.65 8.48-7.66c.37-.33-.08-.51-.57-.18L6.93 13.28l-4.52-1.41c-.98-.31-1-.98.21-1.45L20.22 3.1c.82-.3 1.53.19 1.28 1.4Z" fill="currentColor"/>
</svg>
<span>Telegram</span>
</a>
<a class="social-btn" href={SOCIAL.vk.url} target="_blank" rel="noopener" aria-label="Сообщество ВКонтакте" title="ВКонтакте">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<a class="rail-btn" href={SOCIAL.vk.url} target="_blank" rel="noopener" aria-label="Сообщество ВКонтакте" title="ВКонтакте">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12.785 16.241s.288-.032.435-.19c.135-.146.131-.42.131-.42s-.018-1.305.587-1.497c.596-.189 1.361 1.258 2.172 1.815.614.42 1.079.328 1.079.328l2.17-.03s1.135-.07.597-.962c-.044-.073-.314-.66-1.611-1.864-1.359-1.261-1.176-1.057.46-3.236.997-1.327 1.396-2.137 1.271-2.485-.119-.331-.852-.244-.852-.244l-2.44.015s-.181-.024-.315.056c-.13.078-.214.26-.214.26s-.388 1.033-.905 1.911c-1.09 1.85-1.526 1.948-1.705 1.832-.415-.268-.311-1.072-.311-1.643 0-1.783.27-2.526-.527-2.719-.265-.064-.46-.107-1.137-.114-.87-.009-1.605.003-2.022.207-.277.135-.49.437-.36.454.16.022.524.099.717.362.249.34.24 1.103.24 1.103s.143 2.094-.335 2.355c-.328.18-.778-.187-1.75-1.87a15.426 15.426 0 0 1-.871-1.797s-.072-.176-.2-.27c-.155-.115-.371-.151-.371-.151L4.65 7.32s-.348.01-.476.161c-.114.135-.009.413-.009.413s1.815 4.247 3.87 6.388c1.886 1.962 4.028 1.833 4.028 1.833l.722.126Z" fill="currentColor"/>
</svg>
<span>ВКонтакте</span>
</a>
<button class="social-btn social-btn-top" type="button" aria-label="Наверх" title="Наверх" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<button class="rail-btn rail-btn-top" type="button" aria-label="Наверх" title="Наверх" data-top>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 5v14M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Наверх</span>
</button>
</div>
</aside>
<script is:inline>
(() => {
const btn = document.querySelector('[data-top]');
if (!btn) return;
btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
const onScroll = () => btn.classList.toggle('visible', window.scrollY > 200);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
})();
</script>

3
src/consts.ts
View File

@@ -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',

2
src/pages/miry.astro
View File

@@ -26,7 +26,7 @@ import { WORLDS } from '../consts';
style={`--cat-color: ${w.color}`}
>
<span class="world-tag">{w.tag}</span>
<span class="world-name">{w.name}</span>
<span class="world-name">{w.name}{w.wip && <span class="world-wip" title="В разработке">в разработке</span>}</span>
<span class="world-desc">{w.desc}</span>
</a>
</li>

76
src/styles/global.css
View File

@@ -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 {