Skip to content

Commit 5f6ca7e

Browse files
committed
Greet visitors in gentlemen style.
1 parent 332f57b commit 5f6ca7e

File tree

6 files changed

+97
-4
lines changed

6 files changed

+97
-4
lines changed

assets/img/logo.svg

Lines changed: 1 addition & 1 deletion
Loading

assets/js/function.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,16 @@
33

44
$(function(){
55

6-
});
6+
});
7+
8+
document.addEventListener("DOMContentLoaded", function () {
9+
setTimeout(() => {
10+
const hat = document.getElementById("hat");
11+
hat.style.animation = "wave-hat 1.5s ease-in-out forwards";
12+
13+
// clear the animation for hover
14+
setTimeout(() => {
15+
hat.style.animation = "";
16+
}, 1500);
17+
}, 1000);
18+
});

html/includes/hat.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<svg id="logo-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2+
viewBox="0 0 157.3 100.1" style="enable-background:new 0 0 157.3 100.1;" xml:space="preserve">
3+
<g>
4+
<path d="M122.7,81.2c0-0.1-0.2-0.3-0.4-0.4c-1.2-0.5-3.7-0.9-5.7-0.9c-3.8,0-6.5,2.3-6.5,5.4c0,3,2.2,4.9,4.7,5.9
5+
c2,0.8,5.6,1.6,5.6,4.2c0,1.4-1.6,2.8-3.2,2.8c-2.2,0-4.4-1.8-5.6-4.6c-0.4-1-0.6-1.2-0.9-1.2s-0.4,0.3-0.4,0.7l0.3,3.9
6+
c0,0.7,0.2,1,0.9,1.2c1.9,0.4,3.7,1,5.4,1c4,0,7.5-3,7.5-6.5c0-3.7-3.5-5.1-6.3-6.3c-2.8-1.2-4-2.1-4-3.3c0-1.3,1.5-2.4,3.3-2.4
7+
c2,0,4.2,1.8,4.9,4c0.3,0.8,0.4,0.9,0.8,0.9c0.3,0,0.4-0.1,0.4-0.4v-0.3L122.7,81.2z"/>
8+
<path d="M98.4,84.2v-3.3c0-0.4,0-0.6-0.3-0.6c-0.2,0-0.7,0.3-0.8,0.3c-1.3,0.5-2.9,1.2-5.7,2c-0.2,0-0.2,0.1-0.2,0.3v0.7
9+
c0,0.1,0.1,0.2,0.2,0.2c1.7,0.3,2.1,1,2.1,3.3v7.5c0,2-0.9,2.7-2,2.7h-0.6c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.1,0,0.2,0.2,0.2h9.8
10+
c0.2,0,0.2,0,0.2-0.2v-1.1c0-0.2,0-0.2-0.2-0.2h-0.6c-1.1,0-2-0.7-2-2.7v-8.2c1.2-1.7,1.8-2.3,2.6-2.3c0.3,0,0.7,0.2,1.2,0.4
11+
c0.9,0.4,1.6,0.6,2.1,0.6c1.5,0,2.6-1,2.6-2.4c0-1.3-1.1-2.3-2.6-2.3C102.5,80.2,100.2,82,98.4,84.2"/>
12+
<path d="M87.2,93.1c-0.1,0-0.2,0.1-0.3,0.2c-1.5,2-3.9,3.2-6,3.2c-3.3,0-5.9-3.2-5.9-7.4c0-0.1,0-0.3,0-0.6h8.2h2.9
13+
c1.1,0,1.5-0.5,1.5-1.3c0-0.3,0-0.7-0.2-1.2c-1.2-3.4-4.4-5.8-8.3-5.8c-5.2,0-9.2,4.4-9.2,10c0,5,4,9.4,8.6,9.4
14+
c3.9,0,7.2-2.3,9-5.3c0.2-0.3,0.3-0.6,0.3-0.9C87.7,93.3,87.5,93.1,87.2,93.1z M78.8,81.4c2.5,0.1,3.9,1.9,3.9,4.9
15+
c0,0.3-0.1,0.7-0.9,0.7H79h-3.9C75.4,83.3,76.6,81.4,78.8,81.4z"/>
16+
<path d="M66.5,97.6c-1.7-0.3-2.1-1-2.1-3.3V69.2c0-0.4,0-0.6-0.3-0.6c-0.2,0-0.5,0-0.6,0.1c-0.8,0.3-3.4,0.7-5.9,1.1
17+
c-0.2,0-0.2,0.1-0.2,0.3v0.7c0,0.1,0.1,0.2,0.2,0.2c1.7,0.3,2.1,1,2.1,3.3v6.9c-1.4-0.6-2.6-1-3.9-1c-6.1,0-9.8,4-9.8,10.4
18+
c0,5.3,3.5,9.2,8.3,9.2c1.8,0,4.4-1,5.5-2v1.7c0,0.4,0,0.6,0.3,0.6c0.2,0,0.5,0,0.6-0.1c0.8-0.3,3.4-0.7,5.9-1.1
19+
c0.2,0,0.2-0.1,0.2-0.3v-0.7C66.7,97.7,66.6,97.7,66.5,97.6z M59.6,95.5c-1,1.4-1.6,1.8-3,1.8c-3.6,0-5.9-3.3-5.9-8.3
20+
c0-4.7,1.8-7.8,4.6-7.8c2.2,0,3.6,1.4,4.2,3.7L59.6,95.5L59.6,95.5z"/>
21+
<path d="M40,69.3c0-0.4,0-0.6-0.3-0.6c-0.2,0-0.5,0-0.6,0.1c-0.8,0.3-3.4,0.7-5.9,1.1C33,69.9,33,70,33,70.2v0.7
22+
c0,0.1,0.1,0.2,0.2,0.2c1.7,0.3,2.1,1,2.1,3.3v20.2c0,2-0.9,2.7-2,2.7h-0.6c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.1,0,0.2,0.2,0.2h9.8
23+
c0.2,0,0.2,0,0.2-0.2v-1.1c0-0.2,0-0.2-0.2-0.2H42c-1.1,0-2-0.7-2-2.7V69.3z"/>
24+
<path d="M9.9,84.3h6.4c3,0,4.9,2.8,4.9,5.2v0.6c0,0.2,0,0.2,0.2,0.2h1.1c0.1,0,0.2,0,0.2-0.2V76.6c0-0.2,0-0.2-0.2-0.2h-1.1
25+
c-0.2,0-0.2,0-0.2,0.2v0.6c0,2.4-1.9,5.2-4.9,5.2H9.9v-8.2c0-3.6,0.3-4.2,4.6-4.2c4.5,0,9.1,1.1,11.7,4.7c0.8,1.1,1.3,1.7,1.8,1.7
26+
c0.3,0,0.4-0.2,0.4-0.6c0-0.2-0.1-0.6-0.3-1l-2.5-5.7c-0.3-0.6-0.3-0.6-1.1-0.6H0.2c-0.2,0-0.2,0-0.2,0.2v1.1C0,70,0,70,0.2,70h0.6
27+
c2.4,0,3.3,0.6,3.3,3.6v20.1c0,3-0.9,3.6-3.3,3.6H0.2c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.1,0,0.2,0.2,0.2h25c0.6,0,0.7-0.2,0.9-0.6
28+
l2-6.4c0.2-0.5,0.2-0.9,0.2-1.1c0-0.3-0.1-0.6-0.3-0.6c-0.5,0-1,0.8-2,2.2c-2.7,3.9-4.6,4.9-11.5,4.9c-3.3,0-4.6-0.5-4.6-1.6
29+
L9.9,84.3L9.9,84.3z"/>
30+
<path d="M91.2,60l-1.3,2.7c-0.3,0.9-1.1,1.6-2.2,1.6h-0.4c-2.4,0-3.6,0.9-3.6,2.6c0,1.2,1,2.1,2.3,2.1c1.8,0,3.1-1.2,4.5-4.3
31+
L99,46.1c1.1-2.5,2.3-3.2,3.5-3.3h0.6c0.2,0,0.2,0,0.2-0.2v-1.2c0-0.1,0-0.2-0.2-0.2h-7c-0.2,0-0.2,0-0.2,0.2v1.1
32+
c0,0.2,0,0.2,0.2,0.2h0.6c1.1,0.1,1.5,0.5,1.5,1.3c0,0.4-0.1,1-0.3,1.3L94,53.8l-4-9.1c-0.3-0.5-0.3-0.9-0.3-1.1
33+
c0-0.6,0.6-0.8,1.6-0.8h0.6c0.2,0,0.2,0,0.2-0.2v-1.2c0-0.1,0-0.2-0.2-0.2H81.8c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.2,0,0.2,0.2,0.2h0.6
34+
c1.3,0,1.9,0.6,2.5,2L91.2,60z"/>
35+
<path d="M70.7,40.3c-2.3,0-4.4,1.1-6,2.4v-13c0-0.4,0-0.6-0.3-0.6c-0.2,0-0.5,0-0.6,0.1c-0.8,0.3-3.4,0.7-5.9,1.1
36+
c-0.2,0-0.2,0.1-0.2,0.3v0.7c0,0.1,0.1,0.2,0.2,0.2c1.7,0.3,2.1,1,2.1,3.3v25.1l0.7-0.1l1.7-1.6l0.5-0.3c2.6,1.4,4.2,1.9,6.2,1.9
37+
c5.2,0,9.4-4.6,9.4-10.2C78.5,44.2,75.2,40.3,70.7,40.3z M69.2,58.6c-0.9,0-2-0.4-2.8-1c-1.4-1.1-1.6-1.6-1.6-4V44
38+
c1.2-0.9,1.7-1.1,3-1.1c3.7,0,6.3,3.5,6.3,8.2C74.1,55.3,72,58.6,69.2,58.6z"/>
39+
<path d="M42,59.7c2.5,0,4.4-0.7,6.2-2.9v2.4c0,0.4,0,0.6,0.3,0.6c0.2,0,0.5,0,0.6-0.1c0.8-0.3,3.3-0.7,5.9-1.1
40+
c0.2,0,0.2-0.1,0.2-0.3v-0.7c0-0.1-0.1-0.2-0.2-0.2c-1.7-0.3-2.1-1-2.1-3.3V41.4c0-0.1,0-0.2-0.2-0.2h-7.1c-0.2,0-0.2,0-0.2,0.2
41+
v1.1c0,0.2,0,0.2,0.2,0.2h0.6c1.1,0,2,0.7,2,2.7v9.3C46.7,57,45.6,58,43.9,58c-1.7,0-3.1-1.5-3.1-3.3V41.4c0-0.1,0-0.2-0.2-0.2
42+
h-7.1c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.2,0,0.2,0.2,0.2h0.6c1.1,0,2,0.7,2,2.7v9.2C36,57.7,38.6,59.7,42,59.7"/>
43+
<path d="M31.2,57.7h-0.8c-1.3,0-2.5-0.5-3.3-1.7c-0.9-1.3-1.3-2.7-3-6.2c-1.5-2.9-2.4-4.5-3.9-5.9c-0.2-0.2-0.3-0.3-0.3-0.4
44+
s0.1-0.2,0.4-0.2c4.2-1,6.4-3.3,6.4-6.7c0-4.8-4.6-7.7-12.1-7.7H0.2c-0.2,0-0.2,0-0.2,0.2v1.1c0,0.2,0,0.2,0.2,0.2h0.6
45+
c2.4,0,3.3,0.6,3.3,3.6v20.1c0,3-0.9,3.6-3.3,3.6H0.2c-0.2,0-0.2,0-0.2,0.2V59c0,0.1,0,0.2,0.2,0.2h13.6c0.2,0,0.2,0,0.2-0.2v-1.1
46+
c0-0.2,0-0.2-0.2-0.2h-0.6c-2.4,0-3.3-0.6-3.3-3.6v-9.8H14c1.1,0.8,1.6,1.5,2.8,3.8c1.5,2.9,3.1,6.3,4.9,10.8
47+
c0.1,0.2,0.2,0.3,0.5,0.3h9c0.2,0,0.2,0,0.2-0.2v-1.1C31.4,57.8,31.4,57.7,31.2,57.7z M12.1,43.1c-0.5,0-1.2,0-2.2-0.1v-9.6
48+
c0-2.9,0.7-3.4,3.2-3.4c5.3,0,7.9,2,7.9,5.9C21.1,40.3,17.6,43.1,12.1,43.1z"/>
49+
<g id="hat">
50+
<g>
51+
<path d="M117.8,29.2c2.4,1.6,4.3,2.8,6.3,3.9c0.3,0.2,0.6,0.3,0.9,0.5c5.4,3.1,10.3,5.5,15.1,7.4c1.7,0.7,3.4,1.3,4.9,1.8
52+
c0.9-2.5,2.3-5.8,4.2-9.1c2.9-5,6.4-9.1,7.9-10.7c0.4-0.4,0.3-1-0.2-1.2L119.2,0.1c-0.5-0.3-1,0-1.2,0.5
53+
c-0.6,2.1-2.4,7.2-5.3,12.2c-1.9,3.3-4.1,6.1-5.8,8.2c1.2,1.1,2.6,2.2,4,3.3C113,25.9,115.4,27.7,117.8,29.2z"/>
54+
</g>
55+
<path d="M153.3,48c-5.1,0.5-10.3-0.3-15.3-1.7c-5.8-1.6-11.3-4-16.4-7s-10-6.6-14.3-10.8c-3.6-3.6-7-7.7-9.1-12.4
56+
c-0.2-0.3,0.2-0.6,0.5-0.5c0,0,0.1,0,0.1,0.1c3.3,3.8,6.9,7.1,10.8,10.1c2.3,1.7,4.5,3.4,6.9,5c2.1,1.4,4.2,2.8,6.4,4
57+
c0.3,0.2,0.6,0.3,0.9,0.5c4.9,2.8,10,5.4,15.3,7.5c4.6,1.8,9.2,3.4,14.2,4.3h0.1C153.7,47.5,153.7,48,153.3,48z"/>
58+
</g>
59+
</g>
60+
</svg>
61+

html/layouts/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="header-wrapper">
1717
<div class="header-logo">
1818
<a href="/" title="Logo Ruby Elders">
19-
<img src="img/logo.svg" alt="Logo Ruby Elders">
19+
{{> hat }}
2020
</a>
2121
</div>
2222
<div class="header-hire">

js/function.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33

44
$(function(){
55

6-
});
6+
});

scss/includes/_header.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,23 @@
2121
}
2222
}
2323
}
24+
25+
@keyframes wave-hat {
26+
0% { transform: rotate(0deg); }
27+
30% { transform: rotate(-15deg); }
28+
60% { transform: rotate(10deg); }
29+
100% { transform: rotate(0deg); }
30+
}
31+
32+
#hat {
33+
transform-origin: center top;
34+
}
35+
36+
.header-logo:hover #hat {
37+
animation: wave-hat 1.5s ease-in-out forwards;
38+
transform-origin: center top;
39+
}
40+
41+
#logo-svg {
42+
overflow: visible;
43+
}

0 commit comments

Comments
 (0)