my website
bunch of restructuring
+95
-34
+1
src/discord.html
+1
src/discord.html
+84
-29
src/index.html
+84
-29
src/index.html
···
6
6
<title>website of chfour official website</title>
7
7
<link rel="stylesheet" href="style.css">
8
8
<style>
9
-
img { filter: drop-shadow(0 0 5px #ccc); }
9
+
#fops {
10
+
height: auto;
11
+
max-width: 100%;
12
+
margin-block: 2em;
13
+
filter: drop-shadow(0 0 5px #ccc);
14
+
}
10
15
@media (prefers-color-scheme: dark) {
11
-
img { filter: drop-shadow(0 0 5px #f2f2f277); }
16
+
#fops { filter: drop-shadow(0 0 5px #f2f2f277); }
12
17
}
13
18
:root {
14
19
display: flex;
15
20
align-items: flex-end;
16
21
min-height: 100vh;
17
22
}
18
-
#src {
23
+
body { line-height: initial; }
24
+
25
+
#timenow { font-feature-settings: "tnum"; }
26
+
27
+
footer a {
19
28
text-decoration: none;
20
-
color: inherit;
21
-
opacity: 0.5;
29
+
color: inherit !important;
30
+
opacity: 0.7;
22
31
transition: opacity 200ms;
23
32
}
24
-
#src:is(:hover, :focus-visible) {
33
+
footer a:is(:hover, :focus-visible) {
25
34
opacity: 1;
26
35
}
27
-
#src code {
36
+
footer a code {
28
37
white-space: normal;
29
38
word-break: break-all;
30
39
font: inherit;
31
40
}
32
-
#timenow { font-feature-settings: "tnum"; }
41
+
42
+
#links {
43
+
display: flex;
44
+
flex-wrap: wrap;
45
+
gap: 1em;
46
+
}
47
+
#links > * > div {
48
+
display: inline-flex;
49
+
flex-direction: column;
50
+
}
51
+
#links > * > div > * { width: max-content; }
52
+
#links a { font-weight: bold; }
53
+
#links > * > div > :nth-child(2) { font-size: 0.8em; }
33
54
</style>
34
55
</head>
35
56
<body>
36
57
<article>
37
-
<img src="platinum_fop_45_o.svg" alt="" width="250" height="250" style="margin-block: 2em; max-width: 100%; height: auto;">
38
-
<p>from PCBs to webdev: jack of Too Many trades, master of none</p>
39
-
<p>(linux stuff, nix, c, python, html+css+js, AVRs...)</p>
40
-
<p>+ trains, very amateur photography, and radio</p>
41
-
<p>high ambitions, low energy, hoarder of junk</p>
42
-
<p>exceptionally uncreative</p>
43
-
<p>gender outage (any pronouns)</p>
44
-
<p>furry, ΘΔ [platinum] fox</p>
45
-
<p>19 years old and counting</p>
46
-
<p>from Silesia, Poland<span id="timenow"></span></p>
47
-
<ul class="inline-list">
48
-
<li style="display: block;">known as <b>chfour</b></li>
49
-
<li><a rel="me" href="https://wetdry.world/@chfour">fediverse</a></li>
50
-
<li><a href="https://github.com/chfour">github</a></li>
51
-
<li><a href="https://matrix.to/#/@chfour:eeep.ee">matrix</a></li>
52
-
<li><a href="discord.html">discord</a></li>
53
-
<li><a href="https://files.eeep.ee/">file dump</a></li>
54
-
</ul>
58
+
<img id="fops" src="platinum_fop_45_o.svg" alt="" width="250" height="250">
59
+
<main>
60
+
<ul class="inline-list slashed" style="max-width: 30rem; line-height: 1.5; text-align: justify;">
61
+
<li>Linux, Nix & NixOS</li>
62
+
<li>C, Python, HTML+CSS and co</li>
63
+
<li>electronics, "embedded" & test gear</li>
64
+
<li>RF (incl. amateur radio)</li>
65
+
<li>time and frequency metrology</li>
66
+
<li>trains and almost everything surrounding trains</li>
67
+
<li>very amateur photography</li>
68
+
</ul>
69
+
70
+
<p>high ambitions, low energy, hoarder of junk</p>
71
+
<p>exceptionally uncreative</p>
72
+
<p>gender outage (any pronouns). some flavor of queer. taken <3</p>
73
+
<p>ΘΔ [platinum] fox, furry</p>
74
+
<p>19 years old and counting</p>
75
+
<p>from Silesia, Poland<span id="timenow"></span></p>
76
+
77
+
<p>known as <b>chfour</b></p>
78
+
79
+
<ul class="inline-list" id="links">
80
+
<li>
81
+
<div>
82
+
<a rel="me" href="https://wetdry.world/@chfour">fediverse</a>
83
+
<span>@chfour@wetdry.world</span>
84
+
</div>
85
+
</li>
86
+
<li>
87
+
<div>
88
+
<a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">signal</a>
89
+
<span>chfour.32</span>
90
+
</div>
91
+
</li>
92
+
<li>
93
+
<div>
94
+
<a href="discord.html">discord</a>
95
+
<span>ch4</span>
96
+
</div>
97
+
</li>
98
+
<li>
99
+
<div>
100
+
<a href="https://github.com/chfour" title="chfour">github</a>
101
+
<span>chfour</span>
102
+
</div>
103
+
</li>
104
+
<li>
105
+
<div>
106
+
<a href="https://files.eeep.ee/">file dump</a>
107
+
<span>files.eeep.ee</span>
108
+
</div>
109
+
</li>
110
+
</ul>
111
+
</main>
55
112
<footer>
56
113
<a id="src" href="https://github.com/chfour/website3" aria-label="website source" title="website source">
57
114
<code>/nix/store/VERY5p3c14lsecretv4luereplaceme0-chfour-website</code>
···
63
120
const formatter = new Intl.DateTimeFormat("pl-PL", {timeZone: "Europe/Warsaw", timeStyle: "short"});
64
121
// won't be *totally perfectly exact*
65
122
// but with window.requestAnimationFrame() it made my cpu usage go up by some 10% no joke
66
-
const update = () => {
67
-
timenow.textContent = ` (${formatter.format(new Date())}\u00a0right\u00a0now)`;
68
-
}
123
+
const update = () => timenow.textContent = ` (${formatter.format(new Date())})`;
69
124
update(); setInterval(update, 5000);
70
125
</script>
71
126
</body>
+10
-5
src/style.css
+10
-5
src/style.css
···
18
18
}
19
19
/* todo: non-fast variants and generating this from the nix stuff too maybe lol */
20
20
21
+
:root { color-scheme: light dark; }
22
+
21
23
body {
22
24
background-color: #f2f2f2;
23
25
color: black;
26
+
24
27
font-family: 'Inter', sans-serif;
25
28
font-optical-sizing: auto;
29
+
line-height: 1.5;
30
+
26
31
margin: 0;
27
32
}
28
33
···
36
41
@media (prefers-color-scheme: dark) {
37
42
body {
38
43
background-color: #1a1a1a;
39
-
color: #f2f2f2;
44
+
color: white;
40
45
}
41
46
a { color: #aaf; }
42
47
a:visited { color: #fbf; }
···
48
53
list-style-type: none;
49
54
padding-left: 0;
50
55
}
51
-
.inline-list > * {
52
-
display: inline;
53
-
white-space: nowrap;
56
+
.inline-list > * { display: inline; }
57
+
.inline-list.slashed > :not(:first-child)::before {
58
+
content: ' / ';
59
+
padding-inline: 0.25em;
54
60
}
55
-