An API you can curl, or open in a browser, to receive Bluesky data as markdown!
Strengthen Bluesky-blue accent highlights across UI
+37
-33
+10
-10
app/globals.css
+10
-10
app/globals.css
···
17
17
--text-dim: oklch(43.5% 0.008 250);
18
18
--text-muted: oklch(53.8% 0.008 250);
19
19
--danger: oklch(56% 0.2 26);
20
-
--blue-accent: oklch(59% 0.148 254);
21
-
--blue-accent-soft: oklch(76% 0.07 252);
22
-
--blue-glow: oklch(64% 0.13 254 / 0.22);
20
+
--blue-accent: oklch(58% 0.22 257);
21
+
--blue-accent-soft: oklch(72% 0.15 255);
22
+
--blue-glow: oklch(60% 0.22 256 / 0.35);
23
23
24
24
--radius-xs: 6px;
25
25
--radius-sm: 8px;
···
47
47
--text-dim: oklch(73.2% 0.005 250);
48
48
--text-muted: oklch(61.2% 0.006 250);
49
49
--danger: oklch(69% 0.18 27);
50
-
--blue-accent: oklch(72% 0.13 253);
51
-
--blue-accent-soft: oklch(83% 0.06 252);
52
-
--blue-glow: oklch(72% 0.15 252 / 0.24);
50
+
--blue-accent: oklch(74% 0.18 255);
51
+
--blue-accent-soft: oklch(84% 0.12 254);
52
+
--blue-glow: oklch(73% 0.2 255 / 0.42);
53
53
}
54
54
}
55
55
···
69
69
background:
70
70
radial-gradient(circle at 12% -8%, color-mix(in oklch, var(--line-strong) 26%, transparent), transparent 52%),
71
71
radial-gradient(circle at 90% 0%, color-mix(in oklch, var(--line-strong) 22%, transparent), transparent 44%),
72
-
radial-gradient(circle at 56% -18%, color-mix(in oklch, var(--blue-accent) 20%, transparent), transparent 46%),
72
+
radial-gradient(circle at 56% -18%, color-mix(in oklch, var(--blue-accent) 34%, transparent), transparent 47%),
73
73
var(--bg);
74
74
}
75
75
76
76
::selection {
77
-
background: var(--text);
78
-
color: var(--bg);
77
+
background: color-mix(in oklch, var(--blue-accent) 68%, var(--text) 32%);
78
+
color: var(--surface);
79
79
}
80
80
81
81
:focus-visible {
82
-
outline: 2px solid var(--text);
82
+
outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
83
83
outline-offset: 2px;
84
84
}
85
85
+27
-23
app/page.module.css
+27
-23
app/page.module.css
···
79
79
}
80
80
81
81
.logoMark {
82
-
color: color-mix(in oklch, var(--text-muted) 70%, var(--blue-accent) 30%);
82
+
color: color-mix(in oklch, var(--text-muted) 52%, var(--blue-accent) 48%);
83
83
font-family: var(--mono);
84
84
font-size: 0.9rem;
85
85
}
···
100
100
}
101
101
102
102
.navLinks a:hover {
103
-
color: var(--text);
103
+
color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
104
104
}
105
105
106
106
.hero {
···
113
113
114
114
.kicker {
115
115
font-size: 0.72rem;
116
-
color: color-mix(in oklch, var(--text-muted) 78%, var(--blue-accent) 22%);
116
+
color: color-mix(in oklch, var(--text-muted) 58%, var(--blue-accent) 42%);
117
117
font-family: var(--mono);
118
118
text-transform: uppercase;
119
119
letter-spacing: 0.17em;
···
134
134
content: '_';
135
135
font-family: var(--mono);
136
136
margin-left: 8px;
137
-
color: var(--text-muted);
137
+
color: color-mix(in oklch, var(--text-muted) 40%, var(--blue-accent) 60%);
138
138
animation: pulseCursor 1.15s steps(1, end) infinite;
139
139
}
140
140
···
199
199
font-size: 0.66rem;
200
200
letter-spacing: 0.12em;
201
201
text-transform: uppercase;
202
-
border: 1px dashed color-mix(in oklch, var(--line-strong) 72%, var(--blue-accent) 28%);
202
+
border: 1px dashed color-mix(in oklch, var(--line-strong) 58%, var(--blue-accent) 42%);
203
203
padding: 4px 10px;
204
204
border-radius: 999px;
205
205
background: color-mix(in oklch, var(--surface) 78%, transparent);
206
-
color: color-mix(in oklch, var(--text-muted) 76%, var(--blue-accent) 24%);
206
+
color: color-mix(in oklch, var(--text-muted) 56%, var(--blue-accent) 44%);
207
207
pointer-events: none;
208
208
}
209
209
···
221
221
letter-spacing: 0.07em;
222
222
text-transform: uppercase;
223
223
cursor: pointer;
224
-
box-shadow: 0 0 0 0 var(--blue-glow);
224
+
box-shadow:
225
+
0 0 0 1px color-mix(in oklch, var(--blue-accent) 16%, transparent),
226
+
0 0 0 0 var(--blue-glow);
225
227
transition: transform 120ms ease, opacity 120ms ease, box-shadow 180ms ease;
226
228
}
227
229
228
230
.convertBtn:hover {
229
231
transform: translateY(-1px);
230
-
box-shadow: 0 8px 24px -16px var(--blue-glow);
232
+
box-shadow:
233
+
0 0 0 1px color-mix(in oklch, var(--blue-accent) 22%, transparent),
234
+
0 14px 30px -18px var(--blue-glow);
231
235
}
232
236
233
237
.convertBtn:active {
···
256
260
}
257
261
258
262
.pill:hover {
259
-
color: var(--text);
260
-
border-color: var(--line-strong);
261
-
background: var(--surface-2);
263
+
color: color-mix(in oklch, var(--text) 74%, var(--blue-accent) 26%);
264
+
border-color: color-mix(in oklch, var(--line-strong) 56%, var(--blue-accent) 44%);
265
+
background: color-mix(in oklch, var(--surface-2) 88%, var(--blue-accent) 12%);
262
266
}
263
267
264
268
.resultSection,
···
291
295
background: linear-gradient(
292
296
90deg,
293
297
transparent,
294
-
color-mix(in oklch, var(--blue-accent-soft) 50%, transparent),
298
+
color-mix(in oklch, var(--blue-accent-soft) 78%, transparent),
295
299
transparent
296
300
);
297
301
}
···
308
312
}
309
313
310
314
.resultLabel {
311
-
border: 1px solid color-mix(in oklch, var(--line-strong) 72%, var(--blue-accent) 28%);
315
+
border: 1px solid color-mix(in oklch, var(--line-strong) 52%, var(--blue-accent) 48%);
312
316
border-radius: 999px;
313
317
padding: 4px 10px;
314
318
font-family: var(--mono);
315
319
font-size: 0.66rem;
316
320
letter-spacing: 0.11em;
317
321
text-transform: uppercase;
318
-
color: color-mix(in oklch, var(--text-muted) 80%, var(--blue-accent) 20%);
322
+
color: color-mix(in oklch, var(--text-muted) 56%, var(--blue-accent) 44%);
319
323
white-space: nowrap;
320
324
}
321
325
···
355
359
}
356
360
357
361
.actionBtn:hover {
358
-
border-color: var(--line-strong);
359
-
color: var(--text);
360
-
background: var(--surface-2);
362
+
border-color: color-mix(in oklch, var(--line-strong) 52%, var(--blue-accent) 48%);
363
+
color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
364
+
background: color-mix(in oklch, var(--surface-2) 86%, var(--blue-accent) 14%);
361
365
}
362
366
363
367
.actionBtnSuccess {
···
578
582
}
579
583
580
584
.card:hover {
581
-
border-color: var(--line-strong);
582
-
background: var(--surface-2);
585
+
border-color: color-mix(in oklch, var(--line-strong) 62%, var(--blue-accent) 38%);
586
+
background: color-mix(in oklch, var(--surface-2) 92%, var(--blue-accent) 8%);
583
587
}
584
588
585
589
.cardBadge {
···
588
592
height: 20px;
589
593
align-items: center;
590
594
justify-content: center;
591
-
border: 1px solid color-mix(in oklch, var(--line-strong) 76%, var(--blue-accent) 24%);
595
+
border: 1px solid color-mix(in oklch, var(--line-strong) 54%, var(--blue-accent) 46%);
592
596
border-radius: 999px;
593
597
font-family: var(--mono);
594
598
font-size: 0.61rem;
595
599
text-transform: uppercase;
596
-
color: color-mix(in oklch, var(--text-muted) 82%, var(--blue-accent) 18%);
600
+
color: color-mix(in oklch, var(--text-muted) 58%, var(--blue-accent) 42%);
597
601
letter-spacing: 0.08em;
598
602
}
599
603
···
644
648
align-items: center;
645
649
color: var(--text);
646
650
text-decoration: none;
647
-
border-bottom: 1px dashed color-mix(in oklch, var(--line-strong) 70%, var(--blue-accent) 30%);
651
+
border-bottom: 1px dashed color-mix(in oklch, var(--line-strong) 48%, var(--blue-accent) 52%);
648
652
font-size: 0.78rem;
649
653
}
650
654
651
655
.agentSkillsLink:hover,
652
656
.agentRawLink:hover {
653
-
color: color-mix(in oklch, var(--text) 70%, var(--blue-accent) 30%);
657
+
color: color-mix(in oklch, var(--text) 56%, var(--blue-accent) 44%);
654
658
}
655
659
656
660
.skillCopyBtn {