An API you can curl, or open in a browser, to receive Bluesky data as markdown!
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

Strengthen Bluesky-blue accent highlights across UI

j4ck.xyz 5199eaad db6e8b5a

+37 -33
+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
··· 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 {