my website
add button stuff that i partially committed last time oops
+73
-9
+2
Caddyfile
+2
Caddyfile
+69
-9
src/index.html
+69
-9
src/index.html
···
41
41
gap: 1em;
42
42
max-width: 30rem;
43
43
}
44
-
#links > li > :first-child {
44
+
#links > li > a, details > summary {
45
45
display: inline-flex;
46
46
flex-direction: column;
47
47
text-decoration: none;
48
48
color: inherit;
49
49
}
50
-
#links > li > :first-child > * { width: max-content; }
51
-
#links > li > :first-child > :first-child {
50
+
#links > li > a > * { width: max-content; }
51
+
:is(#links > li > a, details > summary) > :first-child {
52
52
font-weight: bold;
53
53
color: var(--color-link);
54
54
}
55
-
#links > li > :first-child > :nth-child(2) {
55
+
:is(#links > li > a, details > summary) > :nth-child(2) {
56
56
font-size: 0.8em;
57
57
}
58
+
details {
59
+
margin-block: 1rem;
60
+
}
61
+
details > summary {
62
+
cursor: pointer;
63
+
}
64
+
details > summary > :first-child {
65
+
display: list-item;
66
+
list-style-type: disclosure-closed;
67
+
}
68
+
details[open] > summary > :first-child {
69
+
list-style-type: disclosure-open;
70
+
}
71
+
details > :nth-child(2) {
72
+
margin-top: 1rem;
73
+
}
74
+
.button > img {
75
+
image-rendering: pixelated;
76
+
}
77
+
.button {
78
+
transition: 0.1s cubic-bezier(0,1,0,1) transform;
79
+
}
80
+
.button:active {
81
+
transform: translateY(0.2rem);
82
+
}
83
+
.buttons {
84
+
display: flex;
85
+
flex-wrap: wrap;
86
+
gap: 0.2rem;
87
+
max-width: 30rem;
88
+
margin-block: 1rem;
89
+
}
90
+
.button.placeholder {
91
+
width: 88px; height: 31px;
92
+
display: block;
93
+
border: 2px dashed #aaa;
94
+
box-sizing: border-box;
95
+
}
58
96
</style>
59
97
60
98
<link rel="me" href="https://wetdry.world/@chfour"> <!-- old fedi acc -->
···
72
110
<li>very amateur photography</li>
73
111
</ul>
74
112
75
-
<p>high ambitions, low energy, hoarder of junk</p>
76
113
<p>exceptionally uncreative</p>
77
114
<p>gender outage, (she|it)>they, some flavor(s) of queer. taken <3</p>
78
115
<p>ΘΔ [platinum] fox, furry</p>
···
110
147
<span>"blog"</span>
111
148
<span>& rants & projects</span>
112
149
</a></li>
113
-
<li><details>
114
-
<summary>buttons</summary>
115
-
<img src="button" width="88" height="31" alt="chfour">
116
-
</details></li>
117
150
</ul>
151
+
<details>
152
+
<summary>
153
+
<span>buttons</span>
154
+
<span>little link rectangles</span>
155
+
</summary>
156
+
157
+
<span class="buttons" style="gap: 1rem; align-items: center;">
158
+
<a href="#" class="button" id="mybutton"><img src="button" width="88" height="31" alt="chfour"></a>
159
+
<span>←</span>
160
+
<span>
161
+
me! click to copy<noscript><strong> (requires javascript lol)</strong></noscript>
162
+
<br><span style="font-size: 0.8em;">hotlinking ok, or do whatever really lol</span>
163
+
</span>
164
+
</span>
165
+
<span class="buttons">
166
+
<span class="button placeholder"></span>
167
+
<span class="button placeholder"></span>
168
+
<span class="button placeholder"></span>
169
+
<span class="button placeholder"></span>
170
+
<span class="button placeholder"></span>
171
+
<span class="button placeholder"></span>
172
+
</span>
173
+
</details>
118
174
</main>
119
175
<footer>
120
176
<a id="src" href="https://tangled.org/eeep.ee/website3" aria-label="website source" title="website source">
···
122
178
</a>
123
179
</footer>
124
180
<script>
181
+
document.querySelector('#mybutton').addEventListener('click', (ev) => {
182
+
navigator.clipboard.writeText('<img src="https:/eeep.ee/button" width="88" height="31">');
183
+
ev.preventDefault();
184
+
});
125
185
const timenow = document.getElementById("timenow");
126
186
const formatter = new Intl.DateTimeFormat("pl-PL", {timeZone: "Europe/Warsaw", timeStyle: "short"});
127
187
// won't be *totally perfectly exact*