vt3e.cat
this repo has no descr,ription
vt3e.cat
feat: slight style changes for uses item rows
+135
-16
+24
pkgs/web/src/components/Card/CardLayout.vue
+24
pkgs/web/src/components/Card/CardLayout.vue
···
119
119
</div>
120
120
121
121
<div class="card-body">
122
+
<aside class="card-intro">
123
+
<slot name="intro" />
124
+
</aside>
122
125
<slot />
123
126
</div>
124
127
</div>
···
250
253
flex-grow: 1;
251
254
min-height: 0;
252
255
padding: 1rem;
256
+
}
257
+
258
+
.card-intro {
259
+
margin-bottom: 1.5rem;
260
+
padding-bottom: 1rem;
261
+
border-bottom: 1px solid hsla(var(--overlay1) / 0.25);
262
+
263
+
:deep(h2) {
264
+
margin-top: 0;
265
+
font-size: 1.5rem;
266
+
font-weight: 900;
267
+
}
268
+
:deep(p) {
269
+
font-size: 1rem;
270
+
line-height: 1.6;
271
+
color: hsl(var(--text));
272
+
}
273
+
:deep(.meta) {
274
+
font-size: 0.875rem;
275
+
color: hsl(var(--subtext0));
276
+
}
253
277
}
254
278
255
279
@media (max-width: 600px) {
+9
pkgs/web/src/views/GalleryView.vue
+9
pkgs/web/src/views/GalleryView.vue
+102
-16
pkgs/web/src/views/UsesView.vue
+102
-16
pkgs/web/src/views/UsesView.vue
···
63
63
{ label: 'os', value: 'android 16' },
64
64
],
65
65
},
66
+
{
67
+
title: 'software',
68
+
description: 'the tools i use to build (and break) things',
69
+
category: 'software',
70
+
items: [
71
+
{
72
+
label: 'theme',
73
+
value: 'catppuccin',
74
+
link: 'https://catppuccin.com/',
75
+
subtext: 'mocha or latte in the mornings :3',
76
+
},
77
+
{
78
+
label: 'editor',
79
+
value: 'zed',
80
+
link: 'https://zed.dev/',
81
+
},
82
+
{
83
+
label: 'terminal',
84
+
value: 'foot',
85
+
link: 'https://codeberg.org/dnkl/foot',
86
+
},
87
+
{
88
+
label: 'browser',
89
+
value: 'zen',
90
+
link: 'https://zen-browser.app/',
91
+
},
92
+
{
93
+
label: 'window manager',
94
+
value: 'niri',
95
+
link: 'https://github.com/YaLTeR/niri',
96
+
},
97
+
{
98
+
label: 'shell',
99
+
value: 'fish',
100
+
link: 'https://fishshell.com/',
101
+
},
102
+
],
103
+
},
66
104
]
105
+
const lastUpdated = '2025-12-31'
106
+
const formattedLastUpdated = new Date(lastUpdated).toLocaleDateString(undefined, {
107
+
year: 'numeric',
108
+
month: 'long',
109
+
day: 'numeric',
110
+
})
67
111
</script>
68
112
69
113
<template>
70
-
<CardLayout title="placeholder!">
114
+
<CardLayout title="uses">
115
+
<template #intro>
116
+
<h2 id="intro-heading">about</h2>
117
+
<p>this is list of the hardware and software i use on a daily basis!</p>
118
+
<p class="meta">
119
+
last updated: <time :datetime="lastUpdated">{{ formattedLastUpdated }}</time>
120
+
</p>
121
+
</template>
122
+
71
123
<div class="uses-sections">
72
124
<section v-for="section in useSections" :key="section.title" class="uses-section">
73
125
<div class="section-header">
···
160
212
161
213
.uses-table {
162
214
width: 100%;
215
+
border-spacing: 0;
163
216
border-collapse: separate;
164
-
border-spacing: 0;
217
+
border-spacing: 0 0.1rem;
218
+
165
219
overflow: hidden;
166
220
table-layout: fixed;
167
-
background-color: hsla(var(--surface0) / 0.1);
168
-
border-radius: 0.5rem;
169
-
border: 1px solid hsla(var(--overlay1) / 0.25);
170
221
171
222
* {
172
223
transition: none;
···
187
238
color: hsl(var(--text));
188
239
font-size: 1rem;
189
240
font-weight: 500;
241
+
vertical-align: top;
190
242
191
243
.item-subtext {
192
244
display: block;
···
198
250
}
199
251
200
252
tbody {
201
-
tr {
202
-
--opacity: 0.2;
203
-
background-color: hsla(var(--overlay0) / 0.15);
204
-
&:nth-child(even) {
205
-
--opacity: 0.15;
206
-
background-color: hsla(var(--overlay0) / 0.05);
253
+
tr.item-row {
254
+
.item-label {
255
+
font-weight: 700;
256
+
}
257
+
258
+
td {
259
+
background-color: hsla(var(--base) / 0.5);
260
+
}
261
+
262
+
&:first-child {
263
+
td:first-child {
264
+
border-top-left-radius: 0.5rem;
265
+
}
266
+
td:last-child {
267
+
border-top-right-radius: 0.5rem;
268
+
}
269
+
}
270
+
&:not(:first-child) td {
271
+
&:first-child {
272
+
border-top-left-radius: 0.25rem;
273
+
border-bottom-left-radius: 0.25rem;
274
+
}
275
+
&:last-child {
276
+
border-top-right-radius: 0.25rem;
277
+
border-bottom-right-radius: 0.25rem;
278
+
}
279
+
}
280
+
&:last-child {
281
+
td:first-child {
282
+
border-bottom-left-radius: 0.5rem;
283
+
}
284
+
td:last-child {
285
+
border-bottom-right-radius: 0.5rem;
286
+
}
207
287
}
208
-
&:hover {
209
-
background-color: hsla(var(--overlay1) / var(--opacity));
288
+
289
+
a {
290
+
color: hsl(var(--accent));
291
+
text-decoration: none;
292
+
font-weight: 600;
293
+
&:hover {
294
+
text-decoration: underline;
295
+
}
210
296
}
211
-
}
212
297
213
-
tr:last-child td {
214
-
border-bottom: none;
298
+
&:hover td {
299
+
background-color: hsla(var(--page-accent) / 0.05);
300
+
}
215
301
}
216
302
}
217
303
}