decentralized and customizable links page on top of atproto
ligo.at
atproto
link-in-bio
python
uv
1@import url(/static/profile/default.css);
2
3:root {
4 --color-alert: #ee0000;
5 --color-background-secondary: #ececec;
6 --color-background-tertiary: #f9f9f9;
7 --color-border: #bbb;
8 --color-border-secondary: #cbcbcb;
9 --color-success: #080;
10 --size-border-radius: 2px;
11}
12
13@media (prefers-color-scheme: dark) {
14 :root {
15 --color-background-secondary: #333;
16 --color-background-tertiary: #222;
17 --color-border: #555;
18 --color-border-secondary: #3c3c3c;
19 --color-success: #af2;
20 }
21}
22
23p {
24 text-wrap: pretty;
25}
26
27.wrapper {
28 max-width: 25em;
29}
30
31.wrapper.error p {
32 text-align: center;
33}
34
35h2 {
36 font-size: 1.3em;
37 font-weight: 500;
38}
39
40.link-item.static {
41 flex-grow: 1;
42 box-shadow: none;
43}
44
45.link-item.static:hover {
46 transform: none;
47}
48
49.alert {
50 color: var(--color-alert);
51}
52
53.caption {
54 font-size: 0.8em;
55}
56
57.faded {
58 color: var(--color-text-secondary);
59}
60
61button,
62input {
63 background: var(--color-background-tertiary);
64 border: 1px solid var(--color-border-secondary);
65 border-radius: var(--size-border-radius);
66 box-sizing: border-box;
67 color: var(--color-text);
68 font: inherit;
69 font-size: 14px;
70 padding: 0.5em;
71 width: 100%;
72}
73
74button,
75input[type="submit"] {
76 background: var(--color-background-secondary);
77 border-color: var(--color-border);
78 font-weight: 600;
79 padding: 0.25em;
80}
81
82button.submit:last-of-type,
83input[type="submit"]:last-of-type {
84 margin-top: 1em;
85}
86
87.login .authservers {
88 margin-top: 2em;
89}
90
91.login .authservers .caption {
92 display: block;
93 text-align: center;
94}
95
96.login .authservers form {
97 display: grid;
98 gap: 0.25em;
99 grid-template-columns: 1fr 1fr;
100 margin-top: 0.75em;
101}
102
103actor-typeahead {
104 --color-border: var(--color-border-secondary);
105 --color-hover: var(--color-background-secondary);
106 --padding-menu: 2px;
107 --radius: var(--size-border-radius);
108}
109
110editor-label {
111 display: block;
112}
113
114editor-label + editor-label {
115 margin-top: 0.25em;
116}
117
118editor-label .label {
119 font-size: 14px;
120 font-weight: 700;
121 text-transform: uppercase;
122}
123
124link-editor-item {
125 display: block;
126 margin-top: 1em;
127 margin-left: -0.25em;
128 margin-right: -0.25em;
129 padding: 0.25em;
130 background: var(--color-background);
131 border: 1px solid var(--color-border-secondary);
132 border-radius: var(--size-border-radius);
133}
134
135link-editor-header {
136 display: flex;
137 flex-direction: row;
138 gap: 0.25em;
139}
140
141link-editor-drag-handle {
142 background: var(--color-background-secondary);
143 display: flex;
144 flex-grow: 0;
145 padding: 2px;
146 line-height: 100%;
147 font-size: 1.5em;
148 align-items: center;
149 cursor: grab;
150}
151
152link-editor-drag-handle:active {
153 cursor: grabbing;
154}
155
156link-editor-buttons {
157 display: flex;
158 flex-direction: row;
159 gap: 0.25em;
160 margin-top: 0.25em;
161}
162
163still-building {
164 background-color: var(--color-background-secondary);
165 border-radius: var(--size-border-radius);
166 display: block;
167}
168
169still-building .title {
170 background: repeating-linear-gradient(
171 45deg,
172 #fc0,
173 #fc0 20px,
174 #333 20px,
175 #333 40px
176 );
177 border-radius: var(--size-border-radius) var(--size-border-radius) 0 0;
178 color: #fff;
179 display: block;
180 font-size: 1.2em;
181 font-weight: 900;
182 padding: 0.25em;
183 text-align: center;
184 text-transform: uppercase;
185 text-shadow:
186 -1px -1px 0.5px #000,
187 1px -1px 0.5px #000,
188 -1px 1px 0.5px #000,
189 1px 1px 0.5px #000;
190}
191
192still-building p {
193 margin: 0;
194 padding: 0.5em;
195
196 &:not(:first-of-type) {
197 padding-top: 0;
198 }
199}
200
201.htmx-indicator {
202 --height: 2px;
203 height: var(--height);
204 margin: 2px 0;
205 opacity: 0;
206 visibility: none;
207}
208
209.htmx-request .progress {
210 animation: progress-bar 0.5s linear;
211 animation-fill-mode: both;
212 background: var(--color-success);
213 border-radius: calc(var(--height) / 2);
214 display: block;
215 height: var(--height);
216}
217
218@keyframes progress-bar {
219 0% {
220 width: 25%;
221 }
222 100% {
223 width: 100%;
224 }
225}
226
227form[hx-post] {
228 transition: opacity 0.2s;
229}
230
231form[hx-post].htmx-request {
232 opacity: 0.6;
233}