From 0bedb25678087193744b200d36aa372151250b2c Mon Sep 17 00:00:00 2001 From: Dmitry Gusev Date: Sun, 24 May 2026 07:00:30 +0300 Subject: [PATCH] =?UTF-8?q?feat(footer):=20hover-pill=20credit=20=C2=AB?= =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=BE=20=D0=B2=20hhivp.com?= =?UTF-8?q?=C2=BB=20=D1=81=20border=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE?= =?UTF-8?q?=20=D0=BF=D0=BB=D0=BE=D1=82=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=84?= =?UTF-8?q?=D0=BE=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Паттерн Cuberto: только mark по умолчанию, при hover/focus раскрывается с текстом справа. SVG-mark в currentColor наследует цвет родителя — гармонирует с любой темой. Border 1px solid currentColor вместо плотного чёрного фона. Co-Authored-By: Claude Opus 4.7 --- public/hhivp-mark.svg | 5 ++-- src/components/Footer.astro | 8 +++-- src/styles/global.css | 59 ++++++++++++++++++++++++++----------- 3 files changed, 48 insertions(+), 24 deletions(-) diff --git a/public/hhivp-mark.svg b/public/hhivp-mark.svg index 2f8187a..3b3e504 100644 --- a/public/hhivp-mark.svg +++ b/public/hhivp-mark.svg @@ -1,6 +1,5 @@ - - - + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index e0b75d9..8eb2c9c 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -11,9 +11,11 @@ const year = new Date().getFullYear(); Конфиденциальность

- - - Разработка — hhivp.com + + + Сделано в hhivp.com

diff --git a/src/styles/global.css b/src/styles/global.css index d7f05d6..0c541f4 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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) ────────────────────────────────────── */