simple link website
digi.rip
add project cards and improve link hover styles
- replace static link hover animations with CSS transitions
- added a tachyon project card with language tags
- update font fallback to include emoji fonts
- add charset meta tag and section break divider
+121
-31
+21
-1
index.html
+21
-1
index.html
···
1
1
<!doctype html>
2
2
<html>
3
3
<head>
4
+
<meta charset="utf-8" />
4
5
<title>digi.rip</title>
5
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
7
<link rel="stylesheet" type="text/css" href="style.css" />
···
12
13
<a href="https://bsky.app/profile/digi.rip">talk @ bsky</a>
13
14
<a href="https://tangled.org/digi.rip">code @ tangled</a>
14
15
</div>
15
-
<script src="script.js"></script>
16
+
<div class="cute-break">~~~~~~~~~~~~~~~~~~~~~~~</div>
17
+
<div class="projects-container">
18
+
<a
19
+
class="project-card"
20
+
href="https://tangled.org/digi.rip/tachyon"
21
+
style="--card-bg: #ff9085; --card-text: #3b0708"
22
+
>
23
+
<span class="project-name">
24
+
<span>tachyon</span>
25
+
<span>🦀</span>
26
+
</span>
27
+
<span class="project-desc">
28
+
<span>brainfuck interpreter</span>
29
+
<span class="lang-tags">
30
+
<span class="lang-tag">rust</span>
31
+
<span class="lang-tag">brainfuck</span>
32
+
</span>
33
+
</span>
34
+
</a>
35
+
</div>
16
36
</body>
17
37
</html>
+100
-30
style.css
+100
-30
style.css
···
24
24
padding-top: 40px;
25
25
background-color: var(--main-bg);
26
26
color: var(--text-color);
27
-
font-family: "Maple Mono", sans-serif;
27
+
font-family:
28
+
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
29
+
"Noto Color Emoji", sans-serif;
28
30
text-shadow: 3px 3px 0 var(--shadow-color);
29
31
}
30
32
···
37
39
}
38
40
}
39
41
40
-
@keyframes hover {
41
-
from {
42
-
box-shadow: 4px 6px 0 var(--shadow-color);
43
-
transform: translateY(0px);
44
-
}
45
-
to {
46
-
box-shadow: 3px 4px 0 var(--shadow-color);
47
-
transform: translateY(1px);
48
-
}
49
-
}
50
-
51
-
@keyframes press {
52
-
from {
53
-
box-shadow: 3px 4px 0 var(--shadow-color);
54
-
transform: translateY(1px);
55
-
}
56
-
to {
57
-
box-shadow: -1.2px -1.2px 0 var(--shadow-color);
58
-
transform: translateY(2px);
59
-
}
60
-
}
61
-
62
42
h3 {
43
+
transform-origin: bottom;
63
44
animation: wobble 2s alternate infinite;
64
45
}
65
46
···
75
56
cursor: pointer;
76
57
}
77
58
78
-
a:hover {
79
-
animation: hover 0.1s forwards;
59
+
.links-container {
60
+
display: flex;
61
+
flex-direction: row;
62
+
justify-content: center;
63
+
gap: 15px;
64
+
padding-top: 15px;
80
65
}
81
66
82
-
a:active {
83
-
animation: press 0.1s forwards;
67
+
.links-container a {
68
+
transition:
69
+
box-shadow 0.3s,
70
+
transform 0.3s;
84
71
}
85
72
86
-
.links-container {
73
+
.links-container a:hover {
74
+
box-shadow: 3px 4px 0 var(--shadow-color);
75
+
transform: translateY(1px);
76
+
transition:
77
+
box-shadow 0.1s,
78
+
transform 0.1s;
79
+
}
80
+
81
+
.links-container a:active {
82
+
box-shadow: 0px 0px 0 var(--shadow-color);
83
+
transform: translateY(2px);
84
+
transition:
85
+
box-shadow 0.05s,
86
+
transform 0.05s;
87
+
}
88
+
89
+
.cute-break {
90
+
text-align: center;
91
+
font-size: 2rem;
92
+
margin-top: 1rem;
93
+
margin-bottom: 1rem;
94
+
overflow: hidden;
95
+
max-width: 100%;
96
+
}
97
+
98
+
.projects-container {
87
99
display: flex;
88
100
flex-direction: column;
101
+
102
+
margin-inline-start: 15%;
103
+
margin-inline-end: 15%;
104
+
}
105
+
106
+
.project-name {
107
+
display: flex;
108
+
justify-content: space-between;
89
109
align-items: center;
90
-
gap: 15px;
91
-
padding-top: 15px;
110
+
font-size: 1.5rem;
111
+
}
112
+
113
+
.project-desc {
114
+
display: flex;
115
+
flex-direction: row;
116
+
justify-content: space-between;
117
+
align-items: center;
118
+
gap: 4px;
119
+
flex-wrap: wrap;
120
+
}
121
+
122
+
.lang-tags {
123
+
display: flex;
124
+
gap: 4px;
125
+
}
126
+
127
+
.lang-tag {
128
+
font-size: 0.75rem;
129
+
padding: 2px 8px;
130
+
border-radius: 10px;
131
+
background-color: rgba(0, 0, 0, 0.1);
132
+
}
133
+
134
+
.project-card {
135
+
display: flex;
136
+
flex-direction: column;
137
+
gap: 6px;
138
+
padding: 20px;
139
+
text-align: left;
140
+
background-color: var(--card-bg, var(--button-bg));
141
+
color: var(--card-text, var(--button-text-color));
142
+
box-shadow: 4px 6px 0 var(--card-shadow, var(--shadow-color));
143
+
transition:
144
+
transform 0.3s,
145
+
box-shadow 0.3s;
146
+
}
147
+
148
+
.project-card:hover {
149
+
box-shadow: 3px 4px 0 var(--card-shadow, var(--shadow-color));
150
+
transform: translateY(1px);
151
+
transition:
152
+
box-shadow 0.1s,
153
+
transform 0.1s;
154
+
}
155
+
156
+
.project-card:active {
157
+
box-shadow: 0px 0px 0 var(--card-shadow, var(--shadow-color));
158
+
transform: translateY(2px);
159
+
transition:
160
+
box-shadow 0.05s,
161
+
transform 0.05s;
92
162
}