Personal Site
Add proper borders between segments on desktop and mobile
+66
-17
src/assets/box-lr.png
src/assets/box-lr.png
This is a binary file and will not be displayed.
src/assets/box-tb.png
src/assets/box-tb.png
This is a binary file and will not be displayed.
src/assets/line.png
src/assets/line.png
This is a binary file and will not be displayed.
+2
src/components/Header.astro
+2
src/components/Header.astro
+33
-10
src/components/home/Landing.astro
+33
-10
src/components/home/Landing.astro
···
3
3
4
4
import boxRoundedTop from "/assets/box-rounded-top.png";
5
5
import boxCircleMask from "/assets/box-circle-mask.png";
6
+
import line from "/assets/line.png";
6
7
7
8
const avatar = await fetch(
8
9
"https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" +
···
22
23
});
23
24
---
24
25
25
-
<section class="landing">
26
+
<section
27
+
class="landing"
28
+
style={`--line-png: url("${line.src}");
29
+
--box-rounded-top-png: url("${boxRoundedTop.src}");
30
+
--box-circle-mask-png: url("${boxCircleMask.src}");`}
31
+
>
26
32
<h2>Hello World 🏳️⚧️</h2>
27
-
<figure style={`--box-rounded-top-png: url("${boxRoundedTop.src}")`}>
28
-
<img
29
-
src={avatar ?? "http://undefined"}
30
-
alt=""
31
-
style={`--box-circle-mask-png: url("${boxCircleMask.src}")`}
32
-
/>
33
+
<figure>
34
+
<img src={avatar ?? "http://undefined"} alt="" />
33
35
<figcaption>bsky pfp</figcaption>
34
36
</figure>
35
37
<p>
36
-
Hi! I'm Kai/Nico/Alex/Jen [she/it] (non binary) and I make silly websites!
37
-
I'm a big fan of progressive enhancement, open source, and linux. (I use
38
-
arch btw)
38
+
<!-- todo update this content -->
39
+
Hi! I'm Kai<wbr />/<wbr />Nico<wbr />/<wbr />Alex<wbr />/<wbr />Jen [she<wbr
40
+
/>/<wbr />it] (non binary) and I make silly websites! I'm a big fan of
41
+
progressive enhancement, open source, and linux. (I use arch btw)
39
42
</p>
40
43
<p>
41
44
My preferred tools are vanilla html/css, typescript, vite, astro, svelte,
···
47
50
section {
48
51
padding: 10px;
49
52
height: fit-content;
53
+
z-index: 1;
54
+
55
+
/* desktop border image */
56
+
@media not (max-width: 90ch) {
57
+
position: relative;
58
+
z-index: 0;
59
+
&::before {
60
+
content: "";
61
+
display: block;
62
+
image-rendering: pixelated;
63
+
background-image: var(--line-png);
64
+
background-size: 60px;
65
+
z-index: -1;
66
+
width: 50vw;
67
+
height: 20px;
68
+
position: absolute;
69
+
bottom: -20px;
70
+
right: -50px;
71
+
}
72
+
}
50
73
}
51
74
52
75
figure {
+13
-3
src/components/home/feeds/Feeds.astro
+13
-3
src/components/home/feeds/Feeds.astro
···
8
8
import IconTumblr from "/assets/icons/Tumblr.svg";
9
9
import IconGit from "/assets/icons/Git.svg";
10
10
import IconGithub from "/assets/icons/GitHub.svg";
11
+
import boxLR from "/assets/box-lr.png";
11
12
12
13
const tabs: {
13
14
id: string;
···
22
23
];
23
24
---
24
25
25
-
<section class="feeds">
26
+
<section class="feeds" style={`--box-lr-png: url("${boxLR.src}");`}>
26
27
<!-- tabindex -1 disables tabbing onto this element
27
28
tabbing is disabled because when the element overflows its focusable
28
29
to scrub across children etc. which is a logical default
···
53
54
<div class="feed-contents">
54
55
{
55
56
tabs.map((tab) => (
56
-
<div class="content" data-tab={tab.id} id={"tab-" + tab.id}>
57
+
<div class="content" data-tab={tab.id}>
57
58
<tab.content />
58
59
</div>
59
60
))
···
68
69
set:html={tabs
69
70
.map(
70
71
({ id }) =>
71
-
`#tab-container:has([data-tab-for="${id}"]:checked) + .feed #tab-${id} { /* show relevant tab */ }`,
72
+
`#tab-container:has([data-tab-for="${id}"]:checked) + .feed-contents [data-tab="${id}"] { /* show relevant tab */ }`,
72
73
)
73
74
.join("\n")}
74
75
></style>
···
84
85
@media (max-width: 90ch) {
85
86
height: 600px;
86
87
}
88
+
89
+
z-index: 0;
90
+
91
+
image-rendering: pixelated;
92
+
border-image-source: var(--box-lr-png);
93
+
border-image-slice: 0 10 fill;
94
+
border-image-width: 0 20px;
95
+
border-image-outset: 10000px 20px;
96
+
border-image-repeat: round;
87
97
}
88
98
89
99
/* tab menu */
+18
src/components/home/playing/NowPlaying.astro
+18
src/components/home/playing/NowPlaying.astro
···
7
7
import mp3HeadCircle from "/assets/mp3/head-circle.png";
8
8
import mp3PlaybackHead from "/assets/mp3/playback-head.png";
9
9
import boxTlbr from "/assets/box-tlbr.png";
10
+
import boxTB from "/assets/box-tb.png";
10
11
import popoutSpeech from "/assets/popout-speech.png";
11
12
import smallBoxMask from "/assets/small-box-mask.png";
12
13
import type { PlaybackState, Track } from "@spotify/web-api-ts-sdk";
···
28
29
--mp3-head-circle-png: url(${mp3HeadCircle.src});
29
30
--mp3-playback-head-png: url(${mp3PlaybackHead.src});
30
31
--box-tlbr-png: url("${boxTlbr.src}");
32
+
--box-tb-png: url("${boxTB.src}");
31
33
--popout-speech-png: url("${popoutSpeech.src}");
32
34
--small-box-mask-png: url("${smallBoxMask.src}");
33
35
`}
···
204
206
}
205
207
}
206
208
209
+
.playing {
210
+
z-index: 2;
211
+
212
+
/* mobile border image */
213
+
@media (max-width: 90ch) {
214
+
image-rendering: pixelated;
215
+
border-image-source: var(--box-tb-png);
216
+
border-image-slice: 10 0 fill;
217
+
border-image-width: 20px 0;
218
+
border-image-outset: 20px 10000px;
219
+
border-image-repeat: round;
220
+
}
221
+
}
222
+
207
223
.player {
208
224
/* internal and external nodes dont affect each other
209
225
children dont affect this size
···
319
335
320
336
background-image: var(--mp3-base-png);
321
337
background-size: contain;
338
+
339
+
z-index: -99999
322
340
}
323
341
324
342
.player:focus,