finxol.io
Personal blog
finxol.io
blog
fix: improve dark mode (wip)
+8
-22
+1
-1
.tangled/workflows/deploy.yaml
+1
-1
.tangled/workflows/deploy.yaml
+3
-10
app/components/page-elements/BskyFeedPost.vue
+3
-10
app/components/page-elements/BskyFeedPost.vue
···
118
118
</script>
119
119
120
120
<template>
121
-
<article class="bsky-feed-post" :class="{ 'has-images': hasImages }">
121
+
<article class="bsky-feed-post border border-gray-200 dark:border-gray-800" :class="{ 'has-images': hasImages }">
122
122
<div class="main">
123
123
<a :href="`https://bsky.app/profile/${author.handle}`" class="avatar-link">
124
124
<img
···
142
142
</div>
143
143
144
144
<!-- Quote post button -->
145
-
<button v-if="quotedPost" type="button" class="quote-button" @click="openQuoteModal">
145
+
<button v-if="quotedPost" type="button" class="quote-button border border-gray-200 dark:border-gray-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-400 dark:hover:bg-neutral-300" @click="openQuoteModal">
146
146
<Icon name="ri:chat-quote-line" />
147
147
<img
148
148
:src="quotedPost.author.avatar"
···
250
250
position: relative;
251
251
display: flex;
252
252
padding: 0.75rem;
253
-
border: 1px solid #e5e7eb;
254
253
border-radius: 0.5rem;
255
254
width: 19rem;
256
255
height: 13rem;
···
373
372
align-items: center;
374
373
gap: 0.375rem;
375
374
padding: 0.25rem 0.5rem;
376
-
border: 1px solid #e5e7eb;
377
375
border-radius: 0.375rem;
378
376
background: none;
379
377
font-size: 0.6875rem;
380
-
color: #6b7280;
381
378
cursor: pointer;
382
379
transition: background-color 200ms;
383
380
width: fit-content;
384
381
385
-
&:hover {
386
-
background-color: #f9fafb;
387
-
}
388
-
389
382
& span {
390
383
max-width: 8rem;
391
384
white-space: nowrap;
···
438
431
}
439
432
440
433
.quote-dialog {
434
+
@apply bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100;
441
435
width: min(100%, 30rem);
442
-
background: white;
443
436
}
444
437
445
438
.dialog-content {
+4
-11
app/components/page-elements/BskyPosts.vue
+4
-11
app/components/page-elements/BskyPosts.vue
···
12
12
</div>
13
13
14
14
<div v-else class="posts-scroll">
15
+
<a :href="profileUrl" class="view-more text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-800">
16
+
<span>View more on Bluesky</span>
17
+
<Icon name="ri:arrow-right-line" />
18
+
</a>
15
19
<PageElementsBskyFeedPost
16
20
v-for="feedPost in posts"
17
21
:key="feedPost.post.uri"
18
22
:post="feedPost"
19
23
/>
20
-
<a :href="profileUrl" class="view-more">
21
-
<span>View more on Bluesky</span>
22
-
<Icon name="ri:arrow-right-line" />
23
-
</a>
24
24
</div>
25
25
</template>
26
26
···
42
42
gap: 0.5rem;
43
43
min-width: 10rem;
44
44
padding: 1rem;
45
-
border: 1px solid #e5e7eb;
46
45
border-radius: 0.5rem;
47
-
color: #6b7280;
48
46
flex-shrink: 0;
49
47
scroll-snap-align: start;
50
48
align-self: stretch;
51
49
transition: background-color 200ms, color 200ms;
52
-
53
-
&:hover {
54
-
background-color: #f9fafb;
55
-
color: #374151;
56
-
}
57
50
}
58
51
</style>