vt3e.cat
this repo has no descr,ription
vt3e.cat
feat: new uses layout
+108
-31
+1
-1
pkgs/web/src/app.ts
+1
-1
pkgs/web/src/app.ts
+8
-3
pkgs/web/src/css/base.css
+8
-3
pkgs/web/src/css/base.css
···
17
17
margin: 0;
18
18
padding: 0;
19
19
font-weight: normal;
20
+
21
+
--max-width: 1200px;
20
22
}
21
23
22
24
body {
···
88
90
}
89
91
90
92
section {
93
+
--padding: 1rem;
91
94
margin: 1rem -1rem;
92
-
padding: 1rem;
95
+
padding: var(--padding);
96
+
border-radius: 0.5rem;
93
97
94
98
&:not(.ghost) {
95
-
border-radius: 0.5rem;
96
99
background: hsla(var(--surface0) / 0.25);
97
100
border: 1px solid hsla(var(--surface0) / 0.5);
98
101
}
99
102
100
-
@media (max-width: 800px) {
103
+
@media (max-width: 1200px) {
101
104
border-radius: 0;
105
+
border-left: 1px solid transparent;
106
+
border-right: 1px solid transparent;
102
107
}
103
108
104
109
h2 {
+62
-13
pkgs/web/src/css/pages/uses.css
+62
-13
pkgs/web/src/css/pages/uses.css
···
1
1
.uses-section {
2
+
display: grid;
3
+
grid-template-columns: 40% 60%;
4
+
overflow: hidden;
5
+
padding: 0;
6
+
7
+
--border: 1px solid hsla(var(--surface1) / 0.4);
8
+
border: var(--border);
9
+
10
+
.section-header {
11
+
padding: var(--padding);
12
+
13
+
.title-group {
14
+
display: flex;
15
+
flex-direction: column;
16
+
17
+
span.badge {
18
+
align-self: flex-start;
19
+
background-color: hsla(var(--accent) / 0.1);
20
+
color: hsl(var(--accent));
21
+
padding: 0.25rem 0.5rem;
22
+
font-size: 0.75rem;
23
+
font-weight: 700;
24
+
border-radius: 5rem;
25
+
user-select: none;
26
+
}
27
+
28
+
h2 {
29
+
font-size: 2rem;
30
+
font-weight: 900;
31
+
}
32
+
}
33
+
.description {
34
+
font-size: 1rem;
35
+
color: hsl(var(--subtext1));
36
+
}
37
+
}
38
+
2
39
@media (max-width: 800px) {
3
40
border-radius: 0;
4
-
}
5
-
6
-
h2 {
7
-
font-size: 1.5rem;
8
-
margin-bottom: 1rem;
9
-
font-weight: 900;
41
+
grid-template-columns: 1fr;
42
+
padding: 0.5rem;
43
+
gap: 1rem;
44
+
border: 1px solid transparent;
45
+
div.section-header {
46
+
padding: 0;
47
+
}
48
+
.uses-table {
49
+
border: 1px solid hsla(var(--surface1) / 0.4);
50
+
border-radius: 0.5rem;
51
+
}
10
52
}
11
53
12
54
.uses-table {
13
55
width: 100%;
14
56
border-collapse: separate;
15
57
border-spacing: 0;
16
-
border: 1px solid hsla(var(--surface1) / 0.4);
17
-
border-radius: 0.5rem;
18
58
overflow: hidden;
59
+
border: 1px solid transparent;
60
+
/*border-left: var(--border);*/
61
+
table-layout: fixed;
19
62
20
63
* {
21
64
transition: none;
22
65
}
23
66
24
-
thead {
25
-
border-bottom: 2px solid hsla(var(--surface1) / 0.5);
67
+
th:first-child,
68
+
td:first-child {
69
+
width: 40%;
70
+
}
71
+
72
+
th:last-child,
73
+
td:last-child {
74
+
width: 60%;
26
75
}
27
76
28
77
th {
···
32
81
font-size: 0.9rem;
33
82
color: hsl(var(--subtext1));
34
83
background-color: hsla(var(--surface1) / 0.2);
35
-
border-right: 1px solid hsla(var(--surface1) / 0.3);
84
+
/*border-right: 1px solid hsla(var(--surface1) / 0.3);*/
36
85
37
86
&:last-child {
38
87
border-right: none;
···
44
93
color: hsl(var(--text));
45
94
font-size: 1rem;
46
95
font-weight: 500;
47
-
border-right: 1px solid hsla(var(--surface1) / 0.3);
48
-
border-bottom: 1px solid hsla(var(--surface0) / 0.3);
96
+
/*border-right: 1px solid hsla(var(--surface1) / 0.3);*/
97
+
/*border-bottom: 1px solid hsla(var(--surface0) / 0.3);*/
49
98
50
99
&:last-child {
51
100
border-right: none;
+36
-13
pkgs/web/src/pages/uses-page.ts
+36
-13
pkgs/web/src/pages/uses-page.ts
···
8
8
label: string;
9
9
value: string;
10
10
subtext?: string;
11
+
link?: string;
11
12
}
12
13
13
14
interface UseSection {
14
15
title: string;
16
+
purpose?: string;
17
+
description?: string;
18
+
category?: "hardware" | "software";
15
19
items: UseItem[];
16
20
}
17
21
···
21
25
22
26
private sections: UseSection[] = [
23
27
{
24
-
title: "desktop",
28
+
title: "dahlia",
29
+
description: "my main daily driver desktop computer",
30
+
category: "hardware",
25
31
items: [
32
+
{ label: "purpose", value: "desktop" },
26
33
{ label: "hostname", value: "dahlia" },
27
34
{ label: "operating system", value: "nixos 25.05" },
28
-
{ label: "window manager", value: "niri" },
29
-
{ label: "terminal", value: "foot" },
30
-
{ label: "shell", value: "fish" },
31
-
{ label: "browser", value: "firefox" },
32
-
{ label: "editor", value: "zed" },
33
-
{ label: "theme", value: "catppuccin" },
34
-
{ label: "runner", value: "vicinae" },
35
-
{ label: "bar", value: "waybar" },
36
35
{ label: "ram", value: "16gb" },
37
36
{ label: "cpu", value: "intel core i5-3470" },
38
37
{ label: "gpu", value: "rx 6400" },
39
38
],
40
39
},
41
40
{
42
-
title: "server one",
41
+
title: "ivy",
42
+
description:
43
+
"my home server that hosts immich, my atproto pds, this website, and some other things",
44
+
category: "hardware",
45
+
items: [
46
+
{ label: "purpose", value: "server" },
47
+
{ label: "operating system", value: "nixos 25.05" },
48
+
{ label: "model", value: "hp proliant dl360 g9" },
49
+
{ label: "ram", value: "32gb" },
50
+
{ label: "cpu", value: "intel xeon e5-2620 v4 x2" },
51
+
],
52
+
},
53
+
{
54
+
title: "azalea",
55
+
description:
56
+
"my [deprecated] home server that used to host my pds and website before ivy took over, it's now used for miscellaneous tasks",
57
+
category: "hardware",
43
58
items: [
59
+
{ label: "purpose", value: "server" },
44
60
{ label: "hostname", value: "azalea" },
45
61
{ label: "operating system", value: "nixos 25.05" },
46
-
{ label: "web server", value: "caddy" },
47
-
{ label: "shell", value: "bash" },
62
+
{ label: "model", value: "raspberry pi 4b" },
48
63
{ label: "ram", value: "8gb" },
49
64
{ label: "cpu", value: "cortex-a72" },
50
65
],
51
66
},
52
67
{
53
68
title: "phone",
69
+
description: "my daily driver phone",
70
+
category: "hardware",
54
71
items: [
55
72
{ label: "model", value: "pixel 9a", subtext: "google" },
56
73
{ label: "os", value: "android 16" },
···
73
90
private renderSection(section: UseSection) {
74
91
return html`
75
92
<section class="uses-section ghost">
76
-
<h2>${section.title}</h2>
93
+
<div class="section-header">
94
+
<div class="title-group">
95
+
<span class="badge">${section.category}</span>
96
+
<h2>${section.title}</h2>
97
+
</div>
98
+
${section.description ? html`<p class="description">${section.description}</p>` : ""}
99
+
</div>
77
100
<table class="uses-table">
78
101
<thead>
79
102
<tr>