vol_west/saiti-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено руководство по варке алкоголя и рецепты напитков, а также страница 404 с кастомным дизайном. Добавлен файл изображения бочки.

Browse Source
This commit is contained in:
tolst
2026-04-19 00:56:57 +03:00
parent 8fc3243687
commit f8d217465a
12 changed files with 1269 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/WikiHeader.astro
View File

@@ -19,41 +19,102 @@ const topLinks = [
];
---
<div class="header wiki-header">
<div class="title-wrapper sl-flex">
<SiteTitle />
<nav class="wiki-top-nav" aria-label="Быстрая навигация">
{
topLinks.map((link) => (
<a href={link.href} class="wiki-top-nav__link">
{link.label}
</a>
))
}
</nav>
</div>
<div class="sl-flex print:hidden">
{shouldRenderSearch && <Search />}
</div>
<div class="sl-hidden md:sl-flex print:hidden right-group">
<div class="sl-flex social-icons">
<SocialIcons />
<div class="wiki-header-shell">
<div class="header wiki-header">
<div class="title-wrapper sl-flex">
<SiteTitle />
<nav class="wiki-top-nav" aria-label="Быстрая навигация">
{
topLinks.map((link) => (
<a href={link.href} class="wiki-top-nav__link">
{link.label}
</a>
))
}
</nav>
</div>
<ThemeSelect />
<LanguageSelect />
<div class="sl-flex print:hidden">
{shouldRenderSearch && <Search />}
</div>
<div class="sl-hidden md:sl-flex print:hidden right-group">
<div class="sl-flex social-icons">
<SocialIcons />
</div>
<ThemeSelect />
<LanguageSelect />
</div>
</div>
<div class="wiki-read-progress" aria-hidden="true">
<div class="wiki-read-progress__fill" data-read-progress></div>
</div>
</div>
<button class="wiki-back-to-top" type="button" aria-label="Прокрутить в начало" data-back-to-top>
<span aria-hidden="true">↑</span>
</button>
<script>
const setReadProgress = () => {
const progressEl = document.querySelector('[data-read-progress]');
const backToTopBtn = document.querySelector('[data-back-to-top]');
if (!(progressEl instanceof HTMLElement)) return;
const doc = document.documentElement;
const scrollTop = window.scrollY || doc.scrollTop;
const scrollable = doc.scrollHeight - window.innerHeight;
const ratio = scrollable > 0 ? Math.min(1, Math.max(0, scrollTop / scrollable)) : 0;
progressEl.style.transform = `scaleX(${ratio})`;
if (backToTopBtn instanceof HTMLElement) {
backToTopBtn.classList.toggle('is-visible', scrollTop > 420);
}
};
const bindReadProgress = () => {
const backToTopBtn = document.querySelector('[data-back-to-top]');
if (backToTopBtn instanceof HTMLElement) {
if (backToTopBtn.parentElement !== document.body) {
document.body.appendChild(backToTopBtn);
}
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
setReadProgress();
window.addEventListener('scroll', setReadProgress, { passive: true });
window.addEventListener('resize', setReadProgress);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bindReadProgress, { once: true });
} else {
bindReadProgress();
}
document.addEventListener('astro:page-load', setReadProgress);
</script>
<style>
@layer starlight.core {
.wiki-header-shell {
position: relative;
width: 100%;
height: 100%;
}
.wiki-header {
display: flex;
gap: var(--sl-nav-gap);
justify-content: space-between;
align-items: center;
height: 100%;
padding-bottom: 0.28rem;
}
.title-wrapper {
@@ -96,6 +157,78 @@ const topLinks = [
align-items: center;
}
.wiki-read-progress {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 2px;
background: color-mix(in srgb, var(--sl-color-hairline) 65%, transparent);
overflow: hidden;
}
.wiki-read-progress__fill {
height: 100%;
width: 100%;
transform-origin: left center;
transform: scaleX(0);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--wiki-purple-2) 88%, #ffffff),
color-mix(in srgb, var(--wiki-blue-2) 90%, #ffffff)
);
transition: transform 90ms linear;
}
.wiki-back-to-top {
position: fixed;
top: auto;
right: max(0.75rem, env(safe-area-inset-right));
bottom: max(1.1rem, env(safe-area-inset-bottom));
z-index: 30;
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 70%, transparent);
border-radius: 999px;
background: linear-gradient(
140deg,
color-mix(in srgb, var(--wiki-purple-2) 78%, #101522),
color-mix(in srgb, var(--wiki-blue-2) 82%, #101522)
);
color: #f6f9ff;
font-family: 'Sora', sans-serif;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.01em;
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
box-shadow:
0 10px 24px hsl(220 95% 62% / 0.24),
0 0 0 1px hsl(214 88% 70% / 0.22);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.wiki-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.wiki-back-to-top:hover {
border-color: color-mix(in srgb, #9ec4ff 80%, transparent);
box-shadow:
0 14px 28px hsl(220 95% 62% / 0.32),
0 0 0 1px hsl(214 88% 70% / 0.35),
0 0 18px hsl(220 96% 68% / 0.34);
}
.social-icons::after {
content: '';
height: 2rem;
@@ -135,6 +268,19 @@ const topLinks = [
align-content: center;
}
}
@media (max-width: 50rem) {
.wiki-header {
padding-bottom: 0.34rem;
}
.wiki-back-to-top {
top: auto;
right: max(0.62rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
width: 2.5rem;
height: 2.5rem;
}
}
}
</style>