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/styles/global.css b/src/styles/global.css index eb912b2..21aecde 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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;