an appview-less Bluesky client using Constellation and PDS Queries
reddwarf.app
whey.party
frontend
spa
bluesky
reddwarf
microcosm
1@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap');
2@import "tailwindcss";
3
4/* @theme {
5 --color-gray-50: oklch(0.984 0.005 220.000);
6 --color-gray-100: oklch(0.968 0.010 220.000);
7 --color-gray-200: oklch(0.929 0.020 222.000);
8 --color-gray-300: oklch(0.869 0.035 220.000);
9 --color-gray-400: oklch(0.704 0.060 218.000);
10 --color-gray-500: oklch(0.554 0.070 218.000);
11 --color-gray-600: oklch(0.446 0.065 218.000);
12 --color-gray-700: oklch(0.372 0.060 218.000);
13 --color-gray-800: oklch(0.279 0.055 220.000);
14 --color-gray-900: oklch(0.208 0.050 222.000);
15 --color-gray-950: oklch(0.129 0.050 222.000);
16} */
17
18@theme {
19 --color-gray-50: oklch(0.984 0.012 28);
20 --color-gray-100: oklch(0.968 0.017 28);
21 --color-gray-200: oklch(0.929 0.025 28);
22 --color-gray-300: oklch(0.869 0.035 28);
23 --color-gray-400: oklch(0.704 0.05 28);
24 --color-gray-500: oklch(0.554 0.06 28);
25 --color-gray-600: oklch(0.446 0.058 28);
26 --color-gray-700: oklch(0.372 0.058 28);
27 --color-gray-800: oklch(0.279 0.055 28);
28 --color-gray-900: oklch(0.208 0.055 28);
29 --color-gray-950: oklch(0.129 0.055 28);
30}
31
32@layer base {
33 html {
34 color-scheme: light dark;
35 }
36
37 * {
38 @apply border-gray-200 dark:border-gray-800;
39 }
40
41 html,
42 body {
43 @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
44 }
45
46 .using-mouse * {
47 outline: none !important;
48 }
49}
50
51@media (width >= 64rem /* 1024px */) {
52 html:not(:has(.disablegutter)),
53 body:not(:has(.disablegutter)) {
54 scrollbar-gutter: stable both-edges !important;
55 }
56 html:has(.disablegutter),
57 body:has(.disablegutter) {
58 scrollbar-width: none;
59 overflow-y: hidden;
60 }
61}
62
63.lightbox:has(+.lightbox-sidebar){
64 opacity: 0;
65}
66
67.scroll-thin {
68 scrollbar-width: thin;
69 /*scrollbar-gutter: stable both-edges !important;*/
70}
71
72.scroll-none {
73 scrollbar-width: none;
74}
75
76.dangerousFediContent {
77 & a[href]{
78 text-decoration: none;
79 color: rgb(29, 122, 242);
80 word-break: break-all;
81 }
82}
83
84.font-inter {
85 font-family: "Inter", sans-serif;
86}
87.font-roboto {
88 font-family: "Roboto", sans-serif;
89}
90
91:root {
92 --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
93 --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
94}
95
96:root {
97 --header-bg: var(--header-bg-light);
98}
99@media (prefers-color-scheme: dark) {
100 :root {
101 --header-bg: var(--header-bg-dark);
102 }
103}
104
105:root {
106 --shadow-opacity: calc(1 - var(--is-top));
107 --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
108}