maybe a fork of sparrowhe's "bluesky circle" webapp, to frontend only?
dwn.poxiao-labs.work
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6 font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7 line-height: 1.5;
8 font-weight: 400;
9
10 color-scheme: light dark;
11 color: rgba(255, 255, 255, 0.87);
12 background-color: #242424;
13
14 font-synthesis: none;
15 text-rendering: optimizeLegibility;
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18}
19
20a {
21 font-weight: 500;
22 color: #646cff;
23 text-decoration: inherit;
24}
25a:hover {
26 color: #535bf2;
27}
28
29body {
30 margin: 0;
31 display: flex;
32 place-items: center;
33 min-width: 320px;
34 min-height: 100vh;
35}
36
37h1 {
38 font-size: 3.2em;
39 line-height: 1.1;
40}
41
42button {
43 border-radius: 8px;
44 border: 1px solid transparent;
45 padding: 0.6em 1.2em;
46 font-size: 1em;
47 font-weight: 500;
48 font-family: inherit;
49 background-color: #1a1a1a;
50 cursor: pointer;
51 transition: border-color 0.25s;
52}
53button:hover {
54 border-color: #646cff;
55}
56button:focus,
57button:focus-visible {
58 outline: 4px auto -webkit-focus-ring-color;
59}
60
61@media (prefers-color-scheme: light) {
62 :root {
63 color: #213547;
64 background-color: #ffffff;
65 }
66 a:hover {
67 color: #747bff;
68 }
69 button {
70 background-color: #f9f9f9;
71 }
72}
73
74@layer base {
75 :root {
76 --background: 0 0% 100%;
77 --foreground: 240 10% 3.9%;
78 --card: 0 0% 100%;
79 --card-foreground: 240 10% 3.9%;
80 --popover: 0 0% 100%;
81 --popover-foreground: 240 10% 3.9%;
82 --primary: 240 5.9% 10%;
83 --primary-foreground: 0 0% 98%;
84 --secondary: 240 4.8% 95.9%;
85 --secondary-foreground: 240 5.9% 10%;
86 --muted: 240 4.8% 95.9%;
87 --muted-foreground: 240 3.8% 46.1%;
88 --accent: 240 4.8% 95.9%;
89 --accent-foreground: 240 5.9% 10%;
90 --destructive: 0 84.2% 60.2%;
91 --destructive-foreground: 0 0% 98%;
92 --border: 240 5.9% 90%;
93 --input: 240 5.9% 90%;
94 --ring: 240 10% 3.9%;
95 --chart-1: 12 76% 61%;
96 --chart-2: 173 58% 39%;
97 --chart-3: 197 37% 24%;
98 --chart-4: 43 74% 66%;
99 --chart-5: 27 87% 67%;
100 --radius: 0.5rem;
101 }
102 .dark {
103 --background: 240 10% 3.9%;
104 --foreground: 0 0% 98%;
105 --card: 240 10% 3.9%;
106 --card-foreground: 0 0% 98%;
107 --popover: 240 10% 3.9%;
108 --popover-foreground: 0 0% 98%;
109 --primary: 0 0% 98%;
110 --primary-foreground: 240 5.9% 10%;
111 --secondary: 240 3.7% 15.9%;
112 --secondary-foreground: 0 0% 98%;
113 --muted: 240 3.7% 15.9%;
114 --muted-foreground: 240 5% 64.9%;
115 --accent: 240 3.7% 15.9%;
116 --accent-foreground: 0 0% 98%;
117 --destructive: 0 62.8% 30.6%;
118 --destructive-foreground: 0 0% 98%;
119 --border: 240 3.7% 15.9%;
120 --input: 240 3.7% 15.9%;
121 --ring: 240 4.9% 83.9%;
122 --chart-1: 220 70% 50%;
123 --chart-2: 160 60% 45%;
124 --chart-3: 30 80% 55%;
125 --chart-4: 280 65% 60%;
126 --chart-5: 340 75% 55%;
127 }
128}
129
130@layer base {
131 * {
132 @apply border-border;
133 }
134 body {
135 @apply bg-background text-foreground;
136 }
137}