simple link website
digi.rip
Initial commit
+91
+1
.gitignore
+1
.gitignore
···
1
+
*.DS_Store
+17
index.html
+17
index.html
···
1
+
<!doctype html>
2
+
<html>
3
+
<head>
4
+
<title>digi.rip</title>
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<link rel="stylesheet" type="text/css" href="style.css" />
7
+
</head>
8
+
<body>
9
+
<h1>digi</h1>
10
+
<h3>allegedly human, absolutely dumb</h3>
11
+
<div class="links-container">
12
+
<a href="https://bsky.app/profile/digi.rip">talk @ bsky</a>
13
+
<a href="https://tangled.org/digi.rip">code @ tangled</a>
14
+
</div>
15
+
<script src="script.js"></script>
16
+
</body>
17
+
</html>
+12
script.js
+12
script.js
···
1
+
const links = document.querySelectorAll("a");
2
+
3
+
links.forEach((link) => {
4
+
link.addEventListener("mouseenter", () => {
5
+
const hoverSound = new Audio("assets/button_hover.ogg");
6
+
hoverSound.play();
7
+
});
8
+
link.addEventListener("mousedown", () => {
9
+
const clickSound = new Audio("assets/button_press.ogg");
10
+
clickSound.play();
11
+
});
12
+
});
+61
style.css
+61
style.css
···
1
+
/* maple-mono-latin-400-normal */
2
+
@font-face {
3
+
font-family: "Maple Mono";
4
+
font-style: normal;
5
+
font-display: swap;
6
+
font-weight: 400;
7
+
src:
8
+
url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff2)
9
+
format("woff2"),
10
+
url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff)
11
+
format("woff");
12
+
}
13
+
14
+
:root {
15
+
--main-bg: #4968f3;
16
+
--text-color: #ff9cd9;
17
+
--shadow-color: #223cb3;
18
+
--button-bg: #ff9cd9;
19
+
--button-text-color: #2a0a1e;
20
+
}
21
+
22
+
body {
23
+
text-align: center;
24
+
padding-top: 40px;
25
+
background-color: var(--main-bg);
26
+
color: var(--text-color);
27
+
font-family: "Maple Mono", sans-serif;
28
+
text-shadow: 3px 3px 0 var(--shadow-color);
29
+
}
30
+
31
+
a {
32
+
display: inline-block;
33
+
text-decoration: none;
34
+
background-color: var(--button-bg);
35
+
padding: 10px 10px;
36
+
border-radius: 30px;
37
+
color: var(--button-text-color);
38
+
box-shadow: 4px 6px 0 var(--shadow-color);
39
+
text-shadow: 0 0 0;
40
+
cursor: pointer;
41
+
}
42
+
43
+
a:hover {
44
+
color: var(--button-text-color);
45
+
transform: translateY(1px);
46
+
box-shadow: 3px 4px 0 var(--shadow-color);
47
+
}
48
+
49
+
a:active {
50
+
color: var(--button-text-color);
51
+
transform: translateY(2px);
52
+
box-shadow: 0px 0px 0 var(--shadow-color);
53
+
}
54
+
55
+
.links-container {
56
+
display: flex;
57
+
flex-direction: column;
58
+
align-items: center;
59
+
gap: 15px;
60
+
padding-top: 15px;
61
+
}