From f4923fd6b489b6c3acf0be833b02908afa64e4b4 Mon Sep 17 00:00:00 2001
From: striker <admin@shivapro.org>
Date: Sun, 24 May 2026 07:00:27 +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 <noreply@anthropic.com>
---
 public/hhivp-mark.svg       |  5 ++--
 src/components/Footer.astro | 48 ++++++++++++++++++++++++-------------
 2 files changed, 34 insertions(+), 19 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 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="hhivp">
-  <rect width="100" height="100" rx="22" fill="#0a0a0a"/>
-  <g transform="translate(4 8)" fill="#fff">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92" role="img" aria-label="hhivp" fill="currentColor">
+  <g transform="translate(-4 -2)">
     <path d="M86.316,43.946V26.322h-8.331v9.961H70.46c-0.845-7.146-6.931-12.711-14.301-12.711H39.842c-7.37,0-13.456,5.564-14.301,12.711h-7.527v-6.162c3.013-1.554,4.934-4.675,4.934-8.083c0-3.775-2.382-7.199-5.928-8.519l-1.012-0.377v10.897H11.69V13.142l-1.012,0.376c-3.546,1.32-5.929,4.744-5.929,8.52c0,3.408,1.921,6.529,4.934,8.083v17.623h8.331v-9.96h7.428c-0.001,0.067-0.01,0.132-0.01,0.199v18.024c0,5.872,3.535,10.926,8.584,13.169l-1.052,4.606c-1.821,1.184-3.031,3.232-3.031,5.561c0,2.352,3.573,3.186,6.632,3.186c3.059,0,6.632-0.834,6.632-3.186c0-2.168-1.05-4.091-2.664-5.302l2.324-3.625h10.283l2.324,3.625c-1.614,1.211-2.664,3.133-2.664,5.301c0,2.352,3.573,3.186,6.632,3.186c3.06,0,6.632-0.834,6.632-3.186c0-2.33-1.209-4.378-3.03-5.562l-1.05-4.606c5.049-2.244,8.583-7.297,8.583-13.169V37.982c0-0.067-0.009-0.132-0.01-0.199h7.427v6.163c-3.012,1.553-4.932,4.674-4.932,8.083c0,3.775,2.382,7.199,5.928,8.52l1.012,0.377V50.027h4.317v10.898l1.012-0.377c3.545-1.32,5.928-4.744,5.928-8.52C91.25,48.62,89.329,45.5,86.316,43.946z M16.957,28.966l-0.442,0.199v17.079h-5.331V29.165l-0.442-0.199C8.013,27.74,6.25,25.021,6.25,22.038c0-2.778,1.546-5.329,3.94-6.649v10.151h7.318V15.388c2.394,1.321,3.939,3.872,3.939,6.649C21.448,25.021,19.685,27.74,16.957,28.966z M41.698,79.343c0,0.814-2.062,1.686-5.132,1.686c-3.07,0-5.132-0.872-5.132-1.686c0-2.83,2.303-5.132,5.133-5.132C39.396,74.211,41.698,76.513,41.698,79.343z M64.566,79.343c0,0.814-2.062,1.686-5.132,1.686c-3.07,0-5.132-0.872-5.132-1.686c0-2.83,2.303-5.132,5.133-5.132C62.264,74.211,64.566,76.513,64.566,79.343z M69.069,56.006c0,7.119-5.792,12.911-12.911,12.911H39.842c-7.119,0-12.91-5.792-12.91-12.911V37.982c0-7.119,5.792-12.91,12.91-12.91h16.316c7.119,0,12.911,5.792,12.911,12.91V56.006z M85.811,58.679V48.527h-7.317v10.151c-2.394-1.322-3.939-3.872-3.939-6.65c0-2.983,1.762-5.703,4.489-6.928l0.443-0.199v-17.08h5.331v17.08l0.443,0.199c2.728,1.226,4.491,3.945,4.491,6.928C89.75,54.808,88.205,57.358,85.811,58.679z"/>
     <circle cx="40.222" cy="40.07" r="3.8"/>
     <circle cx="55.78" cy="40.07" r="3.8"/>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4c0e80a..248ef08 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -14,9 +14,11 @@ const year = new Date().getFullYear();
     </div>
   </div>
   <div class="container 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>
   </div>
 </footer>
@@ -41,26 +43,40 @@ const year = new Date().getFullYear();
   .footer-nav a:hover { color: var(--accent); }
   .dev-credit {
     margin-top: 0.75rem;
-    font-size: 0.74rem;
     color: var(--muted);
-    opacity: 0.7;
     text-align: center;
   }
-  .dev-credit-link {
+  .hhivp-credit {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    color: inherit;
+    vertical-align: middle;
     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;
   }
-  .dev-credit-link:hover { color: var(--accent); }
-  .dev-credit-link:hover span { border-bottom-color: var(--accent); }
-  .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;
   }
-  .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.74rem;
+    transition: max-width 240ms ease;
   }
+  .hhivp-credit:hover .hhivp-credit-text,
+  .hhivp-credit:focus-visible .hhivp-credit-text { max-width: 200px; }
 </style>