diff --git a/src/root/layout.tt b/src/root/layout.tt index 8eb1f119..d67ff1b8 100644 --- a/src/root/layout.tt +++ b/src/root/layout.tt @@ -93,7 +93,7 @@ <footer class="navbar"> <hr /> <small> - <em><a href="http://nixos.org/hydra" target="_blank">Hydra</a> [% HTML.escape(version) %] (using [% HTML.escape(nixVersion) %]).</em> + <em><a href="http://nixos.org/hydra" target="_blank" class="squiggle">Hydra</a> [% HTML.escape(version) %] (using [% HTML.escape(nixVersion) %]).</em> [% IF c.user_exists %] You are signed in as <tt>[% HTML.escape(c.user.username) %]</tt> [%- IF c.user.type == 'google' %] via Google[% END %]. diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css index aac3f1ea..ec7e4b64 100644 --- a/src/root/static/css/hydra.css +++ b/src/root/static/css/hydra.css @@ -171,6 +171,16 @@ body { line-height: 1.5; } +a.squiggle:hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(-10px);}to {transform:translateX(0);}}%3C/style%3E%3Cpath fill='none' stroke='%230056b3' stroke-width='0.65' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E"); + background-position: 0 100%; + background-size: auto 24px; + background-repeat: repeat; + text-decoration: none; + border-bottom: none; + padding-bottom: 1px; +} + @media (prefers-color-scheme: dark) { /* Prevent some flickering */ html {