open source is social v-it.org
add vitality hover easter egg to site title
Hovering (desktop) or tapping (mobile) the "vit" heading on v-it.org
smoothly fades in "ality" in light grey, revealing the word "vitality."
+28
-1
+28
-1
docs/index.html
+28
-1
docs/index.html
···
28
28
margin: 0;
29
29
font-size: 2rem;
30
30
line-height: 1.2;
31
+
cursor: default;
32
+
}
33
+
34
+
.egg {
35
+
opacity: 0;
36
+
transition: opacity 200ms ease;
37
+
color: #9ca3af;
38
+
}
39
+
40
+
header h1:hover .egg {
41
+
opacity: 1;
42
+
}
43
+
44
+
header h1.tapped .egg {
45
+
opacity: 1;
31
46
}
32
47
33
48
.tagline {
···
142
157
<div class="container">
143
158
<header>
144
159
<div class="header-bar">
145
-
<h1>vit</h1>
160
+
<h1>vit<span class="egg">ality</span></h1>
146
161
<nav>
147
162
<a href="#">home</a>
148
163
<a href="#doctrine">doctrine</a>
···
232
247
233
248
window.addEventListener('hashchange', navigate);
234
249
navigate();
250
+
251
+
// Easter egg tap toggle
252
+
document.querySelector('header h1').addEventListener('touchstart', function(e) {
253
+
this.classList.toggle('tapped');
254
+
});
255
+
256
+
document.addEventListener('touchstart', function(e) {
257
+
const h1 = document.querySelector('header h1');
258
+
if (!h1.contains(e.target)) {
259
+
h1.classList.remove('tapped');
260
+
}
261
+
});
235
262
</script>
236
263
</body>
237
264
</html>