Update story description and enhance sidebar styles

- Revised the story section description to reflect the server's narrative.
- Removed placeholder text and added a prompt for content creation.
- Improved sidebar link styles for better visibility and interaction.
- Added hover effects and styles for sections with sub-items in the table of contents.
- Introduced new styles for alcohol and contact link cards for consistent design.
- Enhanced map call-to-action button with new styles and hover effects.
This commit is contained in:
2026-04-21 12:44:22 +03:00
parent e32e0fb972
commit c38d538f93
16 changed files with 2083 additions and 104 deletions

View File

@@ -226,6 +226,21 @@ starlight-menu-button button:hover {
background: color-mix(in srgb, var(--sl-color-accent-low) 32%, transparent);
}
.sidebar-content .sidebar-group-link {
display: inline-block;
padding: 0;
border: 0;
border-radius: 0;
color: inherit;
text-decoration: none;
background: transparent;
}
.sidebar-content .sidebar-group-link:hover {
text-decoration: none;
background: transparent;
}
.sidebar-content :is(a[aria-current='page'], a[aria-current='page']:hover) {
background: color-mix(in srgb, var(--sl-color-gray-6) 62%, transparent);
color: var(--sl-color-white);
@@ -415,6 +430,28 @@ starlight-toc a {
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
/* Разделы, внутри которых есть подпункты, выделяем сильнее. */
starlight-toc li:has(> ul) > a,
mobile-starlight-toc li:has(> ul) > a {
font-weight: 700;
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 22%, transparent);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--wiki-purple-2) 20%, transparent),
color-mix(in srgb, var(--wiki-blue-2) 12%, transparent)
);
}
starlight-toc li:has(> ul) > a:hover,
mobile-starlight-toc li:has(> ul) > a:hover {
border-color: color-mix(in srgb, var(--sl-color-accent) 44%, transparent);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--wiki-purple-2) 30%, transparent),
color-mix(in srgb, var(--wiki-blue-2) 18%, transparent)
);
}
starlight-toc a::before {
content: '';
position: absolute;
@@ -585,6 +622,44 @@ starlight-theme-select .caret {
margin-bottom: 0.45rem;
}
.alcohol-nav-card {
display: block;
color: inherit;
text-decoration: none;
}
.alcohol-nav-card:hover {
text-decoration: none;
}
.alcohol-nav-card p {
margin-bottom: 0;
}
.contact-link-card {
display: block;
color: inherit;
text-decoration: none;
}
.contact-link-card:hover {
text-decoration: none;
}
.contact-link-card p {
margin-bottom: 0;
}
.city-feature-card p {
margin-bottom: 0;
}
.city-highlight {
font-size: inherit;
font-weight: 700;
line-height: inherit;
}
.command-block {
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
border-radius: 0.16rem;
@@ -615,6 +690,46 @@ starlight-theme-select .caret {
font-weight: 700;
}
.map-cta-wrap {
margin-top: 1rem;
}
.map-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.6rem;
padding: 0.64rem 1.15rem;
border-radius: 0.2rem;
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 55%, transparent);
background: linear-gradient(
140deg,
color-mix(in srgb, var(--wiki-purple-2) 72%, #1b2434),
color-mix(in srgb, var(--wiki-blue-2) 78%, #1b2434)
);
color: #f5f9ff;
text-decoration: none;
font-family: 'Sora', sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow:
0 8px 18px color-mix(in srgb, var(--sl-color-accent) 25%, transparent),
0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 18%, transparent);
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}
.map-cta-button:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--sl-color-accent) 70%, transparent);
box-shadow:
0 12px 22px color-mix(in srgb, var(--sl-color-accent) 32%, transparent),
0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 24%, transparent),
0 0 16px color-mix(in srgb, var(--sl-color-accent) 24%, transparent);
filter: saturate(1.06);
}
@media (min-width: 50rem) {
.hero {
grid-template-columns: 1fr;