striker/anotherreflections-website-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 56s
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:25 +03:00
parent fc50b0d1be
commit c7f579f9ab
3 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/layouts/BaseLayout.astro
View File

@@ -151,9 +151,11 @@ const jsonLd = [
<a href="/kontakty/">Контакты</a>
</p>
<p class="dev-credit">
<a href="https://hhivp.com/" target="_blank" rel="noopener" class="dev-credit-link">
<img src="/hhivp-mark.svg" alt="" width="22" height="22" class="dev-credit-mark" />
<span>Разработка&nbsp;— hhivp.com</span>
<a href="https://hhivp.com/" target="_blank" rel="noopener" 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>
</footer>

41
src/styles/global.css
View File

@@ -734,22 +734,41 @@ pre {
border-bottom: 1px dashed currentColor;
}
.site-footer .dev-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-footer .dev-credit-link {
/* hhivp-credit — pill mark + slide-out text on hover */
.hhivp-credit {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border-bottom: none;
vertical-align: middle;
text-decoration: none;
color: inherit;
border: 1px solid currentColor;
border-radius: 999px;
padding: 3px;
gap: 0;
line-height: 1;
opacity: 0.65;
transition: gap 240ms ease, padding-right 240ms ease, opacity 240ms ease;
}
.site-footer .dev-credit-link:hover { border-bottom: none; color: var(--accent); }
.site-footer .dev-credit-link:hover span { border-bottom-color: var(--accent); }
.site-footer .dev-credit-link span {
border-bottom: 1px dashed currentColor;
.hhivp-credit:hover,
.hhivp-credit:focus-visible {
opacity: 1;
gap: 8px;
padding-right: 12px;
outline: none;
border-bottom: 1px solid currentColor;
}
.site-footer .dev-credit-mark {
flex-shrink: 0;
display: block;
color: currentColor;
.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; }
.footer-ornament {
display: block;
width: 60px;