mackuba.eu
A curated list of libraries & SDKs for the Bluesky API and AT Protocol
1---
2---
3
4:root {
5 color-scheme: light dark;
6}
7
8body {
9 text-align: center;
10 font-family: -apple-system, ui-sans-serif, system-ui, Arial, Helvetica, sans-serif;
11 color: #333;
12 margin: 40px 0;
13}
14
15a {
16 text-decoration: none;
17 color: hsl(210, 90%, 45%);
18
19 &:hover { text-decoration: underline; }
20}
21
22header {
23 margin-top: 70px;
24 margin-bottom: 40px;
25
26 h1 {
27 font-size: 28pt;
28 font-weight: 500;
29 margin-bottom: 15px;
30
31 a { color: #333; }
32 }
33
34 h2 {
35 font-size: 12pt;
36 font-weight: 500;
37 }
38}
39
40nav {
41 margin-bottom: 40px;
42
43 a {
44 margin-left: 2px;
45 margin-right: 2px;
46 }
47}
48
49.nav-separator {
50 width: 80px;
51 border-top: 1px solid #aaa;
52 margin: 0px auto 30px;
53}
54
55.tags {
56 line-height: 200%;
57 margin: 10px auto 40px;
58 max-width: 720px;
59
60 span {
61 font-size: 10pt;
62 background-color: #d9efff;
63 border: 1px solid #bde2fe;
64 border-radius: 5px;
65 padding: 1px 5px;
66 margin-right: 8px;
67 }
68}
69
70#tag_cloud {
71 span {
72 cursor: pointer;
73 user-select: none;
74 -webkit-user-select: none;
75
76 &:hover {
77 background-color: hsl(205, 75%, 82%);
78 };
79
80 &.selected {
81 background-color: hsl(210, 90%, 55%);
82 border-color: hsl(210, 90%, 50%);
83 color: white;
84 border-width: 2px;
85 margin-right: 7px;
86 margin-left: -1px;
87 }
88 }
89}
90
91.language {
92 margin-bottom: 60px;
93
94 h2 {
95 display: inline-block;
96 border: 1px solid #aaa;
97 padding: 8px 15px;
98 border-radius: 8px;
99 min-width: 100px;
100 font-size: 16pt;
101 font-weight: 500;
102 box-shadow: 0 0 2px rgba(0,0,0,0.2);
103 }
104}
105
106.projects {
107 list-style-type: none;
108 padding-left: 0;
109 width: 525px;
110 margin: 10px auto;
111
112 li {
113 border: 1px solid #ccc;
114 border-radius: 8px;
115 margin: 20px 0px;
116 padding: 2px 16px;
117 line-height: 125%;
118 text-align: left;
119
120 &.official {
121 border-color: hsl(210, 90%, 45%);
122 box-shadow: 0 0 2px hsla(210, 90%, 45%, 40%);
123 background-color: hsla(210, 90%, 45%, 3%);
124 }
125
126 .title { position: relative; padding-right: 35px; }
127 .project-name { font-size: 14pt; font-weight: 500; margin-right: 2px; }
128 .author { font-size: 11pt; vertical-align: bottom; }
129 .author a { color: #333; }
130 .author .dot { margin-right: 2px; }
131 .butterfly { margin-left: 4px; }
132 .stars { position: absolute; right: 0px; font-size: 10pt; color: #666; }
133 .stars .count { font-size: 11pt; }
134
135 .description { line-height: 145%; font-size: 11pt; }
136
137 .tags {
138 margin: -3px 0;
139 line-height: 160%;
140
141 span {
142 margin-right: 3px;
143 }
144 }
145
146 .stats { margin-top: 18px; font-size: 11pt; border-top: 1px solid #ddd; padding-top: 15px; }
147 .stats img { position: relative; top: 2px; margin-right: 2px; }
148 .stats .separator { margin: 0px 5px; font-size: 13pt; }
149 .license { border: 1px solid #bbb; border-radius: 5px; padding: 1px 5px; font-size: 10pt; white-space: nowrap; }
150 .license.unknown { border-color: #fa4; }
151 }
152}
153
154footer {
155 font-size: 10pt;
156 margin: 70px 0 40px;
157}
158
159#tangled {
160 position: fixed;
161 top: 15px;
162 right: 15px;
163 z-index: 10;
164
165 img {
166 width: 24px;
167 opacity: 0.5;
168 }
169
170 a:hover img {
171 opacity: 0.8;
172 }
173}
174
175@media (prefers-color-scheme: dark) {
176 body {
177 background-color: #0d1117;
178 color: #ccc;
179 }
180
181 header {
182 h1 a { color: #ddd; }
183 }
184
185 .language {
186 h2 { border-color: #666; background-color: rgba(255, 255, 255, 0.05); }
187 }
188
189 .tags span {
190 background-color: #073659;
191 border-color: #1c5179;
192 color: #77aad1;
193 }
194
195 #tag_cloud span:hover {
196 background-color: hsl(205, 75%, 32%);
197 border-color: hsl(205, 63%, 44%);
198 color: hsl(205, 50%, 80%);
199 }
200
201 #tag_cloud span.selected {
202 background-color: hsl(210, 95%, 60%);
203 border-color: hsl(210, 80%, 50%);
204 color: hsl(210, 95%, 5%);
205 }
206
207 .projects li {
208 border-color: #666;
209 background-color: rgba(255, 255, 255, 0.02);
210
211 &.official {
212 border-color: hsl(210, 80%, 40%);
213 background-color: hsla(210, 90%, 45%, 10%);
214 }
215
216 .author a { color: #888; }
217 .stars { color: #888; }
218 .stats { border-top-color: #444; }
219 .separator { color: #666; }
220 .license { border-color: #666; }
221 .license.unknown { border-color: #a62; }
222 .stats img { filter: invert(1); opacity: 0.5; }
223 }
224
225 #tangled {
226 img { filter: invert(1); opacity: 0.5; }
227 a:hover img { opacity: 0.75; }
228 }
229}