lix-project/hydra
4
0
Fork 6
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

Add a squiggly line to the Hydra link on hover

Browse source 
The effect is the same as the one on links in mail bodys on
https://lists.apache.org/
This commit is contained in:
Janne Heß 2022-07-08 22:23:35 +02:00
parent 2b1c1e65d5
commit 9addaeb17f
No known key found for this signature in database
GPG key ID: 69165158F05265DF
2 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/root/layout.tt
View file

@ -93,7 +93,7 @@
<footer class="navbar"> <footer class="navbar">
<hr /> <hr />
<small> <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 %] [% IF c.user_exists %]
You are signed in as <tt>[% HTML.escape(c.user.username) %]</tt> You are signed in as <tt>[% HTML.escape(c.user.username) %]</tt>
[%- IF c.user.type == 'google' %] via Google[% END %]. [%- IF c.user.type == 'google' %] via Google[% END %].

10
src/root/static/css/hydra.css
View file

@ -166,6 +166,16 @@ body {
line-height: 1.5; 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) { @media (prefers-color-scheme: dark) {
/* Prevent some flickering */ /* Prevent some flickering */
html { html {