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

This commit is contained in:
2026-04-23 19:38:55 +03:00
parent ecb0d8ebc2
commit 9227f2de30
4 changed files with 342 additions and 51 deletions

View File

@@ -338,7 +338,8 @@ starlight-menu-button button:hover {
.sl-markdown-content h1,
.sl-markdown-content h2,
.sl-markdown-content h3 {
.sl-markdown-content h3,
.sl-markdown-content h4 {
font-family: 'Sora', sans-serif;
letter-spacing: 0.005em;
line-height: 1.24;
@@ -362,6 +363,13 @@ starlight-menu-button button:hover {
margin-bottom: 0.5rem;
}
.sl-markdown-content h4 {
margin-top: 1rem;
margin-bottom: 0.36rem;
font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.07rem);
color: color-mix(in srgb, var(--sl-color-white) 86%, var(--wiki-blue-2));
}
.sl-markdown-content .sl-heading-wrapper.level-h3 > h3 {
display: inline-flex;
align-items: center;
@@ -413,6 +421,61 @@ starlight-menu-button button:hover {
text-decoration-thickness: 0.07em;
}
.sl-markdown-content :is(p, li, td, blockquote) a[href]:not(.sl-anchor-link):not(.map-cta-button):not(
.map-ghost-button
):not(.sl-link-button):not([href^='#']) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.44rem;
max-width: min(100%, 100ch);
margin: 0.1rem 0.2rem 0.1rem 0;
padding: 0.55rem 1rem;
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 48%, transparent);
border-radius: 0.2rem;
background: linear-gradient(
110deg,
color-mix(in srgb, var(--wiki-blue-2) 76%, #233145),
color-mix(in srgb, var(--wiki-purple-2) 66%, #273850)
);
color: #f8fbff;
text-decoration: none;
font-family: 'Sora', sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.008em;
line-height: 1;
overflow-wrap: anywhere;
box-shadow: 0 6px 14px color-mix(in srgb, var(--sl-color-accent) 18%, transparent);
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.sl-markdown-content :is(p, li, td, blockquote) a[href]:not(.sl-anchor-link):not(.map-cta-button):not(
.map-ghost-button
):not(.sl-link-button):not([href^='#']):hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--sl-color-accent) 64%, transparent);
box-shadow: 0 10px 18px color-mix(in srgb, var(--sl-color-accent) 24%, transparent);
}
.sl-markdown-content :is(p, li, td, blockquote) a[href]:not(.sl-anchor-link):not(.map-cta-button):not(
.map-ghost-button
):not(.sl-link-button):not([href^='#']):focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--sl-color-accent) 72%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 30%, transparent),
0 0 0 4px color-mix(in srgb, var(--sl-color-accent) 20%, transparent);
}
.sl-markdown-content :is(p, li, td, blockquote) a[href]:not(.sl-anchor-link):not(.map-cta-button):not(
.map-ghost-button
):not(.sl-link-button):not([href^='#']):active {
transform: translateY(0) scale(0.98);
}
.sl-markdown-content code {
border-radius: 0.16rem;
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent);
@@ -924,21 +987,28 @@ starlight-theme-select .caret {
min-height: 2.44rem;
padding: 0.55rem 1rem;
border-radius: 0.2rem;
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 92%, transparent);
background: color-mix(in srgb, var(--wiki-card) 94%, transparent);
color: var(--sl-color-gray-1);
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 48%, transparent);
background: linear-gradient(
110deg,
color-mix(in srgb, var(--wiki-blue-2) 76%, #233145),
color-mix(in srgb, var(--wiki-purple-2) 66%, #273850)
);
color: #f8fbff;
text-decoration: none;
font-family: 'Sora', sans-serif;
font-weight: 600;
font-size: 0.92rem;
transition: border-color 170ms ease, background 170ms ease, color 170ms ease, transform 170ms ease;
font-size: 0.95rem;
letter-spacing: 0.008em;
box-shadow: 0 6px 14px color-mix(in srgb, var(--sl-color-accent) 18%, transparent);
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.map-ghost-button:hover {
color: var(--sl-color-white);
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--sl-color-accent) 44%, transparent);
background: color-mix(in srgb, var(--sl-color-accent-low) 60%, transparent);
border-color: color-mix(in srgb, var(--sl-color-accent) 66%, transparent);
box-shadow: 0 10px 18px color-mix(in srgb, var(--sl-color-accent) 24%, transparent);
}
@media (min-width: 50rem) {