simple link website
digi.rip
add sticky footer and update project card styling
+61
-25
+35
-24
index.html
+35
-24
index.html
···
7
7
<link rel="stylesheet" type="text/css" href="style.css" />
8
8
</head>
9
9
<body>
10
-
<h1>digi.rip</h1>
11
-
<h3>allegedly human, absolutely dumb</h3>
12
-
<div class="links-container">
13
-
<a href="https://bsky.app/profile/digi.rip">talk @ bsky</a>
14
-
<a href="https://tangled.org/digi.rip">code @ tangled</a>
15
-
</div>
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>
10
+
<div style="flex: 1">
11
+
<h1>digi.rip</h1>
12
+
<h3>allegedly human, absolutely dumb</h3>
13
+
<div class="links-container">
14
+
<a href="https://bsky.app/profile/digi.rip" class="button"
15
+
>talk @ bsky</a
16
+
>
17
+
<a href="https://tangled.org/digi.rip" class="button"
18
+
>code @ tangled</a
19
+
>
20
+
</div>
21
+
<div class="cute-break">~~~~~~~~~~~~~~~~~~</div>
22
+
<div class="projects-container">
23
+
<a
24
+
class="project-card"
25
+
href="https://tangled.org/digi.rip/tachyon"
26
+
style="--card-bg: #ff9085; --card-text: #3b0708"
27
+
>
28
+
<span class="project-name">
29
+
<span>tachyon</span>
30
+
<span>🧠</span>
31
+
</span>
32
+
<span class="project-desc">
33
+
<span>brainfuck interpreter</span>
34
+
<span class="lang-tags">
35
+
<span class="lang-tag">rs</span>
36
+
</span>
32
37
</span>
33
-
</span>
34
-
</a>
38
+
</a>
39
+
</div>
35
40
</div>
41
+
<footer>
42
+
<p>
43
+
hosted @ <a href="https://wisp.place/">wisp.place</a><br />
44
+
<a href="https://tangled.org/digi.rip/website">source</a>
45
+
</p>
46
+
</footer>
36
47
</body>
37
48
</html>
+26
-1
style.css
+26
-1
style.css
···
17
17
--shadow-color: #223cb3;
18
18
--button-bg: #ff9cd9;
19
19
--button-text-color: #2a0a1e;
20
+
--footer-link-color: #f3d449;
20
21
}
21
22
22
23
body {
24
+
display: flex;
25
+
flex-direction: column;
26
+
min-height: 100vh;
27
+
box-sizing: border-box;
28
+
padding-left: 16px;
29
+
padding-right: 16px;
30
+
margin: 0;
23
31
text-align: center;
24
32
padding-top: 40px;
33
+
padding-bottom: 12px;
25
34
background-color: var(--main-bg);
26
35
color: var(--text-color);
27
36
font-family:
···
30
39
text-shadow: 3px 3px 0 var(--shadow-color);
31
40
}
32
41
42
+
footer {
43
+
display: flex;
44
+
flex-direction: column;
45
+
min-height: 2vh;
46
+
margin: 1rem;
47
+
}
48
+
49
+
footer a {
50
+
all: unset;
51
+
color: var(--footer-link-color);
52
+
}
53
+
54
+
footer p {
55
+
margin: 0;
56
+
}
57
+
33
58
@keyframes wobble {
34
59
from {
35
60
transform: rotateZ(-3deg);
···
59
84
.links-container {
60
85
display: flex;
61
86
flex-direction: row;
87
+
flex-wrap: wrap;
62
88
justify-content: center;
63
89
gap: 15px;
64
90
padding-top: 15px;
···
120
146
121
147
.lang-tags {
122
148
display: flex;
123
-
/*margin: auto;*/
124
149
gap: 4px;
125
150
}
126
151