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

feat(footer): hover-pill credit «Сделано в hhivp.com» с border вместо плотного фона
All checks were successful
deploy / deploy (push) Successful in 57s
Details

Browse Source 
Паттерн Cuberto: только mark по умолчанию, при hover/focus раскрывается с текстом справа. SVG-mark в currentColor наследует цвет родителя — гармонирует с любой темой. Border 1px solid currentColor вместо плотного чёрного фона.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Dmitry Gusev
2026-05-24 07:00:30 +03:00
parent 32932a1a78
commit 0bedb25678
3 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Footer.astro
View File

@@ -11,9 +11,11 @@ const year = new Date().getFullYear();
<a href="/privacy/">Конфиденциальность</a>
</nav>
<p class="developer">
<a href="https://hhivp.com/" rel="noopener" target="_blank" class="dev-credit">
<img src="/hhivp-mark.svg" alt="" width="22" height="22" class="dev-credit-mark" />
<span>Разработка&nbsp;— hhivp.com</span>
<a href="https://hhivp.com/" rel="noopener" target="_blank" class="hhivp-credit" aria-label="Сделано в hhivp.com">
<span class="hhivp-credit-mark" aria-hidden="true">
<img src="/hhivp-mark.svg" alt="" width="20" height="20" />
</span>
<span class="hhivp-credit-text">Сделано&nbsp;в&nbsp;hhivp.com</span>
</a>
</p>
</div>

59
src/styles/global.css
View File

@@ -185,27 +185,50 @@ section h2::before {
font-size: 0.78rem;
opacity: 0.6;
}
.footer-inner .developer a {
color: inherit;
border-bottom: 1px dashed currentColor;
}
.footer-inner .developer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.footer-inner .developer .dev-credit {
/* hhivp-credit — pill с border, по умолчанию только mark; при hover/focus
раскрывается с текстом справа (паттерн Cuberto). Currentcolor — наследует
цвет родителя, чтобы гармонировать с любой темой футера. */
.hhivp-credit {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border-bottom: none;
}
.footer-inner .developer .dev-credit:hover { color: var(--accent); }
.footer-inner .developer .dev-credit:hover span { border-bottom-color: var(--accent); }
.footer-inner .developer .dev-credit span {
border-bottom: 1px dashed currentColor;
}
.footer-inner .developer .dev-credit-mark {
flex-shrink: 0;
display: block;
vertical-align: middle;
color: currentColor;
text-decoration: none;
color: inherit;
border: 1px solid currentColor;
border-radius: 999px;
padding: 3px;
gap: 0;
line-height: 1;
opacity: 0.6;
transition: gap 240ms ease, padding-right 240ms ease, opacity 240ms ease, border-color 240ms ease;
}
.hhivp-credit:hover,
.hhivp-credit:focus-visible {
opacity: 1;
gap: 8px;
padding-right: 12px;
outline: none;
}
.hhivp-credit-mark {
display: inline-flex;
flex-shrink: 0;
}
.hhivp-credit-mark img {
display: block;
width: 20px;
height: 20px;
}
.hhivp-credit-text {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0;
font-size: 0.75rem;
transition: max-width 240ms ease;
}
.hhivp-credit:hover .hhivp-credit-text,
.hhivp-credit:focus-visible .hhivp-credit-text {
max-width: 200px;
}
/* ── Reading pages (privacy) ────────────────────────────────────── */